发送短信倒计时和tab切换

最新推荐文章于 2022-06-30 19:37:29 发布

SmallDiv

最新推荐文章于 2022-06-30 19:37:29 发布

阅读量248

点赞数

分类专栏：前端js

本文链接：https://blog.csdn.net/SmallDiv/article/details/78465669

版权

前端js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-1.11.3.min.js"></script>
<style>
span{
padding-left: 15px;

}
.div1 {
margin: 0 auto;
width: 500px;
}
.div2 div {
width: 150px;
height: 150px;
background-color: red;
}
.hide{
display: none;
}
button{
width: 150px;
height: 50px;
}
</style>
</head>
<body>

<div class="div1">
<span>信号1</span><span>星号2</span><span>星号3</span>
<button>点击倒计时</button>
</div>

<div class="div2">
<div>我是div1</div>
<div class="hide">我是div2</div>
<div class="hide">我是div3</div>
</div>

<sup>
天
</sup>
气

<script>
$(".div1 span").click(function(){
var self = $(this);
var $i=self.index();
$(".div2 div").hide();
$(".div2 div").eq($i).show();
})

$("button").click(function(){
var s=60;
$("button").attr({"disabled":"disabled"});

clearInterval(t);
var t=setInterval(a,1000);
function a(){
s-=1;
if(s>0){
$("button").html(s);
}else {
$("button").removeAttr("disabled");
$("button").html("重新发送验证码");
clearInterval(t);
s=60;

}
}

})

</script>
</body>
</html>