javascript
关注
分享
扫一扫
暮志未晚NAN
这个作者很懒，什么都没留下…
展开
-
书写一个自运行函数的坑
抛出问题：今天群友提出了一个问题，看题： let b = 1; (function b() { b = 9; console.log(b) })();请问，b打印的值是什么？根据经验来说，大家明眼一看，肯定感觉打印的值是9，因为在上面就赋值了，打印的肯定就是9。可惜事与愿违，这个打印的竟然是函数function b。当场直接蒙蔽，下面...原创 2019-11-15 17:04:16 · 354 阅读 · 1 评论 -
js实现页面全屏
进入全屏if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) { // current working methods...原创 2018-12-03 15:39:18 · 5575 阅读 · 0 评论 -
js 如何实现在2d平面上画8
实现这样通过圆画实现这样一个8的形状，首先我们要会画圆。我们可以通过角度转成弧度：radian = angle/180 * Math.PI;再通过弧度获取当前的点的位置，这样最基础的圆的位置在-1到1的位置内var x = Math.sin(radian);var y = Math.cos(radian);当画完一个完整的圆以后，另一个圆的x轴绘制和当前的x轴的位置是...原创 2018-04-29 19:28:03 · 1054 阅读 · 3 评论 -
js相同的正则多次调用test()返回的值却不同的问题
代码是这样的：var reg = /^1[345678][0-9]{9}$/g;console.log(reg.test(15328044636));console.log(reg.test(15328044636));会发现控制台打印的数据却是：truefalse问题原因这是因为正则reg的g属性，设置的全局匹配。RegExp有一个lastIndex属性，来保存...原创 2018-04-26 11:57:33 · 3749 阅读 · 2 评论 -
为什么说DOM操作很慢
一直都听说DOM很慢，要尽量少的去操作DOM，于是就想进一步去探究下为什么大家都会这样说，在网上学习了一些资料，这边整理出来。 首先，DOM对象本身也是一个js对象，所以严格来说，并不是操作这个对象慢，而是说操作了这个对象后，会触发一些浏览器行为，比如布局（layout）和绘制（paint）。下面主要先介绍下这些浏览器行为，阐述一个页面是怎么最终被呈现出来的，另外还会从代码的角度，来说明一些...转载 2018-03-15 17:18:16 · 1426 阅读 · 2 评论 -
使用js或者jq设置滚动条滚动位置
js原生方法scrollTojs原生设置x轴和y轴就一个方法，首先获取到dom对象，然后设置位置即可，dom.scrollTo(x,y); //x为水平方向的滚动条位置，y为垂直方向的滚动条位置如果只想设置y轴的滚动条位置，首先需要获取到当前x轴的滚动条位置，然后再设置y轴，如：dom.scrollTo(dom.scrollLeft, 100); //设置y轴滚动一百像素原创 2018-01-28 22:45:31 · 60210 阅读 · 4 评论 -
js原生方法被覆盖，从新赋值原生方法
实现原理js的原生方法被覆盖掉以后，如果你还没让原生方法又从新指向一个新的变量名，那就gg了。所以，关键就是怎么再获取到原生的方法。实现的原理呢就是创建一个新的window对象，然后从新的window对象里面获取原生的方法，来重新赋值。使用iframe实现首先创建一个iframe对象，使用document.createElement方法创建var iframe = document.createEl原创 2017-12-22 18:15:21 · 1997 阅读 · 1 评论 -
这些JavaScript编程黑科技，装逼指南，高逼格代码，让你惊叹不已
如何装逼用代码骂别人SB(!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]如何用代码优雅的证明自己NB([][[]]+[])[+!![]]+([]+{})[!+[]+!![]]JavaScript 错误处理的方式的正确姿势try { something} catch (e) { window.locat转载 2017-11-21 23:52:44 · 1072 阅读 · 1 评论 -
js 将canvas生成图片下载，或直接保存一张图片
将canvas数组保存function downLoadImage(canvas,name) { var a = document.createElement("a"); a.href = canvas.toDataURL(); a.download = name; a.click();}canvas：传入canvas的dom对象 name：保存的图片的名字直接将原创 2017-11-06 22:48:41 · 8781 阅读 · 3 评论 -
js最简单的双向绑定案例代码
把代码复制放到页面里面运行看一下效果就好了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><input type="text" id="myinput" ><script> function watch(obj,key,cal原创 2017-10-13 16:57:08 · 706 阅读 · 1 评论 -
js实现双向数据绑定
需求现在的框架都讲究什么单向绑定，双向绑定的都是什么东西？ - 单向数据绑定：指的是我们先把模板写好，然后把模板和数据（数据可能来自后台）整合到一起形成HTML代码，然后把这段HTML代码插入到文档流里面。 - 双向数据绑定：数据模型（Module）和视图（View）之间的双向绑定。就是我不管修改数据模型的相关数据，还是视图上的数据，相对应的数据也会跟着更新。实现原理主要的就是事件的绑定。 -原创 2017-10-10 17:55:46 · 1482 阅读 · 1 评论 -
javascript 的"use strict"严格模式
概述除了正常运行模式，ECMAscript 5添加了第二种运行模式：”严格模式”（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。为什么用严格模式消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;消除代码运行的一些不安全之处，保证代码运行的安全；提高编译器效率，增加运行速度；为未来新版本的Javascript做好铺垫。“严格模转载 2017-09-27 17:20:45 · 802 阅读 · 1 评论 -
js阻止默认右键的下拉菜单
需求正常情况下，我们有可能遇到需要右键不显示下拉菜单的情况，让页面显得更加软件话，删除多余的功能，增加性能。实现代码 document.oncontextmenu = function (event) { event.preventDefault(); };在触发右键下拉菜单的时候，直接阻止掉浏览器的默认事件，就实现了该效果。原创 2017-09-25 10:22:59 · 5213 阅读 · 1 评论 -
js 取消页面可以选中文字的功能
需求有时候需要做的仿软件的功能，就需要取消可以选中文字的功能。这个功能浏览器默认开启，我们就可以使用js取消掉该功能。代码 document.onselectstart = function(){return false;}; //取消字段选择功能只要把这一句话放到页面里面，就可以取消掉字段选择功能。原创 2017-09-25 09:58:44 · 5440 阅读 · 1 评论 -
javascript随机生成一定位数的密码
代码function createPassword(min,max) { //可以生成随机密码的相关数组 var num = ["0","1","2","3","4","5","6","7","8","9"]; var english = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n",原创 2017-09-19 21:31:58 · 3531 阅读 · 0 评论 -
Chrome 控制台console的用法
下面我们来看看console里面具体提供了哪些方法可以供我们平时调试时使用。目前控制台方法和属性有：["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "ge转载 2017-08-23 18:19:53 · 3565 阅读 · 0 评论 -
js 使用console计算代码运行时间
需求如果学习前端一定时间以后，就会考虑性能方面的问题。那么问题来了，我们怎么计算出一段代码的运行时间呢？使用console.log配合Date对象计算比如，我们计算sort方法排序十万个随机数组成的数组需要用多长时间的话，可以这么写： var arr = []; for(var i=0; i<100000; i++){ arr.push(Math原创 2017-08-23 17:51:30 · 24310 阅读 · 1 评论 -
javascript的事件流
今天和群里的小朋友们一起沟通事件流问题，突然发现了自己也有一些没有注意的地方，今天就此更新一篇关于事件流的文章。事件流是什么？DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。DOM事件流最独特的性质是，文本节点也触发事件（在IE中不会），当鼠标单击“单击此文本”文本时原创 2017-08-15 12:01:26 · 1051 阅读 · 0 评论 -
js中的typeof和instanceof的用法和区别（附类型判断方法）
typeof作用：用于判断一个一个表达式，（对象或者原始值），返回一个字符串。返回的可能的值（摘自mdn）类型结果Undefined"undefined"Null"object" (历史遗留问题)Boolean"boolean"Number"number"String"s原创 2017-08-03 14:14:01 · 7348 阅读 · 1 评论 -
js模拟栈的操作
栈作为一种数据结构，是一种只能在一端进行插入和删除操作的特殊线性表。它按照先进后出的原则存储数据，先进入的数据被压入栈底，最后的数据在栈顶，需要读数据的时候从栈顶开始弹出数据（最后一个数据被第一个读出来）。栈具有记忆作用，对栈的插入与删除操作中，不需要改变栈底指针。栈是允许在同一端进行插入和删除操作的特殊线性表。允许进行插入和删除操作的一端称为栈顶(top)，另一端为栈底(bottom)；栈底原创 2017-07-11 10:59:48 · 1249 阅读 · 1 评论 -
js 生成随机颜色
function randomColor() { var arrHex = ["0","1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d","e","f"], strHex = "#", index;原创 2017-07-04 17:05:45 · 837 阅读 · 0 评论 -
js 获得盒子距离窗口的距离的集合的函数dom.getboundingclientrect()
rectObject = object.getBoundingClientRect();返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的CSS 边框集合 。DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right和bottom，单位为像素。除了 width原创 2017-06-13 14:17:15 · 4783 阅读 · 0 评论 -
javascript的内存泄漏
一、什么是内存泄漏？程序的运行需要内存。只要程序提出要求，操作系统或者运行时（runtime）就必须供给内存。对于持续运行的服务进程（daemon），必须及时释放不再用到的内存。否则，内存占用越来越高，轻则影响系统性能，重则导致进程崩溃。不再用到的内存，没有及时释放，就叫做内存泄漏（memory leak）。有些语言（比如 C 语言）必须手动释放内存，程序员转载 2017-06-09 09:37:30 · 732 阅读 · 0 评论 -
js 通过event获取相关位置的属性
clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。 screenX转载 2017-06-07 10:09:50 · 1943 阅读 · 0 评论 -
js 各种排序方法和sort方法的区别
今天突发奇想，想明白sort方法是否比各种排序都有优势，所以就参考别人的代码，做了一个测试，结果令人惊讶啊，上代码。 图片列表生成交互组件 * { margin: 0; border: 0; } html, body { heigh原创 2017-05-26 10:22:19 · 3669 阅读 · 1 评论 -
js中Uncaught RangeError: Maximum call stack size exceeded问题
今天在做一个递归函数时，突然控制台给我报了一个Maximum call stack size exceeded这样的错误，我很纳闷，思路很正确，但是为什么会报这样的错误呢。我们今天就聊聊这个错是怎么产生的：这个错误的中文意思就是“最大堆栈超过了最大值”，一般这种错误也是在递归函数当中出现。如果我们要解决问题，那就需要明白错误产生的原因。我们先看一个简单的，也能最清楚明白这个问题出现原创 2017-05-23 15:46:32 · 43587 阅读 · 1 评论 -
js处理字符串高亮相关内容，高光
// 高光处理function highlight(text, words, tag){ // 默认的标签，如果没有指定，使用span tag = tag || 'span'; var i, len = words.length, re; for (i = 0; i < len; i++) { // 正则匹配所有的文本 re =原创 2017-05-12 11:12:58 · 2318 阅读 · 0 评论 -
js数据存放及处理方式小结
1.全局变量统一定义，以__开头，如：var __data = {};2.局部变量尽量以变量含义字符串，遇特殊字符串需注意，如：function domo() {var tlocation = ''; // 尽量避免与内置对象有冲突的变量名}3.所有数据尽量放在js变量中。3.1.隐藏数据如尽量写在js全局变量中，因为浏览器（如ff）可能会默认将该值缓存，会转载 2017-05-09 10:45:40 · 2255 阅读 · 0 评论 -
使用Math.max和Math.min求数组的最大值和最小值
正常情况下，如果我们求数组的值，用到的就是for循环，如果在代码中经常求最大值和最小值的话，会显得代码很乱。所以，就考虑一中最简单的方法求最大值。使用Math里面自带的max和min方法function getMaxOfArray(numArray) { return Math.max.apply(null, numArray);}直接调用一下上面的函数，就会返回数组中最大的值。原创 2017-04-24 12:03:26 · 21485 阅读 · 5 评论 -
移动端左划右划事件触发简单的代码
Title *{margin:0;padding:0;} ul li {height: 50px; box-sizing: border-box; list-style-type: none; border:1px solid #ccc;} 1 2 3 4 5 1 2 3原创 2017-04-18 16:13:12 · 6120 阅读 · 1 评论 -
解决window.colse()不管用的问题
如果你碰到了window.colse()不管用的问题，证明：你这个页面不是js打开的页面，所以骚年别再浪费时间了，浏览器给不了你这么大的权限，好好的研究点别的吧。我写这篇文章就是为了帮你们省点时间，你研究个十年八年也解决不了这个问题。原创 2017-04-18 10:12:02 · 999 阅读 · 0 评论 -
js数组的遍历方法filter()、map()、some()、every()、forEach()、lastIndexOf()、indexOf()
filter(): 语法：var filteredArray = array.filter(callback[, thisObject]);参数说明：callback： 要对每个数组元素执行的回调函数。thisObject ： 在执行回调函数时定义的this对象。//过滤掉小于转载 2017-04-07 16:24:38 · 18849 阅读 · 0 评论 -
js获取页面中的鼠标滚轮事件
附加事件其中经我测试，IE/Opera属于同一类型，使用attachEvent即可添加滚轮事件。 /*IE注册事件*/if(document.attachEvent){ document.attachEvent('onmousewheel',scrollFunc);}Firefox使用addEventLis原创 2017-04-07 16:11:17 · 6047 阅读 · 0 评论 -
js相关的dom事件一览表
HTML DOM 事件HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。提示： 在 W3C 2 级 DOM 事件中规范了事件模型。HTML DOM 事件DOM： 指明使用的 DOM 属性级别。鼠标事件属性描述转载 2017-03-30 13:47:18 · 955 阅读 · 0 评论 -
原生js实现添加删除和查询元素的class
首先先来一个兼容性的版本判断元素是否有某个class function hasClass( elements,cName ){ return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") ); // ( \\s|^ ) 判断前面是否有空格 （\\s | $ ）判断后面是否有原创 2017-03-29 11:14:18 · 24597 阅读 · 1 评论 -
js的base64和文本字符串之间互转
/** Convert data (an array of integers) to a Base64 string. */ var toBase64Table = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'; var base64Pad = '='; function toBas转载 2017-03-16 18:11:47 · 12977 阅读 · 1 评论 -
个人库的第二个版本，将Zepto封装了进去
使用：var obj = myNeedExtend();obj.zepto就是zepto的方法咯下面上代码function myNeedExtend() { this.zepto = Zepto(); /* Zepto v1.2.0 - zepto event ajax form ie - zeptojs.com/license */ function Zepto(原创 2017-03-15 17:15:14 · 1568 阅读 · 0 评论 -
个人封装库，第一个版本（超烂）
function myNeedExtend() {}myNeedExtend.prototype = { constructor:myNeedExtend, //判断是什么媒体设备的浏览器 browserRedirect: function () { var sUserAgent = navigator.userAgent.toLowerCase()原创 2017-03-15 16:58:30 · 470 阅读 · 0 评论 -
判断是移动端还是pc端
function browserRedirect() { var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; var bIsIphoneOs = sUserAgent.mat原创 2017-03-07 09:32:38 · 2434 阅读 · 0 评论 -
js 将时间格式的转换为时间戳
// 获取某个时间格式的时间戳 var stringTime = "2014-07-10 10:21"; var timestamp2 = Date.parse(new Date(stringTime)); //2014-07-10 10:21:12的时间戳为：1404958872 console.log(stringTime +原创 2017-03-06 21:05:32 · 1519 阅读 · 0 评论