JavaScript
文章平均质量分 63
福州司马懿
大家如果觉得文章有帮助,给我个关注。谢谢大家 (+_+),失业了球介绍工作
展开
-
常见的JS存储方式及其特点
开发人员可以根据具体需求选择合适的存储方式。Cookie适合存储小型数据和会话相关信息,LocalStorage和SessionStorage适合在浏览器中进行持久化或临时存储,IndexedDB适合处理大量结构化数据和复杂查询。使用这些数据存储方式,可以有效管理和利用前端的数据。如果你想要查看当前网站存储了哪些数据,可以点击“F12”,在开发者工具中,切换到 “存储” 选项卡其中,会话存储就是 SessionStorage;本地存储就是localStorage。原创 2023-06-09 16:30:13 · 1833 阅读 · 0 评论 -
JS打印HTML文件
如果你只想打印特定的部分,你可以在HTML中使用打印样式表(print stylesheet)来控制打印时的显示效果,或者使用JavaScript来选择性地打印特定的元素。如果你只想打印特定的元素,你可以使用JavaScript来操作DOM并选择性地打印这些元素。函数将获取指定ID的元素的内容,并在新打开的窗口中打印该内容。请注意,这个方法将会打开一个新窗口并打印其中的内容,而不是直接在当前窗口中进行打印操作。当你运行这段代码时,浏览器将打开打印对话框,允许你选择打印设置并确认打印操作。原创 2023-05-29 17:21:43 · 1893 阅读 · 0 评论 -
JavaScript 嵌套滚动
假设有这么一个场景:一个长页的表格(纵向滚动),上方有一排功能按钮(横向滚动),比如下图注意:html 中鼠标滚轮操作的,默认是纵向滚动,如果要支持横向滑动,需要手动修改元素的 scrollLeft。代码如下<!DOCTYPE html><html><head><meta charset="utf8"><title>横向滑动&...原创 2019-11-26 16:20:06 · 1638 阅读 · 0 评论 -
JavaScript 无法调用 close 方法
今天在写 websocket 的 demo 的时候,很随意的定义了 send 和 close 方法,来发送数据和关闭连接。大致代码如下<html><head><script>function send() { console.log("send");}function close() { console.log("close");}</...原创 2019-10-12 09:18:34 · 1087 阅读 · 0 评论 -
JavaScript DOM0,DOM1,DOM2级事件 与 event 对象
0级DOM分为2个:一是在标签内写onclick事件二是在JS写onlicke=function(){}函数1)2)document.getElementById(“myButton”).onclick = function () {alert(‘thanks’);}以下是分割线1级DOM–(为什么没有1级DOM)DOM级别1于1998年10月1日成为W3C推荐标准。1级DO...转载 2018-12-10 19:08:09 · 1891 阅读 · 0 评论 -
JavaScript 火狐window.event为空的替代方式
<!DOCTYPE html><html><head><meta charset="utf8"><script>//严格模式下,这些都是不能用的//TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mo...原创 2018-11-12 16:51:04 · 1558 阅读 · 0 评论 -
JavaScript 监听页面显示状态
一、visibilitychange浏览器的标签页被隐藏或显示的时候都会触发 visibilitychange 这个事件。通过 visibilitychange 这个事件,我们可以在标签页隐藏的时候停止播放音乐视频、停止一些不必要的轮询、还可以停止一些诸如轮播等循环的动画效果等等。这些可以节省服务器和本地的开销。document 中定义了两个只读的属性 hidden 和 visibilit...原创 2018-11-12 14:11:21 · 5835 阅读 · 0 评论 -
JavaScript shuffle 数组洗牌
<!DOCTYPE html><html><head><meta charset="utf8"><script>function createArray(max) { const arr = []; for(let i = 0; i < max; i++) { arr.push(i); } return arr..原创 2018-11-12 11:20:40 · 1662 阅读 · 0 评论 -
JavaScript Debounce 和 Throttle 的原理及实现
转自 https://blog.csdn.net/redtopic/article/details/69396722在处理诸如 resize、scroll、mousemove 和 keydown/keyup/keypress 等事件的时候,通常我们不希望这些事件太过频繁地触发,尤其是监听程序中涉及到大量的计算或者有非常耗费资源的操作。有多频繁呢?以 mousemove 为例,根据 DOM ...转载 2018-04-20 12:05:43 · 4356 阅读 · 2 评论 -
JavaScript 刷新或关闭网页时弹窗确认
beforeunload事件在当页面关闭或刷新时调用,事件触发的时候弹出一个有确定和取消的对话框,确定则离开页面,取消则继续待在本页。有两种方法绑定事件,三种方法实现弹窗:通过 window.addEventListener 对 returnValue 赋值window.addEventListener("beforeunload", function (e) { (e...原创 2018-04-24 15:44:12 · 10945 阅读 · 6 评论 -
JavaScript 数字前补“0”的五种方法
众所周知JavaScript中的数字是没有前置0的,因此需要我们自己进行操作来添加前置0,而且还得转换成字符串。<html><body><script> //迭代方式实现 function padding1(num, length) { for(var len = (num + "").length; len < length; len = num.length)原创 2017-03-17 13:31:10 · 47273 阅读 · 0 评论 -
JavaScript 格式化字符串 & 需要转义的正则表达式
<!DOCTYPE html><html><head><meta charset="utf8"><script>String.prototype.format = function() { let result = this; console.log(arguments) if(arguments.length == 1 ...原创 2018-11-23 15:34:41 · 1349 阅读 · 0 评论 -
WEB开发常用编码 Base64、BCD码、URL编码、Unicode、utf-8 的简单总结
Unicode 创造史参考 https://www.jianshu.com/p/36d20de2a1eeBase64Base64 是网络上最常见的用于传输 8bit 字节代码的编码方式之一。有时候我们需要把二进制数据编码,然后放在URL中传输,以便不会被人直接看出。通过编码防止意外生成的系统定界字符编码为base64之前 数据是以字节数组存放, 里面任何二进制字符都是可能的。如果有的语...原创 2018-11-30 14:47:00 · 3994 阅读 · 0 评论 -
JavaScript URLSearchParams
URLSearchParams API用于处理URL之中的查询字符串,即问号之后的部分。没有部署这个API的浏览器,可以用url-search-params这个垫片库。原创 2018-12-07 16:52:23 · 2554 阅读 · 0 评论 -
JavaScrip for in、for of、forEach、map、filter、some、every
forEach((currentValue, index, arr){})forEach 是 ES5 引入的函数。它支持遍历数组和容器,依次取得数组中的每一个元素。不能用来遍历对象使用 return 返回参数无效,使用 break 尝试中断循环会报错。forEach 返回 undefinedmap((currentValue, index, arr){})map 是 ES5 引...原创 2018-12-07 18:25:36 · 1291 阅读 · 2 评论 -
JavaScrip 用Canvas绘制爱心的几种方式
心形公式参考:https://www.cnblogs.com/sunshine21/p/7757958.htmlhttps://blog.csdn.net/robert_chen1988/article/details/53123462https://blog.csdn.net/stereohomology/article/details/51581391https://blog.csdn...原创 2018-12-27 11:54:48 · 2735 阅读 · 0 评论 -
JavaScript 获取粘贴时候的元素
首先,要清楚一点,不是所有的元素都支持复制粘贴的。目前知道的有以下几种<input type="text"/>仅支持单行文本输入,不支持换行<textarea></textarea>只支持文字(不支持图片),当文字超出高度时会显示滚动条属性contenteditable被赋为true的div或span,如<div contenteditable...原创 2019-01-07 10:39:52 · 1265 阅读 · 0 评论 -
JavaScrpt Promise
ECMAscript 6 原生提供了 Promise 对象Promise 对象代表了未来将要发生的事件,用来传递异步操作的消息。它共,有三种状态:pending: 初始状态,不是成功或失败状态。fulfilled: 意味着操作成功完成。rejected: 意味着操作失败。Promise的构造函数接收一个函数,该函数有两个参数:resolve,reject,分别表示异步操作执行成功后的...原创 2019-02-15 18:47:16 · 1030 阅读 · 0 评论 -
Javascript 中 ajax 和 axios、fetch 的区别
首先介绍一下 BootCDNBootCDN 是 Bootstrap 中文网支持并维护的前端开源项目免费 CDN 服务,致力于为 Bootstrap、jQuery、Angular、Vuejs 一样优秀的前端开源项目提供稳定、快速的免费 CDN 加速服务。BootCDN 所收录的开源项目主要同步于 cdnjs 仓库。后续要用到的 JS 插件的CDN地址均可以从该网站找到。ajaxAJAX = ...原创 2019-02-13 14:25:01 · 1567 阅读 · 0 评论 -
JavaScript 函数的默认参数
ES5 的年代JS 函数的默认参数都是 undefined,在 ES5 里不支持直接在形参里面写默认值。所以,如果需要设置默认值,只能在函数内部检测该参数是否为 undefined,若非才进行赋值。这是一种比较正规严谨的做法function add ( a, b ) { var b = typeof b !== 'undefined' ? b : 0; return a + b;}...原创 2019-02-25 10:55:59 · 1621 阅读 · 0 评论 -
JavaScript arguments、callee、caller
实验代码<html><body><script>function test(arg1) { console.log(arguments); console.log(typeof(arguments)); console.log(test.caller)}function callFunc() { test();}console.log(test);te原创 2017-03-17 16:52:05 · 1602 阅读 · 0 评论 -
JavaScript 重名的函数和对象
JavaScript 允许重复声明变量,后声明的覆盖之前的。var a = 1;var a = 'x';console.log(a);//输出'x'JavaScript允许重复定义函数。JavaScript没有重载这个概念,它仅依据函数名来区分函数。后定义的同名函数覆盖之前的,与参数无关。function test() { console.log("test");}test(原创 2017-03-17 15:26:04 · 7748 阅读 · 1 评论 -
JavaScript canvas
简介HTML5 <canvas> 是绘制 图形/图像 的容器。它本身并没有绘制能力,您必须使用脚本来完成实际的绘图任务(通常是 JavaScript)。如果浏览器不支持<canvas>的话,会显示<canvas>标签内定义的元素。例如,下面代码在不支持的<canvas>浏览器下就会忽略<canvas>标签,显示<p>标签。<canvas id="canvas" width="500" height=原创 2016-12-09 15:18:37 · 2109 阅读 · 0 评论 -
JavaScript "===" 与 "==" 的区别
“===”叫做严格运算符,”==”叫做相等运算符。严格运算符的运算规则如下:不同类型值 如果两个值的类型不同,直接返回false。同一类的原始类型值 同一类型的原始类型的值(数值、字符串、布尔值)比较时,值相同就返回true,值不同就返回false。同一类的复合类型值 两个复合类型(对象、数组、函数)的数据比较时,不是比较它们的值是否相等,而是比较它们是否指向同一个对象。undefin原创 2017-01-08 12:40:42 · 1120 阅读 · 0 评论 -
HTML 一种重定向方法 / JavaScript 两种重定向方法
HTML <meta><html> <head> <title>Relocation</title> <meta http-equiv="refresh" content="3; URL=file:///C:/Users/Administrator/Desktop/test.html" </head> <body> </body></原创 2016-12-15 10:40:43 · 1404 阅读 · 0 评论 -
JavaScript Date
Date函数new Date() Date 对象会自动把当前日期和时间保存为其初始值。date.getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。date.getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。周日是0。date.getMonth() 从 Date 对象返回月份 (0 ~ 11)。date.getFullYear()原创 2017-01-01 20:37:03 · 1401 阅读 · 0 评论 -
JavaScript Navigator
Navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。虽然这个对象的名称是 Netscape 的 Navigator 浏览器,但其他实现了 JavaScript 的浏览器也支持这个对象。Navigator 对象的实例是唯一的,可以用 Window 对象的 navigator 属性来引用它。测试用例<html> <head> <meta原创 2016-12-22 11:50:06 · 2075 阅读 · 0 评论 -
JavaScript hash 与 history 实现客户端路由的原理
window.history 对象在编写时可不使用 window 这个前缀。history.back() 加载历史列表中的上一个 URL,与浏览器点击后退按钮作用相同。等价于history.go(-1)。history.forward() 加载历史列表中的下一个 URL,与浏览器点击向前按钮作用相同。等价于history.go(-1)。history.go(int n) 加载历史列表中原创 2016-12-15 11:56:09 · 1432 阅读 · 0 评论 -
JavaScript 键盘事件
JavaScript 键盘事件有以下3种keydown 键盘按键按下(如果按着不放,会持续触发该事件)keypress 键盘非功能按键按下(在keydown之后触发,如果按着不放会持续触发该事件)。keyup 键盘按键弹起。全局事件对象eventevent.ctrlKey 功能键”ctrl”键是否按下。event.altKey 功能键”alt”键是否按下。event.shif原创 2016-12-14 20:09:52 · 2320 阅读 · 0 评论 -
JavaScript childNodes attributes
DOM 节点在 HTML DOM (文档对象模型)中,每个部分都是节点:文档本身是文档节点所有 HTML 元素是元素节点所有 HTML 属性是属性节点HTML 元素内的文本是文本节点(空白文本也算)注释是注释节点Element 对象在 HTML DOM 中,Element 对象表示 HTML 元素。Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。NodeLi原创 2016-12-11 17:41:20 · 1339 阅读 · 0 评论 -
十分钟玩转 jQuery、实例大全
转自 http://www.cnblogs.com/suoning/p/5683047.html一、简介定义 jQuery创始人是美国John Resig,是优秀的Javascript框架; jQuery是一个轻量级、快速简洁的javaScript库。源码戳这jQuery对象 jQuery产生的对象时jQuery独有的,只能自己调用转载 2016-07-26 08:55:38 · 3317 阅读 · 0 评论 -
教你修改JS对“测你的眼睛对色差的辨识度”的Web程序进行作弊
最近翻看微信朋友圈的状态记录,发现好多人都玩过下面这个游戏。 《测测你的眼睛对色差的辨识度》 http://www.webhek.com/color-test而且它们还很自信的拿出来炫,本来我其实不想说什么的。但想到鲁迅的《纪念刘和珍君》,先生我还是说点什么吧。正好又恰逢这几天阿里的“月饼门”事件: 9月12日14:00 听说开始秒杀月饼了,中秋想去一个亲戚家,公司发的月饼送人了,于是想秒一个原创 2016-09-14 16:01:10 · 8481 阅读 · 0 评论 -
JavaScript call 与 apply
转自 http://www.cnblogs.com/huyong/p/4139875.htmlJavaScript中有一个call和apply方法,其作用基本相同,但也有略微的区别。一、方法定义1、call 方法语法: call([thisObj[,arg1[, arg2[, [,.argN]]]]])定义:参数 thisObj 可选项。将被用作当前对象的对象。 arg1, arg2, , argN转载 2017-01-08 15:21:17 · 1186 阅读 · 0 评论 -
JavaScript 消息框
JavaScript 中可以创建三种类型的“消息框”:警告框(alert) 警告框经常用于确保用户可以得到某些信息。确认框(confirm) 确认框用于使用户可以验证或者接受某些信息。如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。提示框(prompt) 提示框经常用于提示用户在进入页面前输入某个值。如果用户点击确认,那么返回值为输入的值。如果用户点原创 2017-01-04 15:09:30 · 1279 阅读 · 0 评论 -
JavaScript 使用 requestAnimationFrame 代替 setInterval
转自 http://www.cnblogs.com/2050/p/3871517.html用js来实现动画,我们一般是借助setTimeout或setInterval这两个函数,css3动画出来后,我们又可以使用css3来实现动画了,而且性能和流畅度也得到了很大的提升。但是css3动画还是有不少局限性,比如不是所有属性都能参与动画、动画缓动效果太少、无法完全控制动画过程等等。所以有的时候我们还是不得转载 2017-01-30 21:53:08 · 4849 阅读 · 0 评论 -
JavaScript Math
执行数学任务。Math 对象的属性E 返回算术常量 e,即自然对数的底数(约等于2.718)。LN2 返回 2 的自然对数(约等于0.693)。LN10 返回 10 的自然对数(约等于2.302)。LOG2E 返回以 2 为底的 e 的对数(约等于 1.414原创 2016-12-22 14:18:08 · 1294 阅读 · 0 评论 -
JavaScript document.write 与 document.writeln 的区别
document.write() 和 document.writeln 都是JavaScript向客户端写入的方法,writeln是以行方式输出的,但并不是指页面实际效果中的换行,两种方法在查看源代码时才看得出区别,除非是输出到pre或code(xmp也可以,但HTML4.0 已经废除xmp,使用pre或code替代)元素内 。writeln 只是在字符串后面添加上“\r\n”,它并不会在网页显示原创 2017-01-29 22:38:50 · 15243 阅读 · 0 评论 -
JavaScript media queries
译自 MDN https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries Note: This is an experimental technology Because this technology’s specification has not stabilized, che翻译 2017-02-14 09:54:57 · 1212 阅读 · 0 评论 -
JavaScript 鼠标事件
JavaScript 鼠标事件有以下8种mousedown 鼠标的键钮被按下。mouseup 鼠标的键钮释放弹起。click 鼠标左键(或中键)被单击。 事件触发顺序是:mousedown -> mouseup -> clickdblclick。 鼠标左键(或中键)被双击。 事件触发顺序是:mousedown -> mouseup -> click -> mousedown ->原创 2016-12-14 17:10:45 · 1428 阅读 · 0 评论 -
JavaScript Array
数组对象用来在单独的变量名中存储一系列的值。在JavaScript中我们有且仅能使用关键词 new 来创建数组对象。一、仅有以下2种方式来创建数组(1)先声明数组后赋值。var myArray = new Array();myArray[0] = 'China';myArray[1] = 'America';myArray[2] = 'Japan';//输出 [ 'China', 'Amer原创 2016-09-15 11:27:04 · 1518 阅读 · 0 评论