随笔分类 - JS/JQuery
摘要：
最近在做一个H5的项目，里边涉及到拍照上传图片的功能以及识别图片的功能，这里对识别图片的功能不做赘述，不属本文范畴。我在做完并上线项目后，同事跟我提了一个要求是可不可以同时选择多张图片上传，我做的时候的想法是如果给file表单加了 multiple 属性就没有办法调用手机的摄像头拍照了，如果不加，就无法同时选择多张图片，于是我就照实跟同事说了这个情况。但回头一想，单张图片可以上传，那多张图片呢？于是就有了本文的内容。
阅读全文
最近在做一个H5的项目，里边涉及到拍照上传图片的功能以及识别图片的功能，这里对识别图片的功能不做赘述，不属本文范畴。我在做完并上线项目后，同事跟我提了一个要求是可不可以同时选择多张图片上传，我做的时候的想法是如果给file表单加了 multiple 属性就没有办法调用手机的摄像头拍照了，如果不加，就无法同时选择多张图片，于是我就照实跟同事说了这个情况。但回头一想，单张图片可以上传，那多张图片呢？于是就有了本文的内容。
阅读全文
摘要：
最近在做一个活动页面，要求触摸切换图片时，默认在可视区域中显示三张图片，其中中间的一张图片比其他两张都大且全部显示，而其他两张图片只显示部分即可，于是就想到了swiper这个不依赖于任何js库的插件，但是其官网上没有相应的效果，只有那种可以同时显示三张的demo。但是产品说一定要那种效果，其他的效果不好看，于是我就上网查资料，还真让我找到了解决的办法。
阅读全文
最近在做一个活动页面，要求触摸切换图片时，默认在可视区域中显示三张图片，其中中间的一张图片比其他两张都大且全部显示，而其他两张图片只显示部分即可，于是就想到了swiper这个不依赖于任何js库的插件，但是其官网上没有相应的效果，只有那种可以同时显示三张的demo。但是产品说一定要那种效果，其他的效果不好看，于是我就上网查资料，还真让我找到了解决的办法。
阅读全文
摘要：
之前一个朋友问我说他的一个弹出层在弹出后，上下滑动弹出层或遮罩层，结果遮罩层下边的整个页面（页面超出了一屏）也跟着滚动了，他说他不想要这样的效果，我说你把弹出层和遮罩层的`position:fixed`设置为`position:absolute`就可以了，结果他说不行。当时我也没有在意，平时我也基本没有在意过这样的问题，所以就让他再查查资料。今天，我在做页面时，弹出层控制了高度，里边的内容多的话就必须要可以滚动来上下查看，而当我滚动时，果真带动了遮罩层下边整个页面的滚动，这就不太好了，效果很差，所以就开始找解决办法。
阅读全文
之前一个朋友问我说他的一个弹出层在弹出后，上下滑动弹出层或遮罩层，结果遮罩层下边的整个页面（页面超出了一屏）也跟着滚动了，他说他不想要这样的效果，我说你把弹出层和遮罩层的`position:fixed`设置为`position:absolute`就可以了，结果他说不行。当时我也没有在意，平时我也基本没有在意过这样的问题，所以就让他再查查资料。今天，我在做页面时，弹出层控制了高度，里边的内容多的话就必须要可以滚动来上下查看，而当我滚动时，果真带动了遮罩层下边整个页面的滚动，这就不太好了，效果很差，所以就开始找解决办法。
阅读全文
摘要：
今天一个朋友问我js顺序播放音乐列表中的音乐的问题，我仔细一想，我也没有做过啊，无从下手啊，怎么办？然后我就上网查了一下audio标签，又百度了js如何顺序播放音乐，结果就找到了解决的办法。
audio标签有一个方法是onended，W3C对它的解释是“当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。”这么问题就迎刃而解了。
阅读全文
今天一个朋友问我js顺序播放音乐列表中的音乐的问题，我仔细一想，我也没有做过啊，无从下手啊，怎么办？然后我就上网查了一下audio标签，又百度了js如何顺序播放音乐，结果就找到了解决的办法。
audio标签有一个方法是onended，W3C对它的解释是“当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。”这么问题就迎刃而解了。
阅读全文
摘要：
最近在做移动端项目时，需要实现一个列表页面的每一项item向左滑动时出现相应的删除按钮，本来想着直接使用zepto的touch.js插件，因为之前实现相同的功能时用过这个插件，当时还挺好用的，直接使用它的swipeLeft和swipeRight方法即可，可是今天又开始做这个功能时，却发现这两个方法在使用时毫无效果，一点反应都没有。上网查资料，又下载了最新版本的zepto和touch.js，都没有用，也不知为什么？所以就弃用了这个插件。
阅读全文
最近在做移动端项目时，需要实现一个列表页面的每一项item向左滑动时出现相应的删除按钮，本来想着直接使用zepto的touch.js插件，因为之前实现相同的功能时用过这个插件，当时还挺好用的，直接使用它的swipeLeft和swipeRight方法即可，可是今天又开始做这个功能时，却发现这两个方法在使用时毫无效果，一点反应都没有。上网查资料，又下载了最新版本的zepto和touch.js，都没有用，也不知为什么？所以就弃用了这个插件。
阅读全文
摘要：
在微信浏览器中浏览页面时，在当前页面中当我们将页面往下滚动到某一个位置时，可能我们就会点击某个链接而页面跳转到了另外一个页面，而当我们又返回到上一个页面时我们会发现那个页面还停留在我们之前浏览的位置，很方便我们接着往下浏览页面上其他的信息，这种效果大大提升了用户的体验度，提升了网站的逼格。今天，我就把实现这种效果的原理和代码分享给大家，方便大家的开发使用。
**原理**
1、用户滚动页面时，记录滚动条距离页面顶部的距离scrollTop；
2、将记录的值保存到cookie；
3、在返回到上一页时，再将保存到cookie中那个值赋值给上一页的滚动条距离顶部的距离scrollTop即可。
阅读全文
在微信浏览器中浏览页面时，在当前页面中当我们将页面往下滚动到某一个位置时，可能我们就会点击某个链接而页面跳转到了另外一个页面，而当我们又返回到上一个页面时我们会发现那个页面还停留在我们之前浏览的位置，很方便我们接着往下浏览页面上其他的信息，这种效果大大提升了用户的体验度，提升了网站的逼格。今天，我就把实现这种效果的原理和代码分享给大家，方便大家的开发使用。
**原理**
1、用户滚动页面时，记录滚动条距离页面顶部的距离scrollTop；
2、将记录的值保存到cookie；
3、在返回到上一页时，再将保存到cookie中那个值赋值给上一页的滚动条距离顶部的距离scrollTop即可。
阅读全文
摘要：
问题分类
滑动屏幕打开相应功能操作。
问题描述
1、用户手动滑动屏幕，根据滑动的方向，打开相应的功能（如：向上滑摇钱树经验明细，向下滑打开任务明细，向左滑打开聚宝盆物品查看等功能），滑动事件捕获问题。
2、大家都知道，划动都有角度问题，如：向330度方向滑动手机，要计算出它的方向问题。
3、HTML5提供的滑动事件，只能读取到起点和终点坐标，计算角度问题。
4、手机屏幕坐标与标准坐标系转换问题。
解决方案
1、滑动屏幕事件使用Html5 的touchstart滑动开始事件和touchend滑动结束事件。
2、方向的判断，以起点做平面坐标系，与终点连线做直线，直线与x正半轴计算角度；我们以45度角为方向分割线，如：只要滑动角度大于等于45度且小于135度
阅读全文
问题分类
滑动屏幕打开相应功能操作。
问题描述
1、用户手动滑动屏幕，根据滑动的方向，打开相应的功能（如：向上滑摇钱树经验明细，向下滑打开任务明细，向左滑打开聚宝盆物品查看等功能），滑动事件捕获问题。
2、大家都知道，划动都有角度问题，如：向330度方向滑动手机，要计算出它的方向问题。
3、HTML5提供的滑动事件，只能读取到起点和终点坐标，计算角度问题。
4、手机屏幕坐标与标准坐标系转换问题。
解决方案
1、滑动屏幕事件使用Html5 的touchstart滑动开始事件和touchend滑动结束事件。
2、方向的判断，以起点做平面坐标系，与终点连线做直线，直线与x正半轴计算角度；我们以45度角为方向分割线，如：只要滑动角度大于等于45度且小于135度
阅读全文
摘要：
我们平时在看一些选秀节目或一些歌唱类比赛节目时经常会看到在现场的大屏幕上会有观众的手机号在滚动来选出谁是幸运观众或谁中了什么奖项，这些手机号都是现场观众或场外观众在给选手投票时产生的，当主持人一声开始令下，大屏幕上的手机号就会快速随机滚动，当主持人一声停令下，大屏幕上会随机出现几个停止滚动的手机号，这种手机号批量随机滚动的效果，就是我们今天要实现的效果。*注意*，在这个效果的实现当中最核心的就是随机和不重复。
下面，我就简单来介绍一下原理：
1、随机，我们要写一个随机数，而且这个随机数不能重复，这个不能重复的随机数说白了就是我们从数据库中取出的手机号的索引；
2、使用定时器不断的产生不重复的随机数
阅读全文
我们平时在看一些选秀节目或一些歌唱类比赛节目时经常会看到在现场的大屏幕上会有观众的手机号在滚动来选出谁是幸运观众或谁中了什么奖项，这些手机号都是现场观众或场外观众在给选手投票时产生的，当主持人一声开始令下，大屏幕上的手机号就会快速随机滚动，当主持人一声停令下，大屏幕上会随机出现几个停止滚动的手机号，这种手机号批量随机滚动的效果，就是我们今天要实现的效果。*注意*，在这个效果的实现当中最核心的就是随机和不重复。
下面，我就简单来介绍一下原理：
1、随机，我们要写一个随机数，而且这个随机数不能重复，这个不能重复的随机数说白了就是我们从数据库中取出的手机号的索引；
2、使用定时器不断的产生不重复的随机数
阅读全文
摘要：```js //生成1 100不重复的随机数 var count=100; var a=new Array(); for(var i=0;i
阅读全文
摘要：
以前实现移动端的滑动加载更多实现的方法是当滚动条快到页面底部时就自动加载更多的数据，在这方面很多人都用的是"西门的后花园"写的一个叫[dropload](https://github.com/ximan/dropload)的插件，这个插件用起来也很好，很感谢西门的后花园作者。我以前在项目中用的也是这个插件，后来我老大说能不能做成那种向上拖动才会加载更多的效果，不要这种滚动到底部就加载，于是我就使用了iscroll
阅读全文
以前实现移动端的滑动加载更多实现的方法是当滚动条快到页面底部时就自动加载更多的数据，在这方面很多人都用的是"西门的后花园"写的一个叫[dropload](https://github.com/ximan/dropload)的插件，这个插件用起来也很好，很感谢西门的后花园作者。我以前在项目中用的也是这个插件，后来我老大说能不能做成那种向上拖动才会加载更多的效果，不要这种滚动到底部就加载，于是我就使用了iscroll
阅读全文
摘要：
**十进制转换为二进制：**
```js
var num = 100;
console.log(num.toString(2));
```
toString()方法可把一个 Number 对象转换为一个字符串，并返回结果。
**语法**
```
NumberObject.toString(radix);
```
其中，radix为可选。规定表示数字的基数，使 2 ~ 36 之间的整数。若省略该参数，则使用基数 10。但是要注意，如果该参数是 10 以外的其他值，则 ECMAScript 标准允许实现返回任意值。
阅读全文
**十进制转换为二进制：**
```js
var num = 100;
console.log(num.toString(2));
```
toString()方法可把一个 Number 对象转换为一个字符串，并返回结果。
**语法**
```
NumberObject.toString(radix);
```
其中，radix为可选。规定表示数字的基数，使 2 ~ 36 之间的整数。若省略该参数，则使用基数 10。但是要注意，如果该参数是 10 以外的其他值，则 ECMAScript 标准允许实现返回任意值。
阅读全文
摘要：以下为js获取HTTP的全部请求头信息：
```js
var req = new XMLHttpRequest();
req.open('GET', document.location, false);
req.send(null);
var headers = req.getAllResponseHeaders().toLowerCase();
console.log(headers);
```
以下为js获取HTTP的部分请求头信息，如日期：
```js
var req = new XMLHttpRequest();
req.open('GET', document.location, false);
req.send(null);
var headers = req.getResponseHeader('date');
console.log(headers);
阅读全文
以下为js获取HTTP的全部请求头信息：
```js
var req = new XMLHttpRequest();
req.open('GET', document.location, false);
req.send(null);
var headers = req.getAllResponseHeaders().toLowerCase();
console.log(headers);
```
以下为js获取HTTP的部分请求头信息，如日期：
```js
var req = new XMLHttpRequest();
req.open('GET', document.location, false);
req.send(null);
var headers = req.getResponseHeader('date');
console.log(headers);
阅读全文
摘要：之前，我介绍了学习安装并配置前端自动化工具Gulp，觉得gulp确实比grunt的配置简单很多，于是我决定再深入学习一下gulp，就去网上查了资料，发现gulp还可以自动添加版本号，这个功能就为我平时在更新css或js时老是在客户端存在缓存导致更新后的效果无法实时展现的苦恼。所以就赶紧去试了一下，果真可以，很高兴啊，真是为项目开发，为效果的快速展现提供了很多的便利。
实现原理：
1、修改js和css文件；
2、通过对js,css文件内容进行hash运算，生成一个文件的唯一hash字符串(如果文件修改则hash号会发生变化)；
3、替换html中的js,css文件名，生成一个带版本号的文件名。
阅读全文
之前，我介绍了学习安装并配置前端自动化工具Gulp，觉得gulp确实比grunt的配置简单很多，于是我决定再深入学习一下gulp，就去网上查了资料，发现gulp还可以自动添加版本号，这个功能就为我平时在更新css或js时老是在客户端存在缓存导致更新后的效果无法实时展现的苦恼。所以就赶紧去试了一下，果真可以，很高兴啊，真是为项目开发，为效果的快速展现提供了很多的便利。
实现原理：
1、修改js和css文件；
2、通过对js,css文件内容进行hash运算，生成一个文件的唯一hash字符串(如果文件修改则hash号会发生变化)；
3、替换html中的js,css文件名，生成一个带版本号的文件名。
阅读全文
摘要：
Gulp和所有Gulp插件都是基于nodeJs来运行的，因此在你的电脑上需要安装nodeJs，安装过程请移驾[安装并配置前端自动化工具——grunt](http://www.cnblogs.com/tnnyang/p/5534706.html)。安装完成后，通过运行cmd进入DOS命令窗口，如图：
阅读全文
Gulp和所有Gulp插件都是基于nodeJs来运行的，因此在你的电脑上需要安装nodeJs，安装过程请移驾[安装并配置前端自动化工具——grunt](http://www.cnblogs.com/tnnyang/p/5534706.html)。安装完成后，通过运行cmd进入DOS命令窗口，如图：
阅读全文
摘要：在jquery下，我们获取select表单选中的值通常是通过`$('select').val()`来实现，这样的方式简单又明了，或者通过`$('select option[selected]').text()`或`$('select option:selected').text()`这样的代码来实现，其实本来`$('select').val()`这种方式就很好，但在项目中我想获取给每个option自定义的属性的值，我就要通过后者的类似的写法`$('select option:selected').attr('data-id')`来实现，但是这种方法在zepto下就会报出option:selected不是一个合法的选择器的错误，这让我曾经一度认为是我的写法有错误，后来通过网上查资料，大神们才让我知道了这种写法不存在在zepto的API里，他们给出了这样的解决办法：
阅读全文
在jquery下，我们获取select表单选中的值通常是通过`$('select').val()`来实现，这样的方式简单又明了，或者通过`$('select option[selected]').text()`或`$('select option:selected').text()`这样的代码来实现，其实本来`$('select').val()`这种方式就很好，但在项目中我想获取给每个option自定义的属性的值，我就要通过后者的类似的写法`$('select option:selected').attr('data-id')`来实现，但是这种方法在zepto下就会报出option:selected不是一个合法的选择器的错误，这让我曾经一度认为是我的写法有错误，后来通过网上查资料，大神们才让我知道了这种写法不存在在zepto的API里，他们给出了这样的解决办法：
阅读全文
摘要：
昨天一个同行妹纸写了一个网络问卷调查的效果，但是有bug，于是就来问我该如何解决这个bug。经过我的分析，bug主要还是出在复选框的那部分，经过修改，bug问题解决，现在贴出如下代码，仅供大家参考。
阅读全文
昨天一个同行妹纸写了一个网络问卷调查的效果，但是有bug，于是就来问我该如何解决这个bug。经过我的分析，bug主要还是出在复选框的那部分，经过修改，bug问题解决，现在贴出如下代码，仅供大家参考。
阅读全文
摘要：在没结合css3的`transform`实现平滑过渡前，我都是用的jquery的`animate`方法，此方法在PC端基本看不出来有稍微卡顿的现象，但是在性能不高的手机上使用该方法，就会有明显的卡顿现象，不够平滑，而且，在移动端H5页面中很多人使用的js库是zeptoJS，所以要想使用animate方法还要额外引用一个fx.js的插件，这无疑又增加了页面的体积，增加了服务器的请求负担，这显然不是最好的解决办法。那么，今天，本人就给大家分享一个利用css3的`transform`并结合`transition`来实现我们常见的无缝间歇平滑向上滚动的特效。
阅读全文
在没结合css3的`transform`实现平滑过渡前，我都是用的jquery的`animate`方法，此方法在PC端基本看不出来有稍微卡顿的现象，但是在性能不高的手机上使用该方法，就会有明显的卡顿现象，不够平滑，而且，在移动端H5页面中很多人使用的js库是zeptoJS，所以要想使用animate方法还要额外引用一个fx.js的插件，这无疑又增加了页面的体积，增加了服务器的请求负担，这显然不是最好的解决办法。那么，今天，本人就给大家分享一个利用css3的`transform`并结合`transition`来实现我们常见的无缝间歇平滑向上滚动的特效。
阅读全文
摘要：
网上找过很多的移动端基于zepto或jquery的日期选择器，在实际产品中也用过一两种，觉得都不太尽如人意，后来果断选择了H5自己的日期input表单，觉得还可以，至少不用引用第三方插件了，性能也不错。今天偶尔有同行给提供了一个日期插件lCalendar，该插件是用原生js写的，不基于任何第三方库，大概看了一下效果，觉得还不错，就在这里分享了出来。
阅读全文
网上找过很多的移动端基于zepto或jquery的日期选择器，在实际产品中也用过一两种，觉得都不太尽如人意，后来果断选择了H5自己的日期input表单，觉得还可以，至少不用引用第三方插件了，性能也不错。今天偶尔有同行给提供了一个日期插件lCalendar，该插件是用原生js写的，不基于任何第三方库，大概看了一下效果，觉得还不错，就在这里分享了出来。
阅读全文
摘要：在各种前端框架如React，VUE等层出不穷的今天，前端的开发效率大大提高，且前端在用原始技术开发时的许多问题在使用了框架后也不存在了，个人在使用了vue开发项目后，觉得这些框架真的太好了，真的给我们节省了很多的开发时间。话虽如此，但依然有很多的前端小伙伴在使用基于jquery的前端技术，也包括本人。那么问题来了，前端在开发时势必会调后端的接口，就会用到ajax，就会在调接口时可能会有各种状态展示，于是，封装一个公共的ajax来实现产品的需求就显得很有必要。接下来我们就来实现对jquery的ajax进行二次封装。
阅读全文
在各种前端框架如React，VUE等层出不穷的今天，前端的开发效率大大提高，且前端在用原始技术开发时的许多问题在使用了框架后也不存在了，个人在使用了vue开发项目后，觉得这些框架真的太好了，真的给我们节省了很多的开发时间。话虽如此，但依然有很多的前端小伙伴在使用基于jquery的前端技术，也包括本人。那么问题来了，前端在开发时势必会调后端的接口，就会用到ajax，就会在调接口时可能会有各种状态展示，于是，封装一个公共的ajax来实现产品的需求就显得很有必要。接下来我们就来实现对jquery的ajax进行二次封装。
阅读全文
摘要：JS中, this的值到底是什么?
几个月之前, 拜读了《javascript语言精髓》, 里面对于这个问题, 做出了很好的解释...
JS中, this的值取决于调用的模式, 而JS中共有4中调用模式:
1. 方法调用模式
当一个函数被保存为对象的一个属性时, 我们称它为一个方法, 当一个方法被调用时, this指向该对象, 如:
阅读全文
JS中, this的值到底是什么?
几个月之前, 拜读了《javascript语言精髓》, 里面对于这个问题, 做出了很好的解释...
JS中, this的值取决于调用的模式, 而JS中共有4中调用模式:
1. 方法调用模式
当一个函数被保存为对象的一个属性时, 我们称它为一个方法, 当一个方法被调用时, this指向该对象, 如:
阅读全文
浙公网安备 33010602011771号