分类：JS

2020
09-29

js 动态校验开始结束时间的实现代码

很多时候要动态校验开始结束时间，每次都要写一次，太麻烦，以备后面拷贝使用，代码作用简介：开始结束时间，联动，开始时间前后移动，对应结束时间相应变化，时间差30天html：<inputtype="date"placeholder="请输入(From)..."id="txtStartDate"value="${startDate}"onblur="onblurStartDate();"/><inputtype="date"placeholder="请输入(To)..."id="txtEndDate"value="${endDate}"onblur="onblurEndDate();"/>js:<sc... 继续阅读 >
2020
09-29

JS变量提升原理与用法实例浅析

本文实例讲述了JS变量提升。分享给大家供大家参考，具体如下：该篇介绍什么是变量提升,写给像我一样的JS新手看的简单来说变量提升就是JS会把var变量的声明自动提升到作用域的顶部,即使你不想这样一个例子:(局部变量与全局变量同名时,局部变量覆盖全局变量)vara="全局变量";functiontest(){document.writeln(a);vara="局部变量";document.writeln(a);}test();上例的两个输出结果是undefined局部变量第一个输出并没有输... 继续阅读 >
2020
09-29

js事件机制----捕获与冒泡机制实例分析

本文实例讲述了js事件机制----捕获与冒泡机制。分享给大家供大家参考，具体如下：先从事件绑定机制说起,事件绑定机制通过绑定方法addEventListener()实现,语法格式如下:element.addEventListener(event,function,useCapture)参数值参数描述event必须。字符串，指定事件名。注意: 不要使用"on"前缀。例如，使用"click",而不是使用"onclick"。 提... 继续阅读 >
2020
09-29

JavaScript实现HSL拾色器

