分类：JS

2020
09-24

原生JS实现贪吃蛇小游戏

本文实例为大家分享了JS实现贪吃蛇小游戏的具体代码，供大家参考，具体内容如下思路：在页面上添加一个地图，以提供边界，在地图中随机出现食物，给蛇身设置一个初始长度，用键盘方向键控制蛇的走向，当蛇触碰到食物时（既坐标重复时），增加蛇身长度，碰到墙壁或自身时，程序停止，游戏结束。HTML结构：<body><divid="map"></div></body>CSS样式：<style>#map{width:600px;height:300px;background:#ccc;border:5p... 继续阅读 >
2020
09-24

JS中的const命令你真懂它吗

const定义const声明一个只读的常量。一旦声明，常量的值就不能改变。常量所谓的常量就是不能改变的值constPI=3.1415;PI//3.1415PI=3;//TypeError:Assignmenttoconstantvariable.上面代码表明改变常量的值会报错。const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。我们都知道const一般声明一个只读的常量，声明之后就不能修改了，并且声明时必须初始化constmessage... 继续阅读 >
2020
09-24

js实现选项卡效果

本文实例为大家分享了js实现选项卡效果的具体代码，供大家参考，具体内容如下<!DOCTYPEhtml><html><head><title></title></head><scripttype="text/javascript">window.onload=function(){varob=document.getElementById('div1');varob1=div1.getElementsByTagName('input');varob2=div1.getElementsByTagName('div');for(vari=0;i<ob1.length;i++){ob1[i].index=i;ob1[i].onmouseover=function(){fo... 继续阅读 >
2020
09-24

基于JS正则表达式实现模板数据动态渲染(实现思路详解)

基于JS正则表达式实现模板数据动态渲染(实现思路详解) 最近业务上需要动态渲染模板数据，好久没写前端代码了，有点生疏，将思路简单写下来，防老：一、业务需求：1.前端后端定义好模板以及变量名，保存数据库2.订单数据是前端根据支付结果获取的，最终渲染完的数据模板需要调用打印机打印出来3.模板相对商家来说比较固定，但是每个商家需要的模板都有可能不一样，所以需要每次登录后，查询一次模板缓存前端，后续每次支付后，动态渲染数据即可二、考点：1.正则表达式2.精简代码量，尽量... 继续阅读 >
2020
09-24

js实现简单放大镜效果

js实现简单放大镜效果 用js实现简单放大镜效果，供大家参考，具体内容如下此处放大镜实现的效果就是当鼠标放置在图片上会有半透明遮罩，图片的一个区域就会被放大，然后展示在右边。当鼠标移动时右边的大图片也会局部移动。这里的放大并不是真正的放大，而是等比例移动。下面是实现的代码：css样式代码如下：<style>.s_box{width:400px;height:300px;position:absolute;left:50px;top:100px;}.s_boximg{width:400px;height:300px;}.s_boxspan{... 继续阅读 >
2020
09-24

js实现文字头像的生成代码

js实现文字头像的生成代码 使用canvas画出文字就好啦functiongen_text_img(size,s){letcolors=["rgb(239,150,26)",'rgb(255,58,201)',"rgb(111,75,255)","rgb(36,174,34)","rgb(80,80,80)"];letcvs=document.createElement("canvas");cvs.setAttribute('width',size[0]);cvs.setAttribute('height',size[1]);letctx=cvs.getContext("2d");ctx.fillStyle=colors[Math.floor(Math.random()*(colors.length))];ctx.fillRect(0,0,... 继续阅读 >
2020
09-24

原生JS实现萤火虫效果

原生JS实现萤火虫效果 本文实例为大家分享了JS实现萤火虫效果的具体代码，供大家参考，具体内容如下上代码之前，先看一下效果：CSS部分（此处用元素模拟萤火虫，背景可自行设置）：<style>.box{width:4px;height:5px;background:wheat;position:absolute;border-radius:50%;}body{background:url(../img/bg.jpg);}</style>JS部分：<script>classGlowworm{constructor(){//获取屏幕的可视区域的宽高，用作将来的随机范围this.clientW=doc... 继续阅读 >
2020
09-24

JavaScript实现轮播图片完整代码

本文实例为大家分享了JavaScript实现轮播图片的具体代码，供大家参考，具体内容如下JS代码注释清晰明了，一看就懂！<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>最简单的轮播效果</title><style>*{margin:0;padding:0}.box{width:500px;height:300px;border:1pxsolid#ccc;margin:100pxauto;padding:5px;}.inner{width:500px;height:300px;position:relative;overfl... 继续阅读 >
2020
09-24

JS实现瀑布流效果

JS实现瀑布流效果 本文实例为大家分享了JS实现瀑布流效果的具体代码，供大家参考，具体内容如下话不多说，直接上代码。如下：CSS部分：<style>.cont{margin:0auto;position:relative;}.box{float:left;padding:4px;}.imgbox{padding:4px;}.imgboximg{width:200px;display:block;border-radius:4px;}</style>HTML部分（图片可自行添加）：<divclass="cont"><divclass="box"><divclass="imgbox"><imgsrc="../img/WaterF2.jpg... 继续阅读 >
2020
09-24

js实现点赞按钮功能的实例代码

js实现点赞按钮功能的实例代码 js实现点赞按钮功能，包括只能点赞一次，超过一次时提示文字（3秒后消失），点击时次数加一（给后端传值在这里解决）。没有按钮加图片，只用了改变颜色来表示首先明确html页面代码<spanid="tixing0"></span><divclass="dianzan_11"><divclass="dianzan_font"><center><spanid="cishu0">18</span></center></div><buttonclass="btn"id="0"onclick=""></button></div>首先我们要知道。在DOM中id是唯一的，这就表明我... 继续阅读 >
2020
09-24

JS实现网页端猜数字小游戏

JS实现网页端猜数字小游戏 本文实例为大家分享了JS实现网页端猜数字游戏的具体代码，供大家参考，具体内容如下题目描述电脑产生一个0到100之间的随机数字，并且要求用户来猜，如果用户猜的数字比这个数字大，电脑会提示“太大”，否则会提示“太小”，当用户正好猜中，电脑会提示“恭喜你猜对了，这个数是…”。在用户每次猜测之后，程序会输出用户第几次猜测。如果用户输入的根本不是一个数字，程序会告诉用户输入无效代码实现<!DOCTYPEhtml><html><head... 继续阅读 >
2020
09-24

js的Object.assign用法示例分析

本文实例讲述了js的Object.assign用法。分享给大家供大家参考，具体如下：作用Object.assign()用于将所有可枚举的自有属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。语法Object.assign(target,…sources)参数：target：目标对象sources：任意多个源对象返回值返回值为合并属性后的目标对象，即target。示例1（属性值是值类型）varobj1={a:1};varobj2={b:2};varobj={};varo=Object.assign(obj,o... 继续阅读 >
2020
09-24

JS数据类型（基本数据类型、引用数据类型）及堆和栈的区别分析

本文实例讲述了JS数据类型（基本数据类型、引用数据类型）及堆和栈的区别。分享给大家供大家参考，具体如下：js数据类型：基本数据类型和引用数据类型（文章最下面会介绍各类型的基础以及注意事项）基本数据类型指的是简单的数据段，引用数据类型指的是有多个值构成的对象当我们把变量赋值给一个变量时，解析器首先要确认的就是这个值是基本类型值还是引用类型值基本数据类型：数字(Number)、字符串（String）、布尔(Boolean)、空... 继续阅读 >
2020
09-24

js回调函数原理与用法案例分析

本文实例讲述了js回调函数原理与用法。分享给大家供大家参考，具体如下：回调函数就是一个通过函数指针调用的函数。如果你把函数的指针（地址）作为参数传递给另一个函数，当这个指针被用来调用其所指向的函数时，我们就说这是回调函数。回调函数不是由该函数的实现方直接调用，而是在特定的事件或条件发生时由另外的一方调用的，用于对该事件或条件进行响应。函数指针是指向函数的指针变量。因此“函数指针”本身首先应是指针变... 继续阅读 >
2020
09-24

JS赋值、浅拷贝和深拷贝（数组和对象的深浅拷贝）实例详解

JS赋值、浅拷贝和深拷贝（数组和对象的深浅拷贝）实例详解 本文实例讲述了JS赋值、浅拷贝和深拷贝（数组和对象的深浅拷贝）。分享给大家供大家参考，具体如下：深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。 浅拷贝只是拷贝了基本类型的数据，而引用类型数据，复制后也是会发生引用，我们把这种拷贝叫做浅拷贝（浅复制）浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内... 继续阅读 >
2020
09-24

js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结

本文实例讲述了js找出5个数中最大的一个数和倒数第二大的数实现方法。分享给大家供大家参考，具体如下：最大的一个数：方法1：<script>varmax=Math.max(1,2,3,4,5,2,8);console.log(max)//5//如果这5个数是数组可以用apply方法varmax1=Math.max.apply(this,[1,2,3,4,5,2,8]);console.log(max1);</script>方法2：<script>varmax2=[1,6,3,5,8,10]letmax3=max2.sort(function(a,b){returna-b;})console.log(max3[max3.length... 继续阅读 >