JavaScript 自定义控件
关注
分享
扫一扫
福州司马懿
大家如果觉得文章有帮助，给我个关注。谢谢大家 (+_+)，失业了球介绍工作
展开
-
JavaScript 滑动验证
<!DOCTYPE html><html><head> <meta charset="utf8"> <!-- 手指在滑动整个屏幕时，会影响浏览器的行为，比如滚动和缩放。所以在调用touch事件时，要注意禁止缩放和滚动 --> <meta name="viewport" conte原创 2017-02-16 23:42:08 · 10205 阅读 · 11 评论 -
JavaScript 手势解锁
<!DOCTYPE html><html><head><meta charset="utf8"><style>* { margin: 0; padding: 0;}#canvas { width: 100%; height: 100%; /*! 要想让元素铺满全屏，要么用absolute的100%，要么用100v...原创 2019-01-19 15:00:44 · 1544 阅读 · 0 评论 -
JavaScript 生成二维码（修改qrcode.js添加icon支持）
JS生成二维码，我用到的是 qrcode.js 这个插件，地址如下：https://github.com/davidshimjs/qrcodejs&amp;amp;lt;!DOCTYPE html&amp;amp;gt;&amp;amp;lt;html&amp;amp;gt;&amp;amp;lt;head&amp;amp;gt;&amp;amp;lt;script src原创 2019-01-04 17:08:16 · 92039 阅读 · 37 评论 -
CSS3&JavaScript 仿京东加入购物车特效
&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt;&amp;lt;meta charset=&quot;utf8&quot;&amp;gt;&amp;lt;style&amp;gt;body { marg原创 2018-12-19 10:53:22 · 3444 阅读 · 0 评论 -
CSS3&JavaScript 仿视频直播中的点赞效果
&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;meta charset=&quot;utf8&quot;&amp;gt;&amp;lt;head&amp;gt;&amp;lt;style&amp;gt;#loveContainer原创 2018-12-29 15:08:42 · 4212 阅读 · 0 评论 -
JavaScript 日历
<!DOCTYPE html><html><head><meta charset="utf8"><style>table { display: inline-block; border: 1px solid red; /** HTML5 中 table的cellspacing和cellpadding时被提示该属性已过时...原创 2019-01-03 18:45:27 · 1673 阅读 · 0 评论 -
JavaScript 自制可以替换属性的模板引擎（Template）
&amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt;&amp;amp;amp;lt;html&amp;amp;amp;gt;&amp;amp;amp;lt;head&amp;amp;amp;gt;&amp;amp;amp;lt;meta charset=&amp;amp;quot;utf8&amp;amp;quo原创 2018-12-18 12:43:40 · 1667 阅读 · 0 评论 -
JavaScript 下拉/上拉刷新
&lt;!DOCTYPE html&gt; &lt;html lang="zh-cn"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Pull to Refresh&lt;/ti原创 2018-12-17 19:16:17 · 1085 阅读 · 0 评论 -
JavaScript 自定义下拉列表
<!DOCTYPE html><html><head><meta charset="utf8"><meta name="viewport" content="width=device-width, initial-scale=1"><style>:root { --a原创 2018-12-14 14:43:32 · 4893 阅读 · 0 评论 -
JavaScript 仿 fullPage.js 实现全屏滚动
&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt;&amp;lt;meta charset=&quot;utf8&quot;&amp;gt;&amp;lt;style type=&quot;text/css&原创 2018-12-13 14:03:51 · 1402 阅读 · 0 评论 -
CSS3&JavaScript 瀑布流
实现方法概述html页面要实现瀑布流，目前有两种方案，它们的适用场景不同CSS3 的 column-count（适用于所有元素一次性加载，页面更新用分页来实现，且元素与位置依赖度不高的传统布局上）CSS2 的 flot 配合 JavaScript 动态测量（适用于所有元素分批加载，滑动到底部自动添加下一批元素的情况）当然，网上还有介绍 CSS3 的 grid 方案，很可惜，目前为止，所...原创 2018-11-28 11:10:50 · 1336 阅读 · 0 评论 -
JavaScrpt LRC歌词同步 和 es6 的 fetch 的 async/await 和 promise 两种写法
&amp;amp;lt;!DOCTYPE html&amp;amp;gt;&amp;amp;lt;html&amp;amp;gt;&amp;amp;lt;head&amp;amp;gt;&amp;amp;lt;meta charset=&amp;quot;utf8&amp;quot;&amp;amp;gt;&amp原创 2018-12-04 16:53:38 · 3321 阅读 · 0 评论 -
CSS3&JavaScript 仿微信对话框和时间格式化处理
<!DOCTYPE html><html><meta charset="utf8"><head><style>* { margin: 0; padding: 0;}body { background-color: #EBEBEB;}.chat { padding-left: 1rem; padding-rig...原创 2018-11-21 16:57:00 · 3400 阅读 · 0 评论 -
CSS3&JavaScript 图片分隔切换
&amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt;&amp;amp;amp;lt;html lang=&amp;amp;quot;en&amp;amp;quot;&amp;amp;amp;gt;&amp;amp;amp;lt;head&amp;amp;amp;gt;&amp;amp;amp;lt;meta char原创 2018-11-16 17:19:18 · 1182 阅读 · 0 评论 -
CSS3&Javascript marquee 滚动新闻
&amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;html&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;head&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;meta charset=&amp;amp;a原创 2018-10-31 18:14:09 · 2346 阅读 · 0 评论 -
JavaScript 长图分隔显示
<!DOCTYPE html><html><meta charset="utf8"><head><style>* { margin: 0; padding: 0; box-sizing: border-box;}.img-container { width: 50%; height: 96vh; displa...原创 2019-01-16 12:50:37 · 1359 阅读 · 0 评论