几种js 方法实现倒计时 原
1、用js setInterval 实现，每间隔一秒调用一次倒计时函数，在函数里面设置为0 时，取消定时器
<body>
倒计时<span id="time"></span>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var i=9;
var interval=setInterval(function(){
$("#time").html(i);
i--;
if(i<0){
clearInterval(interval);
};
},1000);
});
//总结：$("#time").html(i); 为元素赋值
</script>
</body>2、用 js setTimeout 实现，原理是间隔一秒调用自身，直到倒计时为0时，处理其他业务逻辑
<button id="btn" onclick="settime(this)">点击</button>
<script type="text/javascript">
function settime(val) {
if (countdown == 0) {
val.removeAttribute("disabled");
val.innerHTML="免费获取验证码";
countdown = 60;
} else {
val.setAttribute("disabled", true);
val.innerHTML="重新发送(" + countdown + ")";
countdown--;
}
setTimeout(function() {settime(val)},1000)
}
</script> 3、用jquery setInterval 实现倒计时
<div class="state state1">
<span id="content" class="orange">10 </span>秒后重新关闭
</div>
<div class="outbuttonDiv">
<button class="btn-primary" id="buttonClose" >阀门关闭</button>
</div>
<script type="text/javascript">
$(function () {
$('#buttonClose').click(function () {
var count = 10;
var countdown = setInterval(CountDown, 1000);
function CountDown() {
$("#buttonClose").attr("disabled", true);
$("#content").html(count+" ");
if (count == 0) {
$(".state1").addClass("green").html("关闭成功");
//$(".state1").addClass("red").html("关闭失败");
//$(".state1").addClass("green");
//$("#buttonClose").removeAttr("disabled");
clearInterval(countdown);
}
count--;
}
})
})
</script>4、用jquery setTimeout 实现倒计时
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<input type="button" id="btn" value="免费获取验证码" />
<span id="content">10</span>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#btn").click(function(){
var countdown = 10;
setTimeout(
function settime() {
if (countdown < 0) {
clearTimeout(a)
$("#content").html("finished");
//countdown = 60;
} else {
$("#content").html(countdown);
countdown--;
}
var a = setTimeout(settime, 1000)
},0)
})
})
</script>
</body>(adsbygoogle = window.adsbygoogle || []).push({});
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016/03/07 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读