下面分享两个小案例：
1、实现发送验证码控制按钮禁用
主要步骤及代码思路是，
添加点击按钮事件
按钮被禁用
替换按钮内的内容
每隔1s进行倒计时的变换
倒计时到0时，停止倒计时，按钮恢复发送
按钮内容更改，禁用取消
<body>
<input type="text" id="txt">
<input type="button" id="btn" value="发送">
<script src="../jq/jquery-1.12.4.min.js"></script>
<script>
var $btn = $("#btn");
$btn.click(function(){
var n = 5;
$(this).prop("disabled",true).val(n + "s 后重新发送")
var timmer = setInterval(() => {
//这里如果使用function的话，$(this)指向的是window，需要将$(this)指向btn，那就直接使用箭头含税即可
n--;
$(this).val(n + "s 后重新发送")
if(n == 0){
$(this).prop("disabled",false).val("重新发送");
clearInterval(timmer);
}
},1000)
})
</script>
</body>
image
2、放大镜切换项
主要步骤及代码思路是，
首先要获取元素
给小图加上鼠标移上事件，切换类名
排他思想，切换类名，给图片的父级添加类名，父级的兄弟取消选中的样式的类名
更改中图和大图的路径
①提前存储好图片路径的前缀（方便后期进行更改路径什么的）
②关于大图、中图前缀后面的路径，存储在类小图img的自定义属性中，这样方便后期取路径
进行对应图片路径的设置
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.leftbox{
float: left;
width: 400px;
}
.leftbox .top{
width: 400px;
border: 1px solid rgb(224, 224, 224);
}
.leftbox .tpo img{
width: 400px;
}
.leftbox ul{
width: 188px;
margin: 10px auto;
}
.leftbox ul li{
float: left;
width: 54px;
height: 54px;
border: 1px solid rgb(255, 255, 255);
}
.leftbox ul li.current{
border-color: red;
}
.leftbox ul li + li{
margin-left: 10px;
}
.rightbox{
float: left;
margin-left: 10px;
width: 500px;
height: 500px;
border: 1px solid #eee;
overflow: hidden;
}
</style>
<body>
<div class="leftbox">
<div class="top">
<img src="img/m1.jpg" alt="">
</div>
<ul>
<li class="current">
<img src="img/s1.jpg" mrc="m1.jpg" brc="b1.jpg">
</li>
<li>
<img src="img/s2.jpg" mrc="m2.jpg" brc="b2.jpg">
</li>
<li>
<img src="img/s3.jpg" mrc="m3.jpg" brc="b3.jpg">
</li>
</ul>
</div>
<div class="rightbox">
<img src="img/b1.jpg" alt="">
</div>
<script src="../jq/jquery-1.12.4.min.js"></script>
<script>
//获取元素
var $imgs = $(".leftbox ul li img");
var $mimg = $(".leftbox .top img");
var $bimg = $(".rightbox img");
//添加鼠标移上事件
$imgs.mouseenter(function(){
// 1 排他思想，添加类名
$(this).parent().addClass("current").siblings().removeClass("current");
//2 更改中图、大图的路径
// 获取路径
var path = "img/"//图片路径前缀
// 从小图的自定义属性中 获取路径
var mrc = path + $(this).attr("mrc");
var brc = path + $(this).attr("brc");
// 设置路径
$mimg.attr("src",mrc);
$bimg.attr("src",brc);
})
</script>
</body>
image
