分类：JS

2020
09-30

JS实现前端路由功能示例【原生路由】

本文实例讲述了JS实现前端路由功能。分享给大家供大家参考，具体如下：路由就是根据不同的url地址展示不同的内容或页面，早期路由的概念是在后端出现的，通过服务器端渲染后返回页面，随着页面越来越复杂，服务器端压力越来越大。后来ajax异步刷新的出现使得前端也可以对url进行管理，此时，前端路由就出现了。单页面就是有前端路由来实现的，也就是说网站只有一个页面，点击导航会显示不同的内容，对应的url也在发生改变。在这... 继续阅读 >
2020
09-30

如何使用Javascript中的this关键字

一、基本的：functiondoSomething(){alert(this.id);}alert(window.doSomething);//证明了doSomething是属于window的doSomething();//undefinedwindow.onload=function(){document.getElementById("div2").onclick=doSomething;//div2document.getElementById("div3").onclick=function(){doSomething();}//undefined}1、对于doSomething这个函数：functiondoSomething(){alert(this.id);}这个函数是全局函数，这种全局函... 继续阅读 >
2020
09-30

如何使用JavaScript检测空闲的浏览器选项卡

如何使用JavaScript检测空闲的浏览器选项卡 在某些情况下，当用户与我们的最终产品或应用程序进行交互时，我们发现自己会执行许多密集的，占用大量CPU的任务。启动轮询器，建立WebSocket连接，甚至加载视频或图片等媒体，都有可能成为性能障碍，尤其是当这些任务在不需要的情况下消耗资源的时候。在用户没有主动与界面交互的同时，从不必要的工作负载或网络请求中释放主线程是一个非常好的和有意义的实践。换一种方式，在大多数主机提供商都在引入基于配额的定价模式的行业中... 继续阅读 >
2020
09-30

js实现轮播图特效

本文实例为大家分享了js实现轮播图特效的具体代码，供大家参考，具体内容如下只需要修改图片的src即可html:<body><divid="rollImgBox"><divclass="photosclearfix"><!--轮播图里面首位多放最后一张与第一张图片，以便顺畅平滑切换--><divclass="move"><imgsrc="img/timg%20(7).jpg"alt=""></div><divclass="move"><imgsrc="img/timg%20(4).jpg"alt=""></div><divclass="move"><imgsrc="img/timg%20(5).jpg"a... 继续阅读 >
2020
09-30

JS写滑稽笑脸运动效果

JS写滑稽笑脸运动效果 效果演示：（就这玩意儿，差点写崩了...）代码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>滑稽笑脸运动</title><metaname="author"content="marinerzp"><style>*{padding:0;margin:0;}html,body{width:100%;height:100%;}#main{width:100px;height:100px;border-radius:50%;background:url(images/1.jpg)00/100px100px;... 继续阅读 >
2020
09-30

纯JS实现五子棋游戏

纯JS实现五子棋游戏 本文实例为大家分享了JS实现五子棋游戏的具体代码，供大家参考，具体内容如下基本实现方式是表格，当时想用黑白圆棋代替的，但是尺寸没调好，就先上黑白底色了说一下实现思路，刚开始是想每次落子的时候都把整个棋盘上的子遍历一遍，然后判断四个方向(横,竖,左斜,右斜)上的点数是不是想加等于5，做到一半的时候感觉这种效率太低了，也没必要,，然后就在每次落子之后判断它四个方向相加是不是等于5(不算落子本身)，这是各个方向的最... 继续阅读 >
2020
09-30

js实现简单五子棋游戏

js实现简单五子棋游戏 本文实例为大家分享了js实现五子棋游戏的具体代码，供大家参考，具体内容如下html<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>五子棋</title><linkrel="stylesheet"href="css/style.css"/></head><body><canvasid="chess"width="450px"height="450px"></canvas><scripttype="text/javascript"src="js/script.js"></script></body></html>csscanvas{display:block;margin:50pxauto;box-sha... 继续阅读 >
2020
09-30

js实现九宫格布局效果

js实现九宫格布局效果 本文实例为大家分享了js实现九宫格布局效果的具体代码，供大家参考，具体内容如下效果代码如下：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><styletype="text/css">*{margin:0;padding:0;}#container{width:1200px;margin:0auto;}#top{padding:20px;}#bottom{position:relative;}.box{//每一个小块width:220px;height:360px;margin:015px15... 继续阅读 >
2020
09-30

JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)

