分类：JS

2021
01-10

原生JavaScript实现留言板

原生JavaScript实现留言板 本文实例为大家分享了JavaScript实现留言板的具体代码，供大家参考，具体内容如下效果：代码：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><style>#txt2{width:400px;height:50px;margin-top:5px;}#span1{margin-left:200px;}#box{width:400px;/*height:400px;*//*border:1pxsolidgray;*/}#box.item{height:80px;border-bottom:dashed1pxlightgrey}#box.c1{height:30px;}#bo... 继续阅读 >
2021
01-08

js用正则表达式筛选年月日的实例方法

当我们想要对日期进行筛选时，可以选择使用正则表达式的检索功能。这里涉及到正则表达式关于匹配的使用，本篇会就组匹配的基础知识带来分析和代码展示。再学会了正则表达式的匹配方法后，就筛选日期的方法进行过程介绍，下面一起来看看正则表达式的相关内容吧。1.组匹配正则表达式的括号表示分组匹配，括号中的模式可以用来匹配分组的内容。/fred+/.test('fredd')//true/(fred)+/.test('fredfred')//true上面代码中，第一个模... 继续阅读 >
2021
01-03

js定时器出现第一次延迟的原因及解决方法

我们在使用js定时器，经常会出现间隔几秒获取一次数据，这是通过setInterval实现的。而且如果setInterval()参数传递不当，定时器会延迟试行。本文向大家介绍js定时器第一次延迟的原理及实现过程。setInterval()作用是在播放动画的时，每隔一定时间就调用函数、方法或对象。语法setInterval(function(),time);单位是毫秒注意：单位是毫秒定时器第一次延迟执行：采用setInterval实现vart=setInterval(scrollTop,2500);function... 继续阅读 >
2021
01-03

js正则表达式简单校验方法

对于字符串的一些操作，可以通过正则表达式来实现。一般的搜索操作想必大家已经学会，今天就来说说它的校验功能，这样可以帮助判断字符串类型或者是其它的组成，比如密码、中文、字符串的组成等。下面就js正则表达式的校验带来内容分享，同时要考虑在js中支持的类型。1.常见js正则校验（1）校验密码强度密码的强度必须是包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间。^(?=.*\\d)(?=.*[a-z])(?=.*[A-... 继续阅读 >
2021
01-03

基于JavaScript实现轮播图效果

基于JavaScript实现轮播图效果 本文实例为大家分享了JavaScript实现轮播图效果的具体代码，供大家参考，具体内容如下学习笔记（学校的课设），实现了左右切换，按指示点切换、按小图标切换和自动切换，但是还有某些功能没完善，如：切换到某张图片后，左右并没有切换到前后相应的图片。先看实现效果：代码仅供参考：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><style>.div0{height:100px;width:100%;background-color:bl... 继续阅读 >
2021
01-03

原生JS运动实现轮播图

原生JS运动实现轮播图**基本原理：**通过控制包含n张图片的ul的left值来实现图片自动运动的效果，其中列表中li元素的个数为n，第一个li和最后一个li里存放的图片应为同一张图片，当图片运动到最后一张时，将ul的left值设为0，即可达到图片无线轮播的效果。运动函数的实现函数需传入元素（即需要参与运动的元素）、目标值（以对象的形式呈现，如{left:300}）、callback（回调函数）。//多物体多值运动+回调机制functionstartMove(... 继续阅读 >
2021
01-03

基于JavaScript实现简单扫雷游戏

对于10年前的人来说，扫雷肯定是家喻户晓，由于当时的科技并不是很发达，大家对于电脑游戏的了解，可能都是从扫雷开始的，今天就交大家一种用js原生代码写一个简单的扫雷游戏，话不多说，直接上干货：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><style>*{margin:0;padding:0;}li{list-styl... 继续阅读 >
2021
01-03

JS+CSS实现过渡特效

JS+CSS实现过渡特效 最近在玩一个叫Babaisyou的游戏，很羡慕里面的一个转场特效，所以试着做了一下。主要使用了JS和CSS，特效主要是用CSS实现的。HTML代码<!DOCTYPEhtml><htmllang="en"dir="ltr"><head><metacharset="utf-8"><title>开始导航</title><linkrel="stylesheet"href="style.css"></head><body><divclass="text"><p><aid="bottom">点击进入</a></p></div></body><scripttype="text/javascript">//执行代码window.onl... 继续阅读 >
2021
01-03

利用 JavaScript 实现并发控制的示例代码

利用 JavaScript 实现并发控制的示例代码 一、前言  在开发过程中，有时会遇到需要控制任务并发执行数量的需求。  例如一个爬虫程序，可以通过限制其并发任务数量来降低请求频率，从而避免由于请求过于频繁被封禁问题的发生。  接下来，本文介绍如何实现一个并发控制器。二、示例consttask=timeout=>newPromise((resolve)=>setTimeout(()=>{resolve(timeout);},timeout))consttaskList=[1000,3000,200,1300,800... 继续阅读 >
2020
12-30

javascript实现随机抽奖功能

javascript实现随机抽奖功能 javascript实现随机抽奖，供大家参考，具体内容如下首先创建一个数组用于存放抽奖的参与者：vararr=['张三','波波','kk','莉莉','张三丰','刘德华','周杰困','你那儿','zhere','好的'];给开始和结束按钮div添加点击事件：//添加点击开始则开始循环播放document.getElementById("start").addEventListener("click",va);//点击停止则停止播放并显示恭喜中奖document.getElementById("end").addEventListener("click",function(){... 继续阅读 >
2020
12-30

JS实现选项卡插件的两种写法（jQuery和class）

本文实例为大家分享了JS实现选项卡插件的2种写法，供大家参考，具体内容如下实现插件的几个注意点：（1）定义一个固定的html结构，比如选项卡的标题的标签为为li，每个选项卡的内容的标签为div等等；（2）选中时的样式提前确定；（3）最好先用简单的JS实现选项卡的功能，再改为插件的模式。html结构如下：<style>*{margin:0;padding:0;}ul{list-style:none;}#tabBox{box-sizing:border-box;margin:20pxauto;wi... 继续阅读 >
2020
12-30

js实现鼠标拖曳效果

js实现鼠标拖曳效果 js实现鼠标的拖曳效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下效果如下：下面是代码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>鼠标拖曳效果</title><style>body{background:black;}#box{position:absolute;background:rgb(148,143,143);width:400px;height:20... 继续阅读 >
2020
12-27

js仿淘宝放大镜效果

js仿淘宝放大镜效果 仿淘宝放大镜封装效果，供大家参考，具体内容如下放大镜是做好了，但是没有下面小型导航无法选择放大图片，后期我会在封装出来的。由于考试当前考完试我会在推出vue的放大效果。以下是代码：1.html代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><linkhref="css/index.css"rel="stylesheet"></head><body><divclass="magnify"><divclass="magnify_conatiner"><divclass="magnify... 继续阅读 >
2020
12-27

JavaScript实现原型封装轮播图

本文实例为大家分享了JavaScript实现原型封装轮播图的具体代码，供大家参考，具体内容如下只要用dom元素调用这个方法，传一个数组进去，里面放的是图片的路径。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><style>*{padding:0px;margin:0px;list-style:none;}.leftBtn{position:absolute;... 继续阅读 >