分类：JS

2021
01-21

JavaScript实现下拉列表

JavaScript实现下拉列表 本文实例为大家分享了JavaScript实现下拉列表的具体代码，供大家参考，具体内容如下这一次写了一个比较简单的下拉列表的实现，点击出现列表内容，再次点击列表消失，研究了很久，发现这种js写法确实比较好用。先看一下效果。直接上代码，js是主要写的部分，css是随意调试的，不过这个写法要用到css。1、HTML部分的代码<body><!--最外面的一层--><divclass="outer"><!--里面的--><divclass="inner"><h2>第一</h2><ul><li>a</l... 继续阅读 >
2021
01-21

js实现电灯开关效果

js实现电灯开关效果 本文实例为大家分享了js实现电灯开关效果的具体代码，供大家参考，具体内容如下通过对js的一个学习，我们来完成一个模拟电灯开关的小案例。首先对本案例进行一个分析，过程如下：1.获取图片属性2.绑定单击事件3.点击时切换图片1.通过按钮实现电灯开关<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><imgsrc="imgs/on.gif"alt=""id="img"><br><!--图片--><inputtype="button... 继续阅读 >
2021
01-21

JS实现纸牌发牌动画

JS实现纸牌发牌动画 本文实例为大家分享了JS实现纸牌发牌动画的具体代码，供大家参考，具体内容如下先看演示游戏构建准备1.准备52张纸牌2.一张桌布3.编辑工具为VisualCode技术概要1.对象操作2.数据操作3.JSanimation动画4.全局变量functiondesen_x(){letthat=this;vardesen=["h_1","h_2","h_3","h_4","h_5","h_6","h_7","h_8","h_9","h_10","h_11","h_12","h_13","p_1","p_2","p_3","p_4","p_5","p_6","p_7","p_8","p_9","p_10","p_11","p... 继续阅读 >
2021
01-17

js中延迟加载和预加载的具体使用

延迟加载（懒加载）和预加载是常用的web优化的手段。。一、延迟加载（懒加载）原理：当在真正需要数据的时候，才真正执行数据加载操作。目的：延迟加载机制是为了避免一些无谓的性能开销而提出来的实现延迟加载的几种方法1.让js最后加载使用方法：把js外部引入的文件放到页面底部用途:让js最后引入，从而加快页面加载速度说明:流览器之所以会采用同步模式，通常加载js文件或者放<script>标签都在结构最后面，也是因... 继续阅读 >
2021
01-17

JS中箭头函数与this的写法和理解

前言JavaScript在ES6语法中新增了箭头函数，相较于传统函数，箭头函数不仅更加简洁，而且在this方面进行了改进。this作为JavaScript中比较诡异的存在，许多文章对于this的解释也不尽相同，本篇文章试图厘清JS中函数与this的关系。一、JS中函数的写法1.常规函数的写法在ES6语法之前，JS中的函数由function关键字、params参数和被花括号包裹的函数体组成。为了与后面说到的箭头函数相区别，我们先把这样的函数叫做常规函数，常规函数... 继续阅读 >
2021
01-13

JavaScript实现消消乐的源代码

JavaScript实现消消乐的源代码 JavaScript实现消消乐的源码下载地址：点击下载源代码index.html<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>LuckyStar</title><linkrel="stylesheet"href="./css/index.css?v=1.0.0"rel="exte... 继续阅读 >
2021
01-13

使用js原生实现年份轮播选择效果实例

前言用js实现一个年份轮换选择效果。废话不多说，看图：一、思路是什么？布局：左右箭头使用实体字符&lt;和&gt;年份5个span。使用用flex布局横向排列。js逻辑：（注：年份数据为number数组）a>.默认展示年份数据前5个。b>.firstIndex记录要显示的5个年份的起始索引。点击右侧箭头+1，直到firstIndex+5刚好等于年份数组长度，不在递增。点击左侧箭头-1，直到firstIndex为0，不在递减。初始值为0。c>.sel... 继续阅读 >
2021
01-13

js动态生成表格(节点操作)

js动态生成表格(节点操作) 本文实例为大家分享了js动态生成表格的具体代码，供大家参考，具体内容如下针对DOM节点操作，该案例效果图如下（代码量不多，就没有结构与行为相分离）：原生js实现（注释里面解释了做法）：<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><styletype="text/css">table{width:500px;margin:100pxauto;border-collapse:collapse;text-align:center;}td,th{border:1pxsolid#333;}thead... 继续阅读 >
2021
01-12

JS addEventListener()和attachEvent()方法实现注册事件

在JavaScript的DOM事件模型中，通过调用对象的addEventListener()方法注册事件。用法如下：element.addEventListener(Stringtype,Functionlistener,booleanuseCaptrue);参数说明如下：type：注册事件的类型名。事件类型与事件属性不同，事件类型名没有on前缀。例如，对于事件属性onclick来说，所对应的事件类型为click。listener：监听函数，即事件处理函数。在指定类型的事件发生时将调用该函数。在调用这个... 继续阅读 >
2021
01-12

JS removeAttribute()方法实现删除元素的某个属性

在JavaScript中，使用元素的removeAttribute()方法可以删除指定的属性。用法如下：removeAttribute(name)参数name表示元素的属性名。示例1下面示例演示了如何动态设置表格的边框。<script>window.onload=function(){//绑定页面加载完毕时的事件处理函数vartable=document.getElementByTagName("table")[0];//获取表格外框的引用vardel=document.getElementById("del");varreset=document.getEl... 继续阅读 >
2021
01-10

JavaScript canvas实现文字时钟

JavaScript canvas实现文字时钟 本文实例为大家分享了canvas实现文字时钟的具体代码，供大家参考，具体内容如下先看看效果图代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title></head><body><canvasid="myCanvas"width="600"height="600">您的浏览器不支持canvas</canvas><script>... 继续阅读 >
2021
01-10

JS代码实现页面切换效果

本文实例为大家分享了JS代码实现页面切换效果的具体代码，供大家参考，具体内容如下HTML+CSS部分添加所有页面，和上一页、具体页、下一页的按钮，设置div样式，默认第一页显示，其他页隐藏。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><style>.item{display:none;width:300px;height:400px;overflow:hidden;position:relative;}.item>img{width:100%;height:auto;pos... 继续阅读 >
2021
01-10

原生JavaScript实现购物车

原生JavaScript实现购物车 本文实例为大家分享了JavaScript实现购物车的具体代码，供大家参考，具体内容如下效果：代码：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><style>*{margin:0;padding:0;}.box{width:600px;margin:10pxauto;background:url(img/g.jpg);height:500px;}td{text-align:center;font-size:30px;color:orangered;}button{width:150px;border:0;border-radius:5px;height:30px;ba... 继续阅读 >
2021
01-10

JavaScript Html实现移动端红包雨功能页面

JavaScript Html实现移动端红包雨功能页面 本文实例为大家分享了Html实现移动端红包雨功能页面的具体代码，供大家参考，具体内容如下实现效果如下：具体代码如下html部分：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>红包雨</title><linkrel="stylesheet"href="./css/demo.css"><linkrel="stylesheet"hr... 继续阅读 >