分类：js

2021
08-22

原生JS实现飞机大战小游戏

原生JS实现飞机大战小游戏 本文实例为大家分享了JS实现飞机大战小游戏的具体代码，供大家参考，具体内容如下<html><head><title>飞机大战</title><styletype="text/css">*{margin:0;padding:0;font-family:"Microsoftyahei"}body{overflow:hidden;;}</style></head><body><script>window.onload=function(){Game.exe();};varGame={//启动程序exe:function(){document.body.style.background='#fff';varoDiv=do... 继续阅读 >
2021
08-20

JavaScript如何优化逻辑判断代码详解

前言我们日常使用到的逻辑判断语句有if...else...、switch...case...、do...while...等。在简单场景下，我们可能对这些语法的性能没有什么感觉，但当遇到复杂的业务场景时，如果处理不善，就会出现大量的逻辑嵌套，可读性差并且难以扩展。千里之行始于足下，编写高可维护性和高质量的代码，我们就需要从细节处入手，我们今天主要讨论JavaScript中如何优化逻辑判断代码。嵌套层级优化functionsupply(fruit,quantity){cons... 继续阅读 >
2021
08-11

手动实现js短信验证码输入框

前言本文记录一下自己手动实现的一个前端常见的短信验证码输入组件，从需求到实现逐步优化的过程。正文1.需求分析首先看一下效果图。 首先页面加载的时候，输入框获取焦点，当用户输入一个数字后，焦点自动跳转到第二个框，当四个框全部输入后，模拟发送提交请求，这里用一个弹框提示，输出输入的验证码内容。主流程之外的需求:输入框内只能输入数字类型，不能输入字母，若强制输入非数字类型按下撤回键时候... 继续阅读 >
2021
08-08

浅谈JS三座大山之异步和单线程

目录单线程异步单线程但是我们在开发中，遇到请求网络，或者定时任务的时候，如果等待网络请求结束或者定时任务结束的时候再去做其他事情，这样页面就会卡住，所以js有异步机制解决这个问题。异步异步的特点是不会阻塞后面的代码执行，当同步任务执行完毕之后，再执行异步任务。相对的，同步会阻止代码执行。异步任务的应用主要有网络请求和定时任务。异步是通过callback的方式实现的，在callback里面执行异步执行的代码，但是有一... 继续阅读 >
2021
08-08

浅谈JS的原型和原型链

目录1.原型prototype2.原型指针：__proto__总结1.原型prototypejavascript中所有函数都具有这个属性，所有具有prototype属性的对象都是一个函数。prototype的作用是向对象添加一个方法/属性。functionpersion(){}persion.prototype.name="xiaoming"console.log(persion.prototype)//{name:"xiaoming",constructor:ƒ}2.原型指针：__proto__如果将上面persion函数生成一个实例对象Persion1，用prototype为他添加一个属性... 继续阅读 >
2021
08-06

js实现自动锁屏功能

1.使用场景有这么一个需求，开发了一套系统，当用户离开桌面或者一段时间不操作的话，需要把该系统所有打开页面锁定起来，就跟桌面锁屏一样，只能输入密码验证成功后，或者重新登录，才可以继续操作页面，如果刷新页面，也要保持锁定。就像下图一样。当然用户也可以手动触发锁屏。目的是防止他人随意操作系统的重要内容。那么该如何去实现呢？5s锁屏效果如下：2.思路首先需要一个变量isLock表示页面是否锁定。由于多个页面需要... 继续阅读 >
2021
07-31

js 可选链操作符的使用

前言可选链操作符(?.)允许读取位于链接对象链身处的属性的值,而不必明确验证链中的每个引用是否有效。不同之处在于，在引用为空（null或者undefined）的情况下不会引起错误，该表达式短路返回值是undefined。与函数调用一起使用时，如果给定的函数不存在，则返回undefined。当尝试访问可能不存在的对象属性时，可选链操作符将会使表达式根更短、更简明。在探索一个对象的内容时，如果不能确定哪些属性必定存在，可选链操作符也... 继续阅读 >
2021
07-26

原生js实现简单贪吃蛇小游戏

原生js实现简单贪吃蛇小游戏 本文实例为大家分享了js实现贪吃蛇小游戏的具体代码，供大家参考，具体内容如下先上图话不多说，代码奉上，喜欢的请留下你的小星星♥(ˆ◡ˆԅ)<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title></title><style>*{... 继续阅读 >
2021
07-22

JS实现jQuery的append功能

目录ShowMeTheCode测试下效果效果PS另一种方法ShowMeTheCodeHTMLElement.prototype.appendHTML=function(html){letdivTemp=document.createElement("div");letnodes=null;letfragment=document.createDocumentFragment();divTemp.innerHTML=html;nodes=divTemp.childNodes;nodes.forEach(item=>{fragment.appendChild(item.cloneNode(true));})//插入到最后appendthis.appendChild(fragment)... 继续阅读 >
2021
07-22

js实现多张图片打包成zip

目录1、引入文件2、html页面3、主要代码4、优化图片转base64的流程，提高zip的打包速度5、再优化，通过axios把图片转成base641、引入文件<scriptsrc="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script><scriptsrc="https://cdn.bootcdn.net/ajax/libs/jszip/3.6.0/jszip.min.js"></script><scriptsrc="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>2、html页面<b... 继续阅读 >
2021
07-21

JS实现简单打砖块弹球小游戏

JS实现简单打砖块弹球小游戏 本文实例为大家分享了JS实现打砖块弹球小游戏的具体代码，供大家参考，具体内容如下使用原生JS写的，还有一点瑕疵。代码直接复制到html就能使用速度随机的因为设涉及横向和纵向速度，所以显示的小球速度值是他们的和速度（立方和开根号）。按回车或者在滑块上单机左键开始游戏。鼠标滑动或者键盘A（左）或者D（右）控制滑块方向接小球。这个小demo的意义主要为了锻炼逻辑能力：<!DOCTYPEhtml><html><head><metacharset="UTF-8"... 继续阅读 >
2021
07-17

JavaScript使用promise处理多重复请求

一、为什么要写这个文章？处理重复请求的文章想必大家也看过了很多，大多数都是分为在response返回之前发现重复请求就return掉的和使用节流/防抖来间接规避用户频繁操作两种版本的。最近在使用的过程的中，发现这两个版本在某些场景下还是有些局限性。二、问题场景如图，我这个h5的页面，顶部和底部都要显示这个名片组件。这些名片的信息是通过一个接口来获取的，当这个组件在当前页面被初始化时，就会发生两次重复的请求。这时会... 继续阅读 >
2021
07-12

js Proxy的原理详解

目录什么是代理模式引入一个现实生活中的案例结合案例理解代理模式的定义什么是Proxyget(target,propKey,receiver)set(target,propKey,value,receiver)总结什么是代理模式引入一个现实生活中的案例我们作为用户需要去如何评估一个房子的好坏、如何办理住房手续等一些列繁琐的事物吗？显然，用户肯定不愿意这样做。用户最关心的是结果，用户对房子提出需求以及提供对等价值的金钱就可以获得满意的房子，这就是结果。那么谁为用... 继续阅读 >
2021
07-12

解析原生JS getComputedStyle

目录getComputedStyle与getPropertyValueIE下的currentStyle与getAttributestyle与getComputedStylegetComputedStyle与defaultView原生JS实现CSS样式的get与setgetStyle(elem,style)opacity透明度的设定float样式的获取width|height样式的获取获取样式的驼峰表示法setStyle(elem,style,value)getComputedStyle与getPropertyValuegetComputedStyle为何物呢，DOM中getComputedStyle方法可用来获取元素中所有可用的... 继续阅读 >
2021
07-12

如何计算Web动画帧率FPS

目录流畅动画的标准法一：借助Chrome开发者工具法二：借助FrameTimingAPIBlink内核早期架构JS动画与CSS动画的细微区别什么是FrameTimingAPI？FrameTimingAPI示意法三：借助requestAnimationFrameAPI使用requestAnimationFrame计算FPS原理流畅动画的标准首先，理清一些概念。FPS表示的是每秒钟画面更新次数。我们平时所看到的连续画面都是由一幅幅静止画面组成的，每幅画面称为一帧，FPS是描述“帧”变化速... 继续阅读 >
2021
07-09

详解前端安全之JavaScript防http劫持与XSS

目录HTTP劫持、DNS劫持与XSSHTTP劫持DNS劫持XSS跨站脚本页面被嵌入iframe中，重定向iframe使用白名单放行正常iframe嵌套更改URL参数绕过运营商标记内联事件及内联脚本拦截浏览器事件模型静态脚本拦截使用白名单对src进行匹配过滤动态脚本拦截MutationEvents与DOMNodeInserted重写setAttribute与document.write重写原生Element.prototype.setAttribute方法重写嵌套iframe内的Element.prototype.setAttribute重... 继续阅读 >