分类：js

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重... 继续阅读 >
2021
07-08

浅谈JS如何写出漂亮的条件表达式

目录多条件语句多属性对象替换Switch语句默认参数与解构匹配所有或部分条件使用可选链和Nullish合并多条件语句多条件语句使用Array.includes举个例子functionprintAnimals(animal){if(animal==="dog"||animal==="cat"){console.log(`Ihavea${animal}`);}}console.log(printAnimals("dog"));//Ihaveadog这种写法在条件比较少的情况下看起来没有问题，此时我们只有2种动物，但是如果我们有更多的条件... 继续阅读 >
2021
07-08

JS实现扫雷项目总结

JS实现扫雷项目总结 本文实例为大家分享了JS实现扫雷项目的总结，供大家参考，具体内容如下项目展示图项目准备一样的，我们先是准备出三个文件夹，以及根目录下的index.html文件然后是两张图片（地雷和旗子）之后是html结构html首先是最外层的游戏内容区域的div取名id为mine<divid="mine"></div>之后是游戏内容区域中最上面的四个按钮，我们用四个button标签来表示，并且用一个div来包裹起来并且给初级按钮一个最初的选中的样式<divclass="leve... 继续阅读 >
2021
07-08

JS实现简单图片轮播效果

JS实现简单图片轮播效果 本文实例为大家分享了JS实现简单图片轮播效果的具体代码，供大家参考，具体内容如下实现效果左右按钮可点击左右移动显示图片进行无缝滚动下面的小圆圈点击可跳到对应的图片索引不进行上述操作时，图片自动轮播html源码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial... 继续阅读 >
2021
07-08

js实现经典扫雷游戏

js实现经典扫雷游戏 本文实例为大家分享了js实现经典扫雷游戏的具体代码，供大家参考，具体内容如下项目结构实现效果思路流程1、写出基本的布局2、利用js生成扫雷的table表格3、利用随机数来做地雷在表格中的索引4、初始化table表格5、根据地雷的坐标生成地雷周围的数字6、点击事件分成鼠标左键点击和右键点击7、左键点击情况下又分为点到的是地雷和非地雷两种情况8、点到的是地雷情况下，则将全部地雷显示，其他样式不变，并且不能再进行任意表格内的... 继续阅读 >
2021
07-06

如何用JS有效的压缩图片

目录前言转化关系具体实现file2DataUrl(file,callback)file2Image(file,callback)url2Image(url,callback)image2Canvas(image)canvas2DataUrl(canvas,quality,type)dataUrl2Image(dataUrl,callback)dataUrl2Blob(dataUrl,type)canvas2Blob(canvas,callback,quality,type)blob2DataUrl(blob,callback)blob2Image(blob,callback)upload(url,file,callback)实现简易图片压缩改进版图片压缩总结前言公司的移动端业务需要... 继续阅读 >
2021
07-04

浅谈如何循序渐进的学好JS

目录概述1.清楚js的定位2.清晰的学习路线3.自律坚持4.多练多写5.从多角度去学习和领悟6.注意培养自信心7.多写学习总结8.构建专属知识导图概述在我们第一阶段完成HTML+CSS的学习之后，很多同学都会被第二阶段JS难倒——JS语法、JS数据类型、JS对象，Js给我们的印象总是那么的“复杂”，因为它相比html来说是动态的，是编程语言，更深奥一些。想要熟练掌握js难度很大，不过如果你把知识点梳理清楚，真正的理解并加以运用，你就可以掌... 继续阅读 >
2021
07-04

js实现模拟购物商城案例

js实现模拟购物商城案例 学习HTML，css和js前端的小伙伴们，这次来分享购物商城案例的实现！准备阶段：准备一些需要放到页面上的图片，小图和其对应的大图，博主这边举例为小图(40x40),大图(321x430)。结构分析：大图区域小图区域整体边框区域效果分析：鼠标放在小图片上大图会对应显示。鼠标放在小图片上面会有对应效果。鼠标移出时小边框对应效果消失。使用css对边框进行设置：对div标签进行设置（对边框属性进行设... 继续阅读 >
2021
07-04

js实现网页计算器

js实现网页计算器 如何在利用HTML，css和js的知识制作一个简单的网页计算器呢？一个计算机中具备了：计算机整体框输入框输入按钮计算机整体框：/*设置div样式*/#showdiv{border:solid1px;border-radius:5px;width:350px;height:400px;text-align:center;margin:auto;/*设置居中*/margin-top:50x;background-color:rgb(214,219,190);}输入框：/*设置输入框样式*/input[type=text]{margi... 继续阅读 >