分类：JS

2020
10-09

JS实现炫酷雪花飘落效果

JS实现炫酷雪花飘落效果 用js实现漂亮的雪花飘过效果：步骤：页面基本样式，雪花旋转动画效果body{width:100vw;height:100vh;background-color:#000;overflow:hidden;user-select:none;-webkit-user-select:none;}.snowAnimation{animation:snow5sinfinitelinear;-webkit-animation:snow5sinfinitelinear;}@keyframessnow{0%{transform:rotate(0);}100%{transform:rotate(360deg);}}@-webkit-keyframessnow{0%{trans... 继续阅读 >
2020
10-09

javascript实现雪花飘落效果

javascript实现雪花飘落效果 圣诞节快到了相信许多公司的前端都在会收到一个需求，那就是做一个关于圣诞节的专题，而这个专题为了应对圣诞节这个主题都会加上雪花飘呀飘这个小动画，当然我们公司也不例外，下面就是本人用js写的一小段雪花秀啦：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"... 继续阅读 >
2020
10-09

JavaScript中交换值的10种方法总结

前言在开发过程中又是我们需要对值进行交换。一般我们都在用一种简单的解决方案：“临时变量”。不过还有更好的办法，而且不只有一个，有很多。有时我们在网上搜寻解决方案，找到后复制粘贴，但是从没想过这小段代码是怎样工作的。现在我们该学习一下应该怎样轻松高效地交换值了。1使用临时变量先是最简单的一种。functionswapWithTemp(num1,num2){console.log(num1,num2)vartemp=num1;num1=num2;num2=temp;console.... 继续阅读 >
2020
10-09

纯js+css实现在线时钟

纯js+css实现在线时钟 本文实例为大家分享了js+css实现在线时钟的具体代码，供大家参考，具体内容如下<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>时钟</title><styletype="text/css">*{padding:0;margin:0;}.wrap{position:absolute;width:200px;height:200px;border:2pxsolid;background-color:pink;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);}.wrap>ul{list-style:none;... 继续阅读 >
2020
10-09

js实现3D旋转效果

js实现3D旋转效果 本文实例为大家分享了js实现3D旋转效果的具体代码，供大家参考，具体内容如下实现效果：实现过程：步骤一：先写一个简单的html结构,创建一个box盒子,里面放对应的图片(也可以用js创建图片,这里为了好理解,我们直接用html创建).<body><divclass="box"><imgsrc="./img/1.jpg"alt=""><imgsrc="./img/2.jpg"alt=""><imgsrc="./img/3.jpg"alt=""><imgsrc="./img/4.jpg"alt=""><imgsrc="./img/5.jpg"alt=""><imgsrc=".... 继续阅读 >
2020
10-09

js实现简单扫雷

js实现简单扫雷 本文实例为大家分享了js实现简单扫雷的具体代码，供大家参考，具体内容如下实现效果：总体思想：这个扫雷难点主要就两点：第一点就是雷的随机分布，我这里使用js动态生成了10X10的table表格，然后设定生成20个雷，然后在生成每个格子代表的数字，雷我们用9表示，因为0-8要被其他非雷格子使用，然后我们只要一格是雷区那么周围的格子都加一，这样我们的雷区就生成好了，然后玩法的编写主要难点就是在当点击数字为0时的格子时要把它... 继续阅读 >
2020
10-09

javascript实现扫雷简易版

javascript实现扫雷简易版 本文实例为大家分享了javascript实现扫雷简易版的具体代码，供大家参考，具体内容如下使用截图说明这个完成的建议版本，所以没有插旗子，没有计时，就是最基本的原理实现，熟练的大佬30min就能完成代码讲解初始数据varMAPSIZE=10;varBOMBNUM=1;varBOMBPOSITION={};varSQUAERPOSITION={};varSQUARECHECK={};varend=false;初始化地图(CreateMap())用BOMBPOSITION这个hash表记录雷的位置，然后生成地图长*地图... 继续阅读 >
2020
10-09

javascript实现贪吃蛇游戏（娱乐版）

javascript实现贪吃蛇游戏（娱乐版） 本文实例为大家分享了javascript实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下一共三个对象map，snake，food，代表的含义如名字。snake和food其实就是数组，表示位置，map来画图、判断得分、失败等等，直接上代码，可直接运行。<!doctypehtml><html><body><canvasid="map"width="400"height="400"style="background:Black"></canvas><h1>Score:</h1><h2id="score">0</h2><script>//地图functionMap(){this.f... 继续阅读 >
2020
10-09

js实现幻灯片轮播图

本文实例为大家分享了js实现幻灯片轮播图的具体代码，供大家参考，具体内容如下1.html选取了五张图片放入div中，然后是左右箭头，以及按钮，代码如下<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>轮播图</title><linkhref="../css/轮播图.css"rel="stylesheet"></head><body><divid="box"><imgsrc="../image/car-1.jpg"><imgsrc="../image/car-2.jpg"><imgsrc="../image/car-3.jpg"><imgsrc... 继续阅读 >
2020
10-09

解决vue单页面应用进入页面加载所有 js 的问题

一般在index.js中都是这么引入的组件importfrom'@/pages/my'importCartfrom'@/pages/cart'importOrderfrom'@/pages/order'importTMapfrom'@/pages/map'importNewfrom'@/pages/new'换成这样就好啦constMy=r=>require.ensure([],()=>r(require('@/pages/my')),'my')constCart=r=>require.ensure([],()=>r(require('@/pages/cart')),'cart')constOrder=r=>require.ensure([],()=>r(require('... 继续阅读 >
2020
10-09

JavaScript中while循环的基础使用教程

前言在JavaScript语言中，当我们使用while循环时，只要指定条件为true，循环就可以一直执行。并且只要条件一直满足，就可以实现一个无限循环，例如：while(true){console.log("1");}执行这个循环，就会无止境的输出1。while语法及其使用语法如下所示：while(condition){//要执行的代码块}condition是循环的条件，只有当循环条件成立时，才会执行花括号{}中的代码，如果条件不成立则不会执行代码。示例：使用while循... 继续阅读 >
2020
10-09

js实现计算器功能

js实现计算器功能 本文实例为大家分享了js实现计算器功能的具体代码，供大家参考，具体内容如下知识点eval()函数可计算某个字符串，并执行其中的的JavaScript代码。代码如下<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>js计算器</title><linkhref="../css/计算器.css"rel="stylesheet"></head><body><h1class="h1">计算器</h1><divclass="box"><formname="calculator"><inputtype="button"id="clear"cl... 继续阅读 >
2020
10-09

js实现盒子拖拽动画效果

js实现盒子拖拽动画效果 本文实例为大家分享了js实现盒子拖拽动画的具体代码，供大家参考，具体内容如下<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>Document</title><scriptsrc="jquery.js"></script><style>*{margin:0;padding:0;}.wrap{width:400px;height:200px;border:1pxsolid#ccc;border-right-color:red;position:absolute;top:50%;left:50%;margin-left:-200px;margin-t... 继续阅读 >