爱就大胆说出来，不敢？那就用代码说出来！爱就大胆说出来，不敢？那就用代码说出来！
转载自本人GitHub https: github.com/intflag/SayLOVE运行效果 项目源码 采用canvas绘制，其中「心形」绘制代码来自网络，本人觉着挺有创意的就拿来改了改，然后送给女神了，哈哈！！！ <!DOCTYPE HTML PUBLIC&nbs...[2018/10/31]
基于 HTML5 Canvas 的拓扑组件开发
在现在前端圈大行其道的 React 和 Vue 中，可复用的组件可能是他们大受欢迎的原因之一，
在 HT 的产品中也有组件的概念，不过在 HT 中组件的开发是依托于 HTML5 Canvas 的技术去实现的，
也就是说如果你有过使用 Canvas 的开发经验你就可以来封装自己的组件。
下面我...[2018/10/30]
【代码笔记】Web-HTML-表单【代码笔记】Web-HTML-表单
一，效果图。
二，代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title...[2018/10/30]
两行代码搞定博客访问量统计
我的博客有访客统计功能啦，看看实现的效果
原始计数代码
<!-- 不蒜子计数 -->
<script async src=" busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js">< cript>...[2018/10/30]
【代码笔记】Web-HTML-布局【代码笔记】Web-HTML-布局
一， 效果图。
二，代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html 列表</title>
</he...[2018/10/29]
初次使用vue-cli3 来搭建项目 - sanye-疯序员
1，细数项目中使用的技术：vue， vue-router， vuex ，axios，vue-cli3, 快速建站。
2，mock技术使用的expre -mockjs 。
由于cli3 最新版的话缺少webpack的两个配置文件夹缺少。config和build 两个文件。配置webpack的...[2018/10/29]
Node.js——fs模块(文件系统)，创建、删除目录(文件)，读取写入文件流
1 /*
2 1. fs.stat 检测是文件还是目录(目录 文件是否存在)
3 2. fs.mkdir 创建目录 （创建之前先判断是否存在）
4 3. fs.writeFile 写入文件(文件不存在就创建,但不能创建目录)
5 4. fs.append...[2018/10/29]
webpack单独打包一个less文件webpack单独打包一个less文件
需要将btn.le 文件用webpack打包后，放到项目中。在网上百度了各种，遇到了很多问题，现在我将整个步骤整理如下：
1、建一个空的文件夹，命名为init_webpack，在该文件夹下运行：
这里需要注意，安装的是3.xx版本的webpack，安装4以上版本会跟extract-text-w...[2018/10/26]
Flex布局
网页布局（layout）是 CSS 的一个重点应用。传统的布局方式有 float position display。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前...[2018/10/26]
教你如何一步一步用Canvas写一个贪吃蛇
之前在慕课网看了几集Canvas的视频，一直想着写点东西练练手。感觉贪吃蛇算是比较简单的了，当年大学的时候还写过C语言字符版的，没想到还是遇到了很多问题。 最终效果如下（图太大的话 时间太长 录制gif的软件有时限...） 首先定义游戏区域。贪吃蛇的屏幕上只有蛇身和苹果两种元素，而这两个都可以用...[2018/10/26]
(办公)百度api的使用(办公)百度api的使用
这个只是入门,详细的还得看官方的文档http: lbsyun.baidu.com/index.php?title=jspopular3.0/guide/helloworld
百度地图的“Hello, World”
开始学习百度地图API最简单的方式是看一个简单的示例。该示例帮...[2018/10/25]
详解Html5页面实现下载文件（apk、txt等）的三种方式详解Html5页面实现下载文件（apk、txt等）的三种方式
需求描述
接到的原始需求是这样的，有一个H5页面，页面中有个“点击下载”的按钮，点击之后，完成下载特定的apk。
大概是下面这样的👇：
需求分析
接到需求的时候我偷乐了一下，这个H5页面最大的优点是不在微信中使用（微信好坑，各种限制，基...[2018/10/24]
使用css完成物流进度的样式使用css完成物流进度的样式
使用c 完成物流进度的样式
效果：
c 样式：
<style type="text/c ">
ul li {
list-style: none;
}
.package-...[2018/10/24]
vue项目使用微信公众号支付总结
微信公众号支付
1. 使用j dk调用微信支付，具体查看开发文档；
使用的vuex，在mutations中
wechatPay (state, data) {
state.payObject = data
console.log(''微信支付开始请求...[2018/10/24]
from表单提交之前数据判空from表单提交之前数据判空
在input标签中写onclick事件，不管返回是真是假都会继续提交表单。
使用onsubmit事件
<form action="login.html" method=''post'' onsubmit="return check();">
姓名：<...[2018/10/24]
WebSocket 理论知识整理WebSocket 理论知识整理
最近工作用到websocket, 之前虽然也用到了一些简单的东西，但是并没有认真整理一下。所以这次准备了解一下WebSocket.
WebSocket产生的背景
WebSocket是一种在单个TCP连接上进行全双工通信的协议. 这意味着双方可以同时进行通信和交换数据
对于我们都非常熟悉的...[2018/10/23]
HTML5学习笔记
新特性:
HTML5 中的一些有趣的新特性：
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar...[2018/10/22]
HTML新手推荐
对于前端的学习要先了解一下浏览器和html的发展史 其次看看这篇文章：https: kb.cnblogs.com/page/129756/#chapter1 我读到这句话时候感觉到了科技这个东西有很多时候并不是一家独大的。 而现实生活中是需要互相学习的 奇怪的是，并没有哪个正式公布的规范对用户界面...[2018/10/21]
设计中的设计PDF下载高清完整扫描原版
最近在读《设计中的设计》一书，读到很多地方，我都感到很激动，内心充满很多美好的感悟，要将书合起来，慢慢想想，日后打开再读。需要学习的朋友可以通过网盘下载pdf版
http: putpan.com/f 2yei3b1e0n3s3h0u9/
在豆瓣上看到一些书评，大家都抱怨这书贵，另外有好几篇书评...[2018/10/21]
vue移动端html5页面根据屏幕适配的四种解决方法vue移动端html5页面根据屏幕适配的四种解决方法
最近做了两个关于h5页面对接公众号的项目，不得不提打开微信浏览器内置地图导航的功能确实有点恶心。下次想起来了的话，进行总结分享一下如何处理。在vue移动端h5页面当中，其中适配是经常会遇到的问题，这块主要有死个方法可以适用。
方法一：引入淘宝开源的可伸缩布局方案
引入淘宝开源的可伸缩布局方...[2018/10/20]
html5 http的轮询和Websocket原理
一、HTTP的轮询
Web客户端与服务器之间基于Ajax（http）的常用通信方式，分为 短连接 与 长轮询 。
短连接：客户端和服务器每进行一次HTTP操作，就建立一次连接，任务结束就中断连接。
长轮询：客户端像传统轮询一样从服务器请求数据。然而，如果服务器没有可以立即返回给客户端的...[2018/10/20]
sublime3 快速创建html模板
1 安装 Package Control 1.1 ctrl + ` 呼出控制台 1.2 复制(不要带最外层的双引号，该代码仅适用于sublime text 3)“ import urllib.request,os; pf = ''Package Control.sublime-package'';...[2018/10/20]
websocket使用个人总结
前言
一直在想要不要写下这篇，因为网上关于websocket的介绍和使用的好文实在太多太多，例如有这篇和这篇。
但我不管了，写下来，这样我就不用在想使用的时候总是去翻写过的源码了。
先回答几个简单的问题。
什么是websocket？websocket有什么用？什么时候用we...[2018/10/19]
HTML标签速记整理W3C
标题 <h1> 段落<p> 链接< href=""> 图像<img src="">自关闭元素，不需要结束标记 换行标志<br> HTML 元素以开始标签起始 HTML 元素以结束标签终止 HTML 文档由嵌套的 HTML 元素（可以包含...[2018/10/19]
input 属性为 number，maxlength不起作用如何解决？
<input type="text" maxlength="5" /> 效果ok，
当 <input type="number" maxlength="5" />时maxlength失效，长度可以无限输入。
解放方案：
...[2018/10/19]
canvas实现扭蛋机动画效果的示例代码
转眼间，已经实习了两个月了，公司每个月都有个会员日的活动要做，这个月的任务是做一个扭蛋机抽奖的活动，数据什么的都有接口，那么前端剩下最大的任务就只剩下扭蛋机的动画实现了。 背景 本来兴高采烈地从网上找了一个扭蛋机动画，但是发现它是直接用c 动画，把扭蛋们的动画写死了，这样我不是很喜欢，于是还是选...[2018/10/19]
利用HTML5和echarts开发大数据展示及大屏炫酷统计系统
想这样的页面统计及展示系统都是通过echarts来发开的及ajax数据处理，echarts主要是案例，在案例上修改即可，填充数据
echarts的demo案例如下：
http: echarts.baidu.com/echart...[2018/10/18]
h5预订酒店项目|html5酒店模板|h5酒店webapp开发
近几天尝试着使用html5+c 3+swiper+jqUI+layerMobile等技术开发了一款仿携程、去哪儿、艺龙webapp酒店预订系统，页面图标统一使用iconfont，仿原生app右侧弹窗效果，jquery-ui实现了日期范围选择插件(入住-离店两个日期)，整体功能效果及界面挺不错哒！
...[2018/10/18]
PPT在HTML网页上播放方法
项目中遇到一个需求：要求PPT在HTML网页上播放，而且要像电脑一样播放PPT，大家能想到的是什么方法？
印象中我好像有在网上见到过PPT模板网站上的PPT可以播放，赶紧百度搜了下发现都是用第三方软件转的视频播放，显然不符合我的项目需求。
后来网上找到一个方法：
1、先把PPT上传到服...[2018/10/17]
html5表单应用实例
HTML
*{
padding:0px;
margin: 0px;
}
form{
width: 300px;
margin: 0px auto;
}
form >fieldset{
padding:10px;
}
form > fie...[2018/10/17]
canvas进阶之如何画出平滑的曲线canvas进阶之如何画出平滑的曲线
背景概要 相信大家平时在学习canvas 或 项目开发中使用canvas的时候应该都遇到过这样的需求：实现一个可以书写的画板小工具。 嗯，相信这对canvas使用较熟的童鞋来说仅仅只是几十行代码就可以搞掂的事情，以下demo就是一个再也简单不过的例子了： <!DOCTYPE htm...[2018/10/17]
浅谈HTML5中dialog元素尝鲜
对话框（别称模态框，浮层）是web项目中用于用户交互的重要部分，我们最常见的就是js中 alert()，confirm()，但是这个对话框的不美观，也不能自定义样式，所以在开发的过程中，一般根据自己自己的需求造轮子或者使用第三方的。
对话框的组成
常见的弹出框形式：
位置：屏幕的左上角...[2018/10/17]
在WebGL场景中进行棋盘操作的实验在WebGL场景中进行棋盘操作的实验
这篇文章讨论如何在基于Babylon.js的WebGL场景中，建立棋盘状的地块和多个可选择的棋子对象，在点选棋子时显示棋子的移动范围，并且在点击移动范围内的空白地块时向目标地块移动棋子。在这一过程中要考虑不同棋子的移动力和影响范围不同，以及不同地块的移动力消耗不同。
一、显示效果：
...[2018/10/16]
前端页面播放 rtmp 流与 flv 格式视频文件
技术 ：angular/cli , html5 , typescript , sc ,es 6 ...
项目类型：直播视频与视频回放
使用到 插件 ： videojs + ckplayer
遇到的问题：
1. 一开始使用 flv.js 插件播放flv格式类型，遇到的问题 40M 以下...[2018/10/15]
学习html的第一天
HTML 第一章：
webde 运行环境:
1. 什么是HTML
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言：HyperText Markup Languge
超文本 就是网页上不光有文本，还有图片，音乐，视频等
标记语言是一套标签
HTML ...[2018/10/15]
CSS选择符
W3School离线手册(2017.03.11版)下载：https: pan.baidu.com 1c6cUPE7jC45mmwMfM6598A
选择符指的是要修改的元素。CSS中常用的选择符有 HTML选择器、类选择器、id选择器。
...[2018/10/15]
【收藏】轻松导出全民K歌里任何人录制的短视频(MV)、歌曲的方法
有一次想把她在全民K歌里唱过的所有歌下载到电脑上，然后合成一个视频。但不知道怎么导出全民K歌里的歌曲，经过各种百度Google终于找到了一个用起来很简单的工具。不仅可以下载保存任何人录制的歌曲，还可以保存MV、短视频。免费分享给大家（哈哈，这玩意在淘宝上竟然卖10块）。
简单的使用方法：
一、...[2018/10/15]
framework7的改进，以及与vue组合使用遇到的问题以及解决方法 (附vue的原理）
framework7官方提供了vue+framework7的组合包，但是那个包用起来复杂度较高，而且不灵活。听说bug也不少。
所以我想用最原始的方式单独使用vue和framework7.
遇到以下问题：
1.framework7的router跳转到新的页面，这个页面的代码无法使...[2018/10/12]
HTML5实现签到 功能HTML5实现签到 功能
Introduce(介绍)
用户签到的H5例子（c +jquery，无图片），由于网上找的的用户签到例子都不好，要不就是好多图片组成的，要不就大量冗余代码，所以特意做了个签到界面（移动端）。
User sign sample page for mobile using h5 which o...[2018/10/12]
nuxt 优化项：禁用js的预加载
这里有个nuxt和vue不同的地方，这个地方很有意思，官方的中文文档说得蜜汁自信
-------------------------------
In production, nuxt.js uses the prefetch strategy to pre-fetch t...[2018/10/11]
学习HTML5 canvas遇到的问题学习HTML5 canvas遇到的问题
学习HTML5 canvas遇到的问题
1. 非零环绕原则(nonzZero rule)
非零环绕原则是canvas在进行填充的时候是否要进行填充的判断依据。
在判断填充的区域拉一条线出来，拉到图形的外面，这条拉出来的线就是辅助线。判断绘制的线是否是从辅助线的左边穿过到辅助线的右边...[2018/10/11]
为不同的屏幕尺寸提供不同的图片（为那些没有必要下载全尺寸大图的设备节省带宽）
为不同的屏幕尺寸提供不同的图片
现在我们可以让图片完美缩放，而且也知道了如何限制特定图片的显示尺寸。图片尺寸必须比其显示尺寸更大以保证渲染效果，否则的话图片可能看起来很糟糕。基于这个原因，图片文件的体积就永远比实
际显示所需的大。
很多人都在研究这个问题，尝试为较小的屏幕尺寸提供较小...[2018/10/10]
详解canvas drawImage()方法绘制图片不显示的问题
canvas有个很强大的api是drawImage()（w3c）： 他的主要功能就是绘制图片、视频，甚至其他画布等。 问题： 慕名赶来,却一脚踩空,低头一看,地上一个大坑。 事情是这样的,在我看完w3c的介绍和很有说服力和教学力的demo后,本着实践出真知的思想决定上手一试,这一试不要紧~ 我按照...[2018/10/10]
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
原文地址： github.com/whinc/blog/…
最近接到一个“发表评论”的需求：用户输入评论并且可以拍照或从相册选择图片上传，即支持图文评论。需要同时在 H5 和小程序两端实现，该需求处理图片的地方较多，本文对 H5 端的图片处理实践做一个小结...[2018/10/10]
HTML5 视频播放(video),JavaScript控制视频的实例代码
具体代码如下所示：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<...[2018/10/10]
基于 HTML5 Canvas 的 组态电机控制面板
前言 HT For Web 提供完整的基于 HTML5 图形界面组件库。您可以轻松构建现代化的，跨桌面和移动终端的企业应用，无需担忧跨平台兼容性，及触屏手势交互等棘手问题。也可用于快速创建和部署，高度可定制化，并具有强大交互功能的拓扑图形及表盘图表等应用。HT for Web 非常适用于实时监控系统...[2018/10/9]
小程序解决方案 Westore - 组件、纯组件、插件开发
数据流转
先上一张图看清 Westore 怎么解决小程序数据难以管理和维护的问题:
非纯组件的话，可以直接省去 triggerEvent 的过程，直接修改 store.data 并且 update，形成缩减版单向数据流。
Github: https: github.com/dntzhang...[2018/10/9]
H5新增的标签以及改良的标签
1》OL标签的改良 start type reversed:翻转排序
2》datalist标签自动补全的使用
3》progre 标签的使用:进度条
4》meter标签的应用
5》details展开收缩标签的使用-子标签summary(自动带有展开收缩的效果)
6》mark标...[2018/10/9]
HTML5开篇定义（更新中）
以下介绍的两种属性是为后面的属性支持左铺垫，大概一看就OK了。
通用属性
id
用于为HTML元素指定唯一标识
style
用于为HTML元素指定CSS指定样式
cla
用于匹配CSS样式的cla 选择器
dir
用于设置元素中内容的排列方向
t...[2018/10/8]
记一次与iframe之间的抗争记一次与iframe之间的抗争
iframe这个标签之前了解过这个东西，知道它可以引入外来的网页，但是实际开发中没有用到过。这一次有一个需求是说准备要在网页中嵌套另外一个网站，用iframe这个标签，让我测试一下这个可不可以在自己的网页中对引入进来的iframe框架进行操作，操作dom和c 的一些东西。让我做出一个小案例看看...[2018/10/8]
经验首页