JavaScript
雷加祥
学习前端开发过程中的笔记
展开
-
JavaScript实现发送短信验证码
HTML代码<input type="number"><button>发送验证码</button>JavaScript代码var btn = document.querySelector('button'); //获取点击按钮var time = 3; //定义剩下的秒数var timer = null; //定义定时器的名称btn.addEventListener('click', function() { btn.disabled = true原创 2021-11-02 22:48:54 · 2496 阅读 · 0 评论 -
JavaScript淘宝相册切换
<img src="images/c1.jpg" id="bigImg"> <ul> <li class="active"> <a href="JavaScript::"> <img src="images/c1.jpg" alt="" class="smallImg"> </a> </li> <li> <a href="J..原创 2020-05-24 03:11:19 · 211 阅读 · 0 评论 -
JavaScript实现简单的图片切换
<img src="images/image01.jpg" id="fruit" width="200px" height="200px"> <br> <button id="prev">上一张</button> <button id="next">下一站</button>JavaScript var minIndex = 1, maxIndex = 4; currentIndex = m..原创 2020-05-24 02:17:50 · 846 阅读 · 0 评论 -
var let const的区别
使用var声明的变量其作用域为该语句所在的函数内,且存在变量提升现象使用let声明的变量其作用域为该语句所在的代码块内,不存在变量提升现象使用const声明的是常量,在后面的代码中不能修改该常量的值varletconst函数级作用域块级作用域块级作用域变量提升不存在变量提升不存在变量提升值可更改值不可更改值不可更改...原创 2020-05-13 15:38:01 · 367 阅读 · 0 评论 -
正则表达式-验证用户名输入是否正确
创建一个输入框和一个span标签css样式 span标签为常用样式 其它两个为后期判断做准备span{ color: #aaa; font-size: 14px; } .right{ color: green; } .wrong{ color: red; }<input type="text" class="uname"><span>请输入用户名</span>JavaS.原创 2020-05-13 02:24:30 · 1248 阅读 · 0 评论 -
ES6面向对象版Tab栏切换
主要功能包括tab栏切换增加删除tab栏双击可以修改tab栏的文字双击可以修改文本内容* { margin: 0; padding: 0; } ul li { list-style: none; } input{ height: 25px; } .tabsbox { width: 800px; height: 400px; border: 1px solid #原创 2020-05-11 18:21:25 · 647 阅读 · 1 评论 -
localStorage存储案例
输入文本存储本地,如果文本框内部有内容,复选框选中 则关闭页面重新打开会显示已有内容,如果重新输入内容且选中文本框则会保存本地 下次打开依然显示重新输入的内容,如果不选中复选框则打开不会显示创建文本框 <input type="text" id="username"> <input type="checkbox" name="" id="remember"> 记住用户名var username = document.querySelector('#userna原创 2020-05-10 15:06:18 · 579 阅读 · 0 评论 -
JavaScript实现京东轮播图效果
纯JavaScript代码实现京东轮播图效果功能包括,点击左右按钮跳转下一张图片,点击小圆圈跳转图片,鼠标移动轮播图上面停止轮播,无缝循环播放,代码注释写在里面咯CSS样式 * { margin: 0; padding: 0; } .box { width: 415px; height: 241px; bac...原创 2020-05-06 04:41:24 · 2280 阅读 · 1 评论 -
JavaScript实现倒计时功能(包括天时分秒)
CSS样式简单的样式span { display: inline-block; width: 50px; height: 50px; background-color: black; text-align: center; line-height: 50px; font-size: 20px; ...原创 2020-05-04 18:03:55 · 1334 阅读 · 0 评论 -
JavaScript仿快递查询输入框
JavaScript仿快递查询输入框CSS样式<style> .search { position: relative; margin: 200px auto; width: 178px; height: 100px; } .con { display: none; position:...原创 2020-05-04 16:19:38 · 683 阅读 · 0 评论 -
JavaScript五行代码生成九九乘法表
五行JavaScript代码实现九九乘法表 document.write('<table>') for (var i = 1; i <= 9; i++) { document.write('<tr>'); for (var j = 1; j <= i; j++) { document.write('<th&...原创 2020-05-06 18:11:14 · 238 阅读 · 0 评论