分类：JS

2020
10-06

使用JavaScript实现网页秒表功能（含开始、暂停、继续、重置功能）

使用JavaScript实现网页秒表功能（含开始、暂停、继续、重置功能） 效果图展示，感觉不错可以参考实例代码。具体代码如下所示：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title></head><body><div>00:00:00:00</div><button>开始</button><buttondisabled>暂停</button><buttondisabled>继续</button><buttondisabled>重置</button><script>//定义一个变量，根据定时器每... 继续阅读 >
2020
10-06

详解JS函数防抖

一、什么是函数防抖       概念：函数防抖（debounce），就是指触发事件后，在n秒内函数只能执行一次，如果触发事件后在n秒内又触发了事件，则会重新计算函数延执行时间。       举个栗子，坐电梯的时候，如果电梯检测到有人进来（触发事件），就会多等待10秒，此时如果又有人进来（10秒之内重复触发事件），那么电梯就会再多等待10秒。在上述例子... 继续阅读 >
2020
10-06

js实现表单项的全选、反选及删除操作示例

本文实例讲述了js实现表单项的全选、反选及删除操作。分享给大家供大家参考，具体如下：<htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>网站会员激活码管理</title><scriptlanguage="javascript">functionReSel(){for(i=0;i<document.form1.logs.length;i++){//这一用法只对form表单有效document.form1.logs[i].checked=true;//如果是实现【全不选】的话，改成false即可}}functionSeSel(){f... 继续阅读 >
2020
10-05

JS+canvas五子棋人机对战实现步骤详解

1.创建实例functionGobang(){this.over=false;//是否结束this.player=true;//true:我false:电脑this.allChesses=[];//所有棋子this.existChesses=[]//已经落下的棋子this.winsCount=0;//赢法总数this.wins=[];//所有赢法统计this.myWins=[];//我的赢法统计this.computerWins=[];//电脑赢法统计}2.初始化//初始化Gobang.prototype.init=function(opts){//生成canvas棋盘... 继续阅读 >
2020
10-04

js实现无刷新监听URL的变化示例代码详解

无刷新改变路由的两种方法通过hash改变路由代码window.location.hash='edit'效果http://xxxx/#edit通过history改变路由history.back():返回浏览器会话历史中的上一页，跟浏览器的回退按钮功能相同history.forward():指向浏览器会话历史中的下一页，跟浏览器的前进按钮相同history.go():可以跳转到浏览器会话历史中的指定的某一个记录页history.pushState()可以将给定的数据压入到浏览器会话历史栈中，该方法接收3个参数... 继续阅读 >
2020
10-01

JS实现前端动态分页码代码实例

思路分析：有3种情况第一种情况，当前页面curPage<4第二种情况，当前页面curPage==4第三种情况，当前页面curPage>4此外，还要考虑，当前页码curPage<pageTotal（总页码）-2，才显示...首先，先是前端的布局样式<body>/*首先，在body中添加divid="pagination"*/<divid="pagination"><!--后面会在JS中动态追加，此处为了，实现前端效果，所以注册<aid="prevBtn"><</a><aid="first">1</a><ahref="#"rel="exter... 继续阅读 >
2020
10-01

JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置

JavaScript实现手机号码3-4-4格式手机号实现3-4-4格式相对来说还是比较简单的，监听input事件，实时的获取手机号码，然后根据手机号码的长度做截取和拼接的操作，即可实现手机格式的处理，实现格式的处理之后，我们还需要支持在指定光标进行新增和删除操作的时候光标不移动到最后面，因为手机号的格式使我们重置的，监听input事件重新赋值之后光标会移动到最后一位，解决这个问题的办法就是记录光标的位置并在value值格式重置之后... 继续阅读 >
2020
10-01

实例分析javascript中的异步

js异步解析一、js单线程分析    我们都知道js的一大特点是单线程，也就是同一时间点，只能处理一件事，一句js代码。那为什么js要设计成单线程而不是多线程呢？这主要和js的用途有关，js作为浏览器端的脚本语言，主要的用途为用户与服务端的交互与操作dom。而操作dom就注定了js只能是单线程语言。假如js才取多线程将会出现，多个线程同时对一个dom进行操作的情况，浏览器将无法判断如何渲染。不仅js是单线程... 继续阅读 >
2020
10-01

js简单实现自动生成表格功能示例

本文实例讲述了js简单实现自动生成表格功能。分享给大家供大家参考，具体如下：JS实现自动生成表格由于自己的算法8太行，所以只能尽量用简单点的方法实现效果下面直接上代码<tableid="table"><thead><td>姓名</td><td>年龄</td><td>身高</td></thead><tbody></tbody></table><style>.del{cursor:pointer;color:blue;}</style><script>vartableInfo=[{姓名:'张三',年龄:20,身高:160},{姓名:... 继续阅读 >
2020
10-01

JS中准确判断变量类型的方法

这是一个高频面试题，我们开发中也进程会遇到，今天我们来实现一个函数getValType(val)用来获取一个变量的类型。从1.JS基础变量类型。2.Js中判断变量的函数。3.实现getValType函数。3个方面来分析实现。Js基础变量类型在JS中，有5种基本数据类型和1种复杂数据类型，基本数据类型有：Undefined,Null,Boolean,Number和String；复杂数据类型是Object，Object中还细分了很多具体的类型，比如：Array,Function,Date等等... 继续阅读 >
2020
10-01

JS如何寻找数组中心索引过程解析

JS如何寻找数组中心索引过程解析 给定一个整数类型的数组nums，请编写一个能够返回数组“中心索引”的方法。我们是这样定义数组中心索引的：数组中心索引的左侧所有元素相加的和等于右侧所有元素相加的和。如果数组不存在中心索引，那么我们应该返回-1。如果数组有多个中心索引，那么我们应该返回最靠近左边的那一个。示例1:输入:nums=[1,7,3,6,5,6]输出:3解释:索引3(nums[3]=6)的左侧数之和(1+7+3=11)，与右侧数之和(5+6=11)相等。同... 继续阅读 >
2020
10-01

原生JS封装拖动验证滑块的实现代码示例

原生JS封装拖动验证滑块的实现代码示例 前言星期六闲着没事，就想着写写原生js玩玩，在网上看了几个效果后决定做这个效果，并且使用了prototype和eventEmitter封装成了库。最终效果 分析看到这个效果我们首先应该想到和拖动有关的api:onmousedown,onmousemove,onmouseup其次要支持用户传入放置这个组件的dom元素和完成的回调事件。最终如何使用？我们先来看下使用方式，再来决定我们怎么编写这个库具体使用就是这样的，我们还想用户能通过import等方式使用，所... 继续阅读 >
2020
09-30

使用原生JS实现滚轮翻页效果的示例代码

使用原生JS实现滚轮翻页效果的示例代码 一、滚轮事件当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时，就会触发mousewheel事件，这个事件就是实现全屏切换效果需要用到的。在IE6,IE7,IE8,Opera10+,Safari5+中，都提供了“mousewheel”事件，而Firefox3.5+中提供了一个等同的事件：”DOMMouseScroll”。与mousewheel事件对应的event对象中我们还会用到另一个特殊属性—wheelDelta属性。1、“mousewheel”事件中的“event.wheelDelta”属性值：返回的... 继续阅读 >
2020
09-30

JS常见内存泄漏及解决方案解析

内存泄漏？官方解释：内存泄漏（MemoryLeak）是指程序中己动态分配的堆内存由于某种原因程序未释放或无法释放，造成系统内存的浪费，导致程序运行速度减慢甚至系统崩溃等严重后果。通俗点就是指由于疏忽或者错误造成程序未能释放已经不再使用的内存，不再用到的内存却没有及时释放，从而造成内存上的浪费。避免内存泄漏？在局部作用域中，等函数执行完毕，变量就没有存在的必要了，垃圾回收机制很亏地做出判断并且回收，但是对于... 继续阅读 >
2020
09-30

JS组件库AlloyTouch实现图片轮播过程解析

轮播图也涉及到触摸和触摸反馈，同时，AlloyTouch可以把惯性运动打开或者关闭，并且设置min和max为运动区域，超出会自动回弹。除了一般的竖向滚动，AlloyTouch也可以支持横向滚动，甚至任何属性的运动，因为它的设计的本质就是属性无关，触摸可以反馈到任何属性的运动。所以AlloyTouch制作各种各样的轮播组件还是得心应手。第一种轮播图如上图所示。下面开始实现的过程。第0秒<divid="carousel-container"><divclass="carousel"... 继续阅读 >