- 博客(14)
- 收藏
- 关注
RSS订阅原创 数组部分方法重构（push，pop，shift，unshift等）
重构数组简单方法数组方法我们平时用的非常多，这里我们来重构一下几种简单的方法，直接上代码文章目录重构数组简单方法**1、push()**2、pop()**3、unshift()**4、shift()**5、concat()**6、join()**7、slice()**8、splice()****9、forEach()**10、map()**11、some()**12、every()**1、push()给数组尾部添加一个或多个元素，返回数组新长度，改变原数组**var arr=[1,2,3,4];
2022-05-28 11:37:26
272
原创 随机4位验证码（JS简单方法）
验证码随处可见，当我们输入账号密码登录时都得进行验证码验证，这里我们用JS实现一下随机4位数验证码，直接上代码。<script> function getStr(){ var arr=[]; for(var i=48;i<123;i++){ if(i>57 && i<65) continue; if(i>90 && i<97) continue; arr.push(Str
2021-11-17 16:43:44
1530
原创 setInterval完成超简单倒计时
在页面中显示倒计时直接上代码<div id="times"></div> <script> var times,ids,targetTime; init(); function init(){ times=document.querySelector("#times"); var date=new Date(); //设置时间3小时后
2021-01-26 16:35:04
174
原创 图片预加载（Promise）
什么是图片加载？图片预加载就是在网页全部加载之前，提前加载图片，减少用户的等待时间。1、把加载的图片复制全部放在一个数组中，设置变量num就是第几张图片，加载完第一张图片后，重新设置图片地址，触发执行继续加载，直到全部加载完成。<script> var imgList=[]; var num=1; loadImage(); function loadImage(){ var img=new Image(); img.addEventListener("load",loadH
2021-01-23 05:10:02
469
原创 JS完成轮播图（全部JS代码，自动轮播）
需求：1、点击左右方向图标切换图片2、点击图片中的小圆点切换对应图片3、切换图片改变对应小圆点的颜色4、鼠标离开时自动轮播，鼠标滑入停止轮播5、不能有空白思路：1、先布局，创建轮播图显示区域，容器2、创建放图片的盒子，放入容器，并创建图片放入盒子，显示第一张，并将所有图片存到数组3、创建左右按钮，添加至容器内，将左右按钮存到数组4、创建小圆点放入容器，将小圆点存到数组上面4个步骤就把轮播图布局完成了（如上图），下面该加效果了5、给左右按钮添加点击事件，点击右边按钮时，当前图片下标+
2021-01-20 05:14:26
1454
2
原创 JS判断浏览器类型
/* 判断是否是指定浏览器 给定浏览器，判断当前浏览器是否是指定的，如果不是返回false，如果是返回版本号 参数 browser:string 输入要判断浏览器，Chrome，Firefox、IE return 值:string|boolean 如果是指定的浏览器返回浏览器的版本
2021-01-13 05:05:51
212
1
原创 JS正则表达式实现简单的表单验证（账号，密码，手机号）
首先有三个文本框，和一个提交按钮，第一个输入账号，第二个密码，第三个手机号我们的需求：判断3个文本框是否全部输入正确，当我们点击提交时，如果有一个输入错误则不能提交，全部输入正确则提交成功；下面直接上代码表单代码 <form action="http://www.taobao.com"> <input type="text"><span></span><br> <input type="text"&g
2021-01-09 06:19:10
1764
2
原创 JS实现简单轮播图
以下为HTML页面布局和css样式，完成如图效果，显示第一张照片，其余隐藏。我们要做的是1、点击左右方向图标切换图片2、点击图片中的小圆点切换图片3、切换对应的图片改变小圆点颜色<style> *{ margin: 0; padding: 0; } .crousel{ width: 1700px; height: 560px;
2021-01-08 01:51:55
304
原创 利用JS（防抖）完成一个简单的小人行走
首先有这样一张图片，利用JS改变背景图显示的位置，达到让小人行走的目的设置一个div，简单写样式让图片左上角的小人显示出来，一个小人的宽高大概就是33px。<style> div { width: 33px; height: 33px; background-image: url(./img/Actor01-Braver03.png); background-position-x
2021-01-03 17:32:59
1537
原创 用JS点击事件做一个简单的计算器
用JS的点击事件和事件委托做一个简单的计算器（加减乘除，清除），下面就是计算器的样子，这里主要是用js，样式就随便设置，可能有点丑了；首先大概写出计算器的样子，简单设置一下样式<style> .icon { width: 500px; height: 600px; border: 1px solid #000000; position: relative;
2021-01-02 02:38:38
1605
原创 JS鼠标事件完成元素拖拽（简单-高级）
JS初学者记录利用鼠标事件完成元素在页面中的拖拽给入一个简单div，设置样式，完成div在页面中的拖拽<style> div{ width:50px; height:50px; background-color:red; position:absolute; }</style><div></div>第一种：极简单版本，下面为JS代码<script> var div = document.querySelector
2020-12-31 04:27:57
1300
1
原创 JS添加随机颜色20-100宽度正方形（两种方法）
点击按钮添加随机颜色20-100宽度正方形第一种：使用innerHTML<div id="divs></div><button id="bn>按钮</button>js代码<script> var divs,bn; init(); function init(){ divs=document.getElementById("divs"); bn=document.getElementById("bn"); bn.onc
2020-12-30 02:28:26
700
1
原创 JS生成随机颜色
js代码<script>function randomNumber(){ var str="#"; for(var i=0;i<6;i++){ str+=Math.floor(Math.random()*16).toString(16) } return str; } randomNumber();</script>
2020-12-29 18:28:39
141
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人