分类：JS

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

JavaScript实现简易tab栏切换内容栏

JavaScript实现简易tab栏切换内容栏 本文实例为大家分享了JavaScript实现简易tab栏切换内容栏的具体代码，供大家参考，具体内容如下html+css部分<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><style>/*初始化css，因为有默认边距*{margin:0;padding:0;... 继续阅读 >
2021
07-04

原生js封装无缝轮播功能

原生js封装无缝轮播功能 原生js封装无缝轮播插件，供大家参考，具体内容如下说明：这是一个使用原生js、es5语法写出的无缝轮播程序，代码中对相关api进行了封装，使得在引入该轮播js文件后，只需要在自己的js文件中添加两行代码即可在网页中实现一个基本的无缝轮播图效果。基本使用步骤为：获取dom元素数组、向轮播对象中传参、轮播对象调用自动轮播方法。除基本的定时器自动轮播功能外，该程序还支持设置过渡动画时间、设置鼠标移入元素自动轮播停止、设... 继续阅读 >
2021
07-04

JavaScript实现可拖拽的进度条

JavaScript实现可拖拽的进度条 本文实例为大家分享了JavaScript实现可拖拽的进度条的具体代码，供大家参考，具体内容如下一.进度条实现<html><head><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1"><metacharset="UTF-8"><title>可拖拽进度条</title><style>body{margin:50px;;}.box{width:49%;hegiht:3rem;line-height:3rem;float:left;}.boxDesc{width:50%... 继续阅读 >
2021
07-04

js给图片打马赛克的方法示例

js给图片打马赛克的方法示例 本文主要主要介绍了js给图片打马赛克的方法示例，分享给大家，具体如下：效果演示Canvas简介这个HTML元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图API展现给客户端JavaScript以使脚本能够把想绘制的东西都绘制到一块画布上。HTML5标签用于绘制图像（通过脚本，通常是JavaScript）不过，元素本身并没有绘制能力（它仅仅是图形的容器）-您必须使用脚本来完成实际的绘图任务getContext()方法可返回... 继续阅读 >
2021
07-02

JS如何使用剪贴板操作Clipboard API

目录一、Document.execCommand()方法（1）复制操作（2）粘贴操作（3）缺点二、异步ClipboardAPI三、Clipboard对象3.1Clipboard.readText()3.2Clipboard.read()3.3Clipboard.writeText()3.4Clipboard.write()四、copy事件，cut事件五、paste事件一、Document.execCommand()方法Document.execCommand()是操作剪贴板的传统方法，各种浏览器都支持。它支持复制、剪切和粘贴这三个操作。document.execCommand('copy')（... 继续阅读 >
2021
07-02

如何用JS追踪用户

目录一、同步AJAX二、异步AJAX三、追踪用户点击四、反弹追踪五、BeaconAPI六、ping属性一、同步AJAX数据发回服务器的常见做法是，将收集好的用户数据，放在unload事件里面，用AJAX请求发回服务器。但是，异步AJAX在unload事件里面不一定能成功，因为网页已经处于卸载中，浏览器可能发送，也可能不发送。所以，要改成同步AJAX请求。window.addEventListener('unload',function(event){letxhr=newXMLHttpRequest... 继续阅读 >
2021
07-01

如何理解JS函数防抖和函数节流

目录概述1.函数防抖（debounce）2.函数节流（throttle）概述函数防抖和函数节流都是定义一个函数，该函数接收一个函数作为参数，并返回一个添加了防抖或节流功能后的函数。因此可以将函数防抖和函数节流看作是一个函数工厂，负责对传进来的函数进行相应的加工改造，然后产出一个新的带有某种功能的函数。函数防抖是某一时间内只执行一次，而函数节流是间隔时间执行假如有这样一个场景：在某一页面，有一个按钮是"加载更多"，这... 继续阅读 >