JavaScript实现HSL拾色器 HSL和HSV在数学上定义为在RGB空间中的颜色的R,G和B的坐标的变换。从RGB到HSL或HSV的转换设(r,g,b)分别是一个颜色的红、绿和蓝坐标，它们的值是在0到1之间的实数。设max等价于r,g和b中的最大者。设min等于这些值中的最小者。要找到在HSL空间中的(h,s,l)值，这里的h∈[0,360）是角度的色相角，而s,l∈[0,1]是饱和度和亮度，计算为：h的值通常规范化到位于0到360°之间。而h=... 继续阅读 >
2020
09-29

JS实现图片幻灯片效果代码实例

其效果是点击图片切换到下一张图片首先准备五张图片<ulclass="imge"><li><imgsrc="images/1.jpg"width="400px"height="300px"/></li><li><imgsrc="images/2.jpg"width="400px"height="300px"/></li><li><imgsrc="images/3.jpg"width="400px"height="300px"/></li><li><imgsrc="images/4.jpg"width="400px"height="300px"/></li><li><imgsrc="images/5.jpg"width="400px"height="300px"/></li></ul>样... 继续阅读 >
2020
09-29

JavaScript实现猜数字游戏

JavaScript实现猜数字游戏 本博文源于js基础，旨在讨论如何实现猜随机数的小游戏。题目重现随机生成一个[0,100]区间的数字，不断重复用户输入，直到用户输入对为止。实现原理先用Math.random生成一个数字，欲得到[a,b]区间的随机整数，可采用以下公式：parseInt(Math.random()*(b-a+1))+a;举个例子：得到[3,8]parseInt(Math.random()*6)+3;然后循环里，多分支if判断一下，给用户提示一下测试用例玩的时候用二分法玩，二分法就是一次砍一半，比如先上来猜50，... 继续阅读 >
2020
09-29

通过js随机函数Math.random实现乱序

通过js随机函数Math.random实现乱序 乱序的意思想必没有不知道：就是将数组打乱。听到乱序一般都会想到js的随机函数Math.random();varvalues=[1,2,3,4,5];values.sort(function(){returnMath.random()-0.5;});console.log(values)利用数组的sort方法，判断随机出来的0~1值与0.5的大小，实现排序。看似一个很不错的方案，代码逻辑也没毛病，一般情况下也确实能够做到乱序。但是，这是一个伪排序，是的还有但是（我也是今天才知道的，不求甚解的毛病啊~）... 继续阅读 >
2020
09-29

JS array数组检测方式解析

typeofvararr=[1,2,3];console.log(typeofarr);//'object'数组的本质是一种特殊的对象，所以返回'object'。typeof运算符只能用来区分原始类型和对象类型,所以无法具体的检测出Arrayinstanceofvararr=[1,2,3];console.log(arrinstanceofArray);//true如果存在不同的全局环境，就会存在不同版本的Array构造函数，如果从一个框架向另一个框架传入一个数组，那么传入的数组与在第二个框架中原生创建的数组分别具有各自不同的... 继续阅读 >
2020
09-29

基于JS实现table导出Excel并保留样式

基于JS实现table导出Excel并保留样式 浏览器环境：谷歌浏览器1.在导出Excel的时候，保存table的样式，有2种方法，①是在table的行内写style样式，②是在模板里面添加样式2.第一种方式：行内添加样式<td>公司一</td>效果：完整代码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>tabletd{font-size:12px;width:200px;height:30px;text-align:center;background-color:#4f89... 继续阅读 >
2020
09-29

JS加载解析Markdown文档过程详解

JS加载解析Markdown文档过程详解 网上有很多网站会通过.md文档来做页面内容，很好奇，这是怎么做的？出于好奇，建了一个test.md文件：#HelloWorld!asdfaasd*斜体文本***粗体文本*****斜粗体文本***分隔线（如下）**********--------------GOOGLE.COM~~删除线~~<u>下划线</u>用浏览器打开之后，结果就被原封不动的输出来了，浏览器根本不会解析这玩意...跟阮老师的blog相差好大啊~呵呵~还是太天真了！然后，发现：原来markdown文本还是需要用marked... 继续阅读 >
2020
09-29

JS使用for in有序获取对象数据

JS使用for in有序获取对象数据 需要遍历对象，将keyvalue分为两个数组，可以使用forin，但是获取到的对象中的属性及属性值排列是无序的，目的是要按顺序取出对象中的key和value值。实现效果：比如接口返回的对象格式：需要转换的格式：实现代码：//按序输出数据for(letiinres.data.allMap){this.mapTime.push(i);}this.mapTime.sort();this.mapTime.map((item)=>{this.mapValue.push(res.data.allMap[item])})实现思想：还是先使用forin取出对象中的所有... 继续阅读 >
2020
09-29

基于js实现数组相邻元素上移下移

实现效果：即需要实现当前元素与相邻元素交换位置，当上移时，则是当前元素与上一元素调换位置；当下移时，则是当前元素与下一元素调换位置。实现代码：js://点击上移clickUp(index){this.swapArray(this.tableData,index-1,index);},//点击下移clickDown(index){this.swapArray(this.tableData,index,index+1);},//数组元素互换位置swapArray(arr,index1,index2){arr[index1]=arr.splice(index2,1,arr[index1])[0];... 继续阅读 >
2020
09-29

JavaScript实现简单的弹窗效果

本文实例为大家分享了JavaScript实现弹窗效果的具体代码，供大家参考，具体内容如下使用css动画效果实现弹窗缓慢弹出和收回。使用JavaScript实现定时弹出定时收回。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>简单弹窗</title><style>*{margin:0;padding:0;}.pop{width:400px;height:300px;position:fixed;bottom:0;right:0;... 继续阅读 >
2020
09-29

js实现自定义右键菜单

本文实例为大家分享了js实现右键菜单的具体代码，供大家参考，具体内容如下原理：1.屏蔽默认的右键菜单2.点击右键获取位置，让自定义菜单到点击位置上3.点击左键，自定义菜单消失代码如下<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>右键菜单练习</title><style>*{margin:0;/*padding:0;*/}ul{width:120px;height:150px;background-color:rgb(204,204,204);font-size:22px;list... 继续阅读 >
2020
09-29

js抽奖转盘实现方法分析

js抽奖转盘实现方法分析 本文实例讲述了js抽奖转盘实现方法。分享给大家供大家参考，具体如下： HTML 这里.left固定了圆的宽度和高度，还有canvas也设置了固定宽高绘制圆心的坐标也就出来了(203,203)抽奖转盘是由一个大圆和一个内圆完成；大圆负责绘制上奖品，内圆负责确定指针的位置，指针直接使用图片，决定位置确定<divclass="left"><divclass="turnplate"style="background:#1bacff;border-radius:50%"><canvasclass="item"id="... 继续阅读 >
2020
09-29

js实现简单贪吃蛇游戏

js实现简单贪吃蛇游戏 本文实例为大家分享了js实现简单贪吃蛇游戏的具体代码，供大家参考，具体内容如下上下左右键控制方向使贪吃蛇吃葡萄吃5个葡萄，游戏结束时左上角为总得分。运行结果：界面和css代码这里就不加赘述了，主要贴js代码（加了注释）：varconfig={width:20,//一个格子的宽度height:20,//一个格子的高度tr:30,//行数td:30//列数}varsnake=null,//Snake的实例food=null,//Food的实例game=null;//游戏的实例//我... 继续阅读 >