您的位置：首页 > Web前端 > JavaScript

几种js 方法实现倒计时

2016-03-07 00:00 676 查看

摘要: 用setInterval 和clearInterval 实现倒计时，思路是间隔一秒数字减少一

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航