我们在编写JS代码时，经常会遇到逻辑判断复杂的情况。一般情况下，可以用if/else或switch来实现多个条件判断，但会出现一个问题：随着逻辑复杂度的增加，代码中的if/else和switch会越来越臃肿。本文将带你尝试写出更优雅的判断逻辑。比如说下面这样一段代码：constonButtonClick=(status)=>{if(status==1){sendLog('processing')jumpTo('IndexPage')}elseif(status==2){sendLog('fail')jumpTo('Fai... 继续阅读 >
2020
09-30

JS字符串补全方法padStart()和padEnd()

这个方法无意中看到的，感觉还是蛮实用的，特此分享一波。我想大家都会有遇到将时间戳转换成时间格式的时候，时间或日期不足2位的前面补0。有了今天说的这个东西，就又可以少写几行代码了，大家在项目中遇到类似场景可以去使用感受下。ES2017引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()padEnd()方法用另一个字符串填充当前字符串(如果需要的话则重复填充)，返回填充后达到指定长... 继续阅读 >
2020
09-30

Js生成随机数/随机字符串的方法小结【5种方法】

本文实例讲述了Js生成随机数/随机字符串的方法。分享给大家供大家参考，具体如下：第一种：使用randomString，e表示长度，默认32位functionrandomString(e){e=e||32;vart="ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678",a=t.length,n="";for(i=0;i<e;i++)n+=t.charAt(Math.floor(Math.random()*a));returnn}alert(randomString(6));第二种：生成随机数//本例子代表生成100000-9999... 继续阅读 >
2020
09-30

JS箭头函数和常规函数之间的区别实例分析【 5 个区别】

本文实例讲述了JS箭头函数和常规函数之间的区别。分享给大家供大家参考，具体如下：在JavaScript中，你可以通过多种方式去定义函数。第一种常用的方法是使用关键字function：//函数声明functiongreet(who){return`Hello,${who}!`;}//函数表达式constgreet=function(who){return`Hello,${who}`;}代码中的函数声明和函数表达式被称为“常规函数”。从ES2015开始，第二种可用的方法是箭头函数语法：constgreet... 继续阅读 >
2020
09-30

php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】

本文实例讲述了php+js实现的拖动滑块验证码验证表单操作。分享给大家供大家参考，具体如下：现在很多网站，比如淘宝，京东等都改用使用极验拖动验证码实现登录，这种方式比传统的验证码方式有更好的体验，减少用户输入的错误，也同样能起到防盗刷的功能。现在很多极验都是第三方的，也很多都是收费的。今天在这里给大家分享自己用原生php实现的一个极验的代码。用原生php的好处就是以后你要嵌套到什么框架，可以直接用核心代码，改... 继续阅读 >
2020
09-29

JSONP解决JS跨域问题的实现

JSONP解决JS跨域问题的实现 现代编程中前后端都已经是分开部署了，前端有自己的域，后端也有自己的域。由于浏览器同源策略的限制，非同源下的请求，就会产生跨域问题。解决跨域问题的方法有很多种，例如CORS(crossorignresourcesshare)和JSONP。这里我就着重介绍一下jsonp的解决方案。一：基础概念同源策略：同一协议，同一域名，同一端口号。只要不满足三者其中一种都是属于跨域问题。举几个简单的例子1:https://www.a.com:8080到http://www.a.com:8080... 继续阅读 >
2020
09-29

JS实现时间校验的代码

JS实现时间校验的代码 常用于活动时间结束弹窗提示注意：1.只是JS校验时间提示，并不安全2.前台页面的时间校验不影响后台，所以，当用户修改本地计算机时间时，可能存在不安全因素1、直接看代码varmydate=newDate();vardate=myDate();functionactiveData(){if(!isDateBetween(date,'2018/01/30','2018/03/31')){//在有效时间，对应处理逻辑}else{//不在有效时间，对应处理逻辑}}functiondateParse(dateString){varSEPARA... 继续阅读 >