【JavaScript】
文章平均质量分 70
Rattenking
迎接着黎明的曙光前行!
展开
-
【JavaScript】 ---- 数组元素的上移、下移、置顶
1. 上移或者下移都是使用 temp 变量获取当前位置的元素;2. 当前位置获取需要移动方向位置的元素【前一个或者后一个位置的元素】;3. 移动方向位置获取 temp 变量的值,完成元素的替换;4. 置顶采用变量 temp 获取当前位置元素,other 获取其他位置元素值;5. 将 temp 和 other 拼接,这里可以使用 unshift, concat等实现。原创 2023-08-16 10:30:00 · 2282 阅读 · 0 评论 -
微信小程序---- setData 列表性能优化
原始方法----将现有列表和新加载列表拼接 setData方法1:利用数组 push 方法var list = this.data.orderList;res.list.forEach(cur => list.push(cur));this.setData({ orderList: list})方法2:利用数组 concat 方法var list = this.data.orderList;this.setData({ orderList: list.concat(res.l原创 2020-11-25 14:55:10 · 1313 阅读 · 0 评论 -
nodejs之url模块
初步学习nodejs,目前在读《nodejs入门》这一本书,书很小,但是让我知道了如何用nodejs创建一个简单的小项目。例如如何创建一个服务器啦,例如http.createServer,还有根据不同的请求路径来设置路由选择啦,模块引入,创建模块啦,巴拉巴拉的东西。现在还没有看完这本书,看完了再来写读后感吧。 今天主要记录的是关于nodejs里面的一个简单的模块,url模块。这个url的模块...转载 2017-10-10 16:58:26 · 688 阅读 · 0 评论 -
nodejs之querystring模块
这里主要记下querystring模块的使用方法。querystring从字面上的意思就是查询字符串,一般是对http请求所带的数据进行解析。querystring模块只提供4个方法,在我看来,这4个方法是相对应的。这4个方法分别是querystring.parse和querystring.stringify,querystring.escape和querystring.unescape。 ...转载 2017-10-10 16:52:18 · 1261 阅读 · 0 评论 -
利用canvas的getImageData()方法制作《在线取色器》
1,取色器,首先就要有取色的对象,所以第一步我们需要制作前端的图片预览,我才用的方法是createObjectURL()获取图片的路径获取图片路径方法 let getObjectURL = function(file){ let url = null ; if (window.createObjectURL!=undefined) { // basic ...原创 2017-09-11 10:42:00 · 2848 阅读 · 0 评论 -
侧边栏导航(移动端商品--评论--详情)随楼层滑动高亮显示
demo下载地址接触前端一年时间,开始还能感觉到自己的进步,随着时间的推移,开始不知道方向。因为各种前端的框架和插件在网上都能够找到现成的,直接下载下来用就好了。从来不考虑其中的实现原理什么的,即便是去看了其中的源代码,也是知其然而不知其所以然。举一个简单的例子:去年圣诞公司要求页面上要有雪花飘落的效果,当时的第一想法,就是canvas绘图制作这个动画(必定培训的时候学的飞机大战有类似的效...原创 2017-08-15 11:37:12 · 3782 阅读 · 0 评论 -
用QRCode.js制作二维码解析器(qrcode.decode方法解析二维码)
由于近期公司要求制作一个移动端的‘长按识别二维码’的功能,但是该功能最本质的就是解析二维码,在网上找了很多,发现效果是有了,就是没有那种可以直接用的,后来在根据网上的资料,自己研究了一下,发现二维码解析部分的功能挺简单的,最主要就是利用了qrcode.js这个插件的qrcode.decode和qrcode.callback,就能对二维码进行解析,同时对解析结果进行返回。注意:qrcode....原创 2017-09-19 10:03:14 · 22157 阅读 · 12 评论 -
xxx.forEach is not a function(DOM集合--类数组对象转化为数组)
1,错误:Uncaught TypeError: hdList.forEach is not a function2,错误的原因原生js获取的DOM集合是一个类数组对象,所以不能直接利用数组的方法(例如:forEach,map等),需要进行转换为数组后,才能用数组的方法!3,6种解决办法(假如hdList是一个DOM集合)(1),Array.from()方法//将hdList...原创 2017-09-29 10:05:13 · 31748 阅读 · 0 评论 -
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as
谷歌浏览器的警告: [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080 造成原因: 由于浏...原创 2017-09-28 14:34:44 · 15549 阅读 · 21 评论 -
微信分享等设置 -- 缩略图等
1、请求‘接口注入权限验证配置’参数 var weixinParam = null;//自定义分享内容var shareObj = { title: '', // 分享标题 desc: '', // 分享描述 link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: '', // 分享图标 type: '', // 分享...原创 2017-06-16 11:40:46 · 5633 阅读 · 4 评论 -
在【商品列表页面】分享【商品详情】----网易手推公众号效果
1,制作一个分享的js接口可参考:http://blog.csdn.net/m0_38082783/article/details/73326551假如接口为: wxShare({ title: '', // 分享标题 desc: '', // 分享描述 link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUr...原创 2017-10-11 15:13:43 · 850 阅读 · 0 评论 -
node.js 获取url中的各个参数
如果url为:http://127.0.0.1:8020/?param=10&id=code1,首先引入模块:var http = require('http');var url = require("url");var querystring = require("querystring");2,创建服务并获取参数: http.createServer(f...原创 2017-10-10 17:05:31 · 13662 阅读 · 1 评论 -
MUI导航栏透明渐变----原生JS实现
首先声明:由于backgroundColor的值采用的是RGBA,IE8及以下不支持,所以此效果不支持IE8及以下的浏览器css代码body,p,h1{margin: 0;}.module-layer{ width: 100%; position: fixed; top: 0; left: 0; z-index: 100000;}.module-laye原创 2017-11-07 11:27:47 · 4196 阅读 · 0 评论 -
js实现:仿京东搜索栏随滑动透明度渐变
注意:不兼容IE8及以下,IE11和360的IE兼容模式测试通过====IE8不支持opacity此效果采用的opacity做的透明渐变demo效果废话不多说,直接上代码:1、HTML <header class="module-layer"> <div class="module-layer-content"> <div ...原创 2017-07-10 10:06:17 · 4492 阅读 · 2 评论 -
UEditor富文本编辑器的简单入门
UEditor富文本编辑器的简单入门首先既然我们要用UEditor插件,我们就需要引入对应的文件,在UEditor官网下载,然后将static文件夹拷贝到我们项目的根目录下,接下来就是引用:* 引入配置文件 <script src="static/UE/ueditor.config.js"></script>* 引入all.js <script src="static/UE/uedit原创 2017-10-17 14:43:05 · 3195 阅读 · 0 评论 -
Markdown在线编辑器
使用showdown.js实现的Markdown在线编辑器DEMO效果图引入showdown.js<script src="https://cdn.bootcss.com/showdown/1.3.0/showdown.min.js"></script>HTML代码<div class="editor-box"> <p class="head-name">Markdown编辑器</p&g原创 2017-11-15 11:09:23 · 983 阅读 · 0 评论 -
使用showdown.js将Markdown文档转换为HTML
引入showdown.js<script src="https://cdn.bootcss.com/showdown/1.3.0/showdown.min.js"></script>通过showdown转换var converter = new showdown.Converter();//转换为HTMLvar html = converter.makeHtml(markdownText);/原创 2017-11-16 10:47:58 · 2405 阅读 · 0 评论 -
前端自适应----单位rem
下边是大神对《移动前端自适应解决方案和比较》的链接: 移动前端自适应解决方案和比较通过使用,自我感觉网易的解决方案是最方便我们使用时候的计算。 代码:(function(factory){ factory(); window.addEventListener('resize',factory,false);}(function(){ var width = documen原创 2017-11-21 15:37:34 · 1353 阅读 · 0 评论 -
打乱数组顺序的三种方法
sort排序法(最简单的打乱数组顺序的方法)原理: 利用sort用法:arr.sort(compareFunction) 如果 compareFunction(a,b) 返回的值大于 0 ,则 b 在 a 的前边; 如果 compareFunction(a,b) 返回的值等于 0 ,则a 、b 位置保持不变; 如果 compareFunction(a,b) 返回的值小...原创 2018-03-16 11:20:12 · 70810 阅读 · 14 评论 -
用QRCode.js制作二维码的生成器(qrcode.makeCode方法生成二维码)
现在前端二维码的生成器有很多,像草料二维码生成器,联图二维码生成器等这些在线生成器都是生成功能比较强大,生成的二维码比较精美的在线生成器,看着比较高大上,那么他们的实现原理?就是通过QRCode.js插件的qrcode.makeCode方法来生成的二维码。下载QRCode.js1,引入QRCode.js <script src="QRCode.js" type="text/...原创 2017-09-19 14:09:34 · 12037 阅读 · 0 评论 -
通过jquery库扩展移动端‘长按触发’事件(模拟浏览器‘长按识别二维码’功能)
上一篇讲了如何通过qrcode.js解析二维码(图片),那么现在我们要实现的功能就是最开始的要求'长按识别二维码'这个功能!解析部分的难题我们已经解决,那么现在需要解决的就是模拟‘长按触发事件’这个功能,该功能通过一些参考资料,采用的是给jquery的扩展一个触发事件。解析二维码讲解1,扩展触发事件代码 $.fn.longPress = function (fn) { let...原创 2017-09-19 10:58:24 · 5963 阅读 · 9 评论 -
如何写出优美的 JavaScript 代码?
作者:尹锋链接:https://www.zhihu.com/question/20635785/answer/2235152161,避免使用 js 糟粕和鸡肋这些年来,随着 HTML5 和 Node.js 的发展,JavaScript 在各个领域遍地开花,已经从“世界上最被误解的语言”变成了“世界上最流行的语言”。但是由于历史原因,JavaScript 语言设计中还是有一些糟粕和鸡肋,比...转载 2017-09-27 16:59:16 · 842 阅读 · 0 评论 -
Array对象的方法实现(1)----Array.prototype.push和Array.prototype.concat(实现常规参数的功能)
1,Array对象的push方法push 用于向数组的末尾添加一个或多个元素,并返回新的长度;改变原数组的长度,将新的值添加在数组的尾部语法:array.push(item1, item2, ..., itemX);注意:1,该方法的返回值是改变后的数组长度。2,原数组会改变。 Array.prototype._push = function(item){ //获取链...原创 2017-08-28 17:36:40 · 1203 阅读 · 0 评论 -
Array对象的方法实现(2)----Array.prototype.every和Array.prototype.fill(实现常规参数的功能)
仅供学习参考,发现错请纠正,谢谢!4,Array的every方法//every 检测数组中的值是否存在满足条件的值,全部满足条件返回true和有一个不满足就返回false,不对空数组进行检测,不改变原数组//语法:array.every(function(currentValue,index,arr), thisValue);//注意:1,返回一个布尔值。2,原数组不变。原创 2017-08-29 14:49:43 · 1054 阅读 · 0 评论 -
Array对象的方法实现(3)----Array.prototype.filter和Array.prototype.find(实现常规参数的功能)
6,Array的filter方法//filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。//注意:1,返回一个新的数组。2,不改变原数组//语法:arr.filter(callback[, thisArg]); Array.prototype._filter = function(fn){ if(this === null) throw new...原创 2017-08-29 16:43:04 · 2074 阅读 · 0 评论 -
Array对象的方法实现(4)----Array.prototype.findIndex和Array.prototype.forEach(实现常规参数的功能)
8,Array的findIndex方法findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。语法:arr.findIndex(callback[, thisArg])注意:1,有返回值(找到的第一个元素下标或者没找到的-1)。2,不改变原数组 Array.prototype._findIndex = function(fn/*,thisArg*/...原创 2017-08-30 15:00:19 · 1769 阅读 · 0 评论 -
Array对象的方法实现(6)----Array.prototype.indexOf(实现常规参数的功能)
11,Array的indexOf方法indexOf()方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。语法:arr.indexOf(searchElement[, fromIndex = 0])注意:1,返回找到的索引或者不存在的-1。2,不改变原数组 Array.prototype._indexOf = function(){ if(this ==...原创 2017-09-01 16:38:03 · 1757 阅读 · 0 评论 -
Array 数组去重 总结10方法(7)
1,常规双循环去重(缺点:循环次数较多) Array.prototype.unique1 = function(){ if(this === null){throw new TypeError('"this" is null or not defined');} let that = Object(this),len = that.length >>> 0;...原创 2017-09-04 11:23:39 · 1066 阅读 · 0 评论 -
获取某个数内的质数
思路:1,排除传入参数为小于2的数(if(param < 2)return;);2,建立有一个元素2的数组(let arr = [2]);3,建立一个初始值为3(i = 3),最大值为传入参数的循环(i <= param),注意偶数不可能为指数,所以循环的时候直接去掉偶数,直接循环奇数(i += 2);4,定义当前循环的标记(flag = true);5,建立一个初...原创 2017-09-14 10:32:36 · 806 阅读 · 0 评论 -
jquery分页插件pagination.js的使用
1、引入jQuery和jQuery.pagination.js文件 <script type="text/javascript" src="js/jquery-1.11.3.js"></script><script type="text/javascript" src="js/jquery.pagination.js"><原创 2017-06-26 13:32:15 · 14005 阅读 · 1 评论 -
Array对象的方法实现(5)----Array.prototype.includes(实现常规参数的功能)
10,Array的includes方法includes() 方法用来判断一个数组是否包含一个指定的值,如果是,酌情返回 true或 false。语法:arr.includes(searchElement) 或 arr.includes(searchElement, fromIndex)注意:1,返回值为true(找到指定值),false(未找到指定值)。2,不改变原数组 Arra...原创 2017-08-31 16:47:37 · 2804 阅读 · 0 评论 -
滚动条滑动到指定位置
废话不多说直接代码:css样式代码: .scroll-layer{ width: 100%; background: #fff; position: fixed; top: 0; left: 0; z-index: 1000;}.scroll-layer p{ height: 4rem; line-height: 2rem; font-size: 1.3rem;...原创 2017-08-10 15:15:37 · 2240 阅读 · 0 评论 -
前端常见面试题
1、你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?IE: trident内核Firefox:gecko内核Safari:webkit内核Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核Chrome:Blink(基于webkit,Google与Opera Software共同开发)2、描述一下渐进增强和优雅降级之间的不同吗?...转载 2017-04-01 16:15:46 · 680 阅读 · 0 评论 -
getTime()方法在苹果系统的bug
前几天我在测试苹果系统的一个秒杀页面时发现,“yyyy-MM-dd HH:mm:ss”这种格式的时间在苹果系统中直接用getTime()方法会返回NaN。 我们先来看看在安卓系统中的倒计时写法,实例1:时间格式:2016-12-30 23:59:59 <html lang="zh-CN"><head> <meta charset="utf-...原创 2017-04-18 10:40:57 · 2116 阅读 · 0 评论 -
artTemplate源码
主要实现:通过拼接字符串的方式构建编译函数,辅助函数通过在编译函数字符串体内以var methodName=function(){}方式传入,因此编译函数字符串体内就可以使用methodName方式加以调用;用户数据通过向编译函数传参注入,赋值给$data后,就可以使用$data.value的方式使用;if、each语句预先通过parser方法将其拼接为js形式的if、each语法。 1....转载 2017-05-24 15:03:12 · 58009 阅读 · 0 评论 -
一个比较有趣的题:推算今天星期几
题目:有一天你忘记了今天是星期几,你找来了八个人,让他们每人说两句话,第一句是星期几,另一句今天不是星期几,两句中一句真,一句假,可能第一句为真,也可能第二句为真。最后你确定今天是星期几,并输出。(输入描述,8行,每行是星期几的阿拉伯数字。输出描述一个数字,表示星期几)输入:[[1,2],[2,6],[3,4],[5,1],[7,7],[1,5],[1,4],[4,2]]输出:7说实话...原创 2017-06-09 10:12:21 · 1576 阅读 · 0 评论 -
移动端滚动加载-----jQuery 和 原生JS
判断滚动条到底部,需要用到DOM的三个属性值,使用jQuery分别是:$('body').scrollTop()为滚动条在Y轴上的滚动距离。$(window).height()为内容可视区域的高度。$('body').height()为内容可视区域的高度加上溢出(滚动)的距离。从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为$('body').scrollTop() +$(...原创 2017-06-12 11:30:12 · 1184 阅读 · 0 评论 -
jsonp获取json数据
这两天做微信端JS接口,当时遇到的第一个问题就是权限验证的参数请求,当你请求access_token等的时候,就会存在跨域问题:然后在网上查了,采用ajax的jsonp进行跨域请求,后来报错了,返回的结果错误。然后认真看了一下文档,发现ajax的jsonp返回的数据是callback(json),卡到这里。最后同时为了安全的考虑,我就将这一部分的权限验证参数在后端做,然后前端请求,这样就避免了跨域...原创 2017-06-16 15:04:40 · 9022 阅读 · 0 评论 -
微信config:invalid signature
config:invalid signature是微信的签名错误官网关于签名生成的规则:参与签名的字段包括noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳), url(当前网页的URL,不包含#及其后面部分) 。对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=v...原创 2017-06-16 16:24:45 · 2055 阅读 · 0 评论 -
js实现返回页面顶部
无动态效果1、原生JS window.scrollTo(0,0);2、jQuery $(window).scrollTop(0);有动态效果 1、原生JS function smoothscroll(){ window.requestAnimationFrame(smoothscroll); ...原创 2017-06-23 16:48:17 · 1428 阅读 · 0 评论