分类：JS

2021
03-16

基于JS绘制2021的烟花效果 附源码下载

基于JS绘制2021的烟花效果 附源码下载 该作品是运用到了前端开发的知识内容(JS内容），但是运用到了前段比较后面的知识了，该作品可以用做网页设计的背景是一个不错的选择，以下式该程序运行的效果图，HTML，CSS中多部分的运用与设置，就是单词的字面意思以下是该作品呈现的效果图：调用JS使用时，JS里面的内容不需要做过多的研究与了解，只需给你一个JS文件会调用即可，但是HTML，CSS的内容中的至少的单词要知道意思与会运用，以下是HTML部分中的代码（主要还是调用后... 继续阅读 >
2021
03-16

JavaScript中的for循环与双重for循环详解

for循环for循环就是对数组的元素进行循环。语法：for(初始化变量;条件表达式;迭代语句){    需要执行的代码块；}初始化变量：一般用来对循环变量进行初始化赋值。条件表达式：作为循环条件，一个包含比较运算符的表达式，用来限定循环变量的边限。如果循环变量的值超出了该边限，则停止该循环语句的执行。迭代语句：用来改变循环变量的值，从而控制循环的次数，通常是对循环变量的值进行递增或者递... 继续阅读 >
2021
03-14

原生Js实现日历挂件

原生Js实现日历挂件 本文实例为大家分享了js实现日历挂件的具体代码，供大家参考，具体内容如下Csscode/**************************日历样式对应表*#date日历块*table表格*th头部*td身体*a.now本月*a.non-arrival其他月*a.day今天*a.href链接*#date_diglogs记住对话框*************************/#date{width:220px;padding-bottom:5px;box-shadow:01px3px#ccc;border:1pxsolid#EDEDED;}#datetable{... 继续阅读 >
2021
03-14

js实现瀑布流布局（无限加载）

本文实例为大家分享了js实现瀑布流布局的具体代码，供大家参考，具体内容如下1.实现瀑布流布局思路准备好数据之后.绑定滚动事件.判断页面是否到底（滚动的距离+可是区域的高度==最后一个元素的top）.加载新数据，渲染新页面.重新执行瀑布流效果2.代码（更换图片路径之后可直接运行）<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Document</title><style>.cont{margin:0auto;background:#ccc;position:re... 继续阅读 >
2021
03-14

js实现贪吃蛇游戏含注释

js实现贪吃蛇游戏含注释 本文实例为大家分享了js实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下两个小时完成的，有点简陋。直接看效果。打开调试面板，在resource面板，新建snippet粘贴以下代码，右键snippet，run。clearInterval(timer);document.body.innerHTML="";//每秒移动多少格letspeed=10;letspeedUpMul=3;//是否能穿墙letisThroughTheWall=true;//行数letrow=40;letheadColor='red';letbodyColor='green';letfoodColo... 继续阅读 >
2021
03-14

js canvas实现滑块验证

js canvas实现滑块验证 本文实例为大家分享了jscanvas实现滑块验证的具体代码，供大家参考，具体内容如下滑块验证话不多说先上代码想用的小伙伴可以直接使用，想了解的我后面会说下我的思路<template><divclass="sliderContent"><divclass="imgDev":style="'width:'+width+'px;'"><canvas:id="id":width="width":height="height"></canvas><canvasclass="slider":id="id+'sliderBlock'":width="width":height="height":style="'lef... 继续阅读 >
2021
03-10

js 创建对象的多种方式与优缺点小结

早期创建方式varobj=newObject()obj.name='xxx'obj.age=18或使用对象字面量varo1={name:'xxx',say:()=>{}}varo2={name:'xxx',say:()=>{}}缺点：使用同一个接口创建很多对象，会产生大量重复代码工厂模式functionfactory(name,age){varobj=newObject()obj.name=nameobj.age=agereturnobj}varo1=factory(1,11)varo2=factory(2,22)优点：解决了创建多个相似对象代码重复问题... 继续阅读 >
2021
03-10

原生js canvas实现简单贪吃蛇

本文实例为大家分享了jscanvas实现简单贪吃蛇的具体代码，供大家参考，具体内容如下Js原生贪吃蛇：canvasHTML<canvasid="can"></canvas>CSS#can{background:#000000;height:400px;width:850px;}JS//公共板块varblockSize=10;//地图的高宽varmapW=300;varmapH=150;//历史食物varvarhistoryfood=newArray();//食物数组varimg=newImage()vararrFood=["ananas.png","hamburg.png","watermelon.png"]histor... 继续阅读 >
2021
03-09

js实现简单放大镜特效

js实现简单放大镜特效 本文实例为大家分享了js实现简单放大镜特效的具体代码，供大家参考，具体内容如下先来看看效果：写放大镜之前我们先来了解一下定位：通常子绝父相（父元素相对定位，子元素绝对定位）元素的定位方式：1、static    静态定位，所有元素，不添加任何定位方式时的默认状态2、relative  相对定位，不脱离文档流，可以相对于自身的原始位置，位移3、fixed     固定定位，完... 继续阅读 >
2021
03-09

原生js实现2048小游戏

原生js实现2048小游戏 2048小游戏，供大家参考，具体内容如下首先2048小游戏离不开16个格子，我们通过html和css创建好对应的标签和样式，然后开始js逻辑<divid="box">//一个盒子里面16个小div<divid="son"></div><divid="son"></div><divid="son"></div><divid="son"></div><divid="son"></div><divid="son"></div><divid="son"></div><divid="son"></div><divid="son"></div><divid="son"></div><divid="son"></div><divid="s... 继续阅读 >
2021
03-09

JS 实现请求调度器

前言：JS天然支持并行请求，但与此同时会带来一些问题，比如会造成目标服务器压力过大，所以本文引入“请求调度器”来节制并发度。TLDR;直接跳转『抽象和复用』章节。为了获取一批互不依赖的资源，通常从性能考虑可以用Promise.all(arrayOfPromises)来并发执行。比如我们已有100个应用的id，需求是聚合所有应用的PV，我们通常会这么写：constids=[1001,1002,1003,1004,1005];consturlPrefix='http://opensearch.e... 继续阅读 >
2021
03-07

JavaScript数据结构之双向链表

JavaScript数据结构之双向链表 单向链表在遍历时只能从头到尾或者从尾遍历到头；所以单向链表可以轻松到达下一节点，但是回到上一个节点是很困难的而双向链表既可以从头遍历到尾,又可以从尾遍历到头，链表的相联是双向的，一个节点既有向前连接的引用，也有向后连接的引用但是正因如此，双向链表在插入或者删除某个节点时，需要处理四个节点的引用，并且所占用内存空间也更大一些双向链表实现JavaScript代码实现双向链表//创建双向链表的构造函数functionDou... 继续阅读 >
2021
03-07

JavaScript实现二叉搜索树

JavaScript中的搜索二叉树实现，供大家参考，具体内容如下二叉搜索树（BST，BinarySearchTree），也称二叉排序树或二叉查找树二叉搜索树是一颗二叉树,可以为空；如果不为空，满足以下性质：非空左子树的所有键值小于其根结点的键值非空右子树的所有键值大于其根结点的键值也就是左结点值想<根结点值<右节点值左、右子树本身也都是二叉搜索树二叉搜索树的操作insert(key)：向树中插入一个新的键search(key)：在树中查找... 继续阅读 >
2021
03-07

JavaScript快速实现日历效果

JavaScript快速实现日历效果 本文实例为大家分享了JavaScript快速实现日历效果的具体代码，供大家参考，具体内容如下效果图代码<!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>*{margin:0;padding:0;}#calendar{background-color:#9... 继续阅读 >