jquery如何实现倒计时效果
我想实现这样的效果：在页面里一个div，这个div里会有一个秒表显示，就是这样。0:01，第二秒显示为0:02,这样一直显示，到5:00(5分钟的时候这个时间计数器就停止...
我想实现这样的效果：在页面里一个div，这个div里会有一个秒表显示，就是这样。0:01，第二秒显示为0:02,这样一直显示，到5:00(5分钟的时候这个时间计数器就停止了。不再继续下一秒了)。请问这个效果怎么做啊。求大侠指点。。。我这只有5分了不然全部给了。谢谢了
展开
3个回答
展开全部
首先获取当前时间与目标时间的时间差，然后通过定时器更新这个时间差，就实现了倒计时效果。实现上述过程需要以下两个函数：
getTime() // 返回距1970年1月1日之间的毫秒数，这样将时间差（毫秒数）÷3600÷24即为天数，时分秒类似
setTimeout(code,millisec); // 在指定的毫秒数后调用函数
实例演示如下
创建Html元素
<div class="box">
<span>距离2015年国庆节还剩：</span><br>
<div class="content">
<input type="text" id="time_d">天<input type="text" id="time_h">时<input type="text" id="time_m">分<input type="text" id="time_s">秒
</div>
</div>设置css样式
div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}
div.box>span{color:#999;font-style:italic;}
div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
input[type='text']{width:45px;height:35px;padding:5px 10px;margin:5px 0;border:1px solid #ff9966;}编写jquery代码
$(function(){
show_time();
});
function show_time(){
var time_start = new Date().getTime(); //设定当前时间
var time_end = new Date("2015/10/01 00:00:00").getTime(); //设定目标时间
// 计算时间差
var time_distance = time_end - time_start;
// 天
var int_day = Math.floor(time_distance/86400000)
time_distance -= int_day * 86400000;
// 时
var int_hour = Math.floor(time_distance/3600000)
time_distance -= int_hour * 3600000;
// 分
var int_minute = Math.floor(time_distance/60000)
time_distance -= int_minute * 60000;
// 秒
var int_second = Math.floor(time_distance/1000)
// 时分秒为单数时、前面加零
if(int_day < 10){
int_day = "0" + int_day;
}
if(int_hour < 10){
int_hour = "0" + int_hour;
}
if(int_minute < 10){
int_minute = "0" + int_minute;
}
if(int_second < 10){
int_second = "0" + int_second;
}
// 显示时间
$("#time_d").val(int_day);
$("#time_h").val(int_hour);
$("#time_m").val(int_minute);
$("#time_s").val(int_second);
// 设置定时器
setTimeout("show_time()",1000);
}观察效果
某个时刻的截图
几秒后的截图
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!--载入jQuery库-->
<script type="text/javascript" src=" http://code.jquery.com/jquery-1.7.2.min.js"></script>
<!--min为分钟，sec为秒钟-->
<div><span id="min"></span>:<span id="sec"></span></div>
<script>
var timerc=0; //全局时间变量（秒数）
function add(){ //加时函数
if(timerc < 300){ //如果不到5分钟
++timerc; //时间变量自增1
$("#min").html(parseInt(timerc/60)); //写入分钟数
$("#sec").html(Number(parseInt(timerc%60/10)).toString()+(timerc%10)); //写入秒数（两位）
setTimeout("add()", 1000); //设置1000毫秒以后执行一次本函数
};
};
add(); //首次调用add函数
</script>
<script type="text/javascript" src=" http://code.jquery.com/jquery-1.7.2.min.js"></script>
<!--min为分钟，sec为秒钟-->
<div><span id="min"></span>:<span id="sec"></span></div>
<script>
var timerc=0; //全局时间变量（秒数）
function add(){ //加时函数
if(timerc < 300){ //如果不到5分钟
++timerc; //时间变量自增1
$("#min").html(parseInt(timerc/60)); //写入分钟数
$("#sec").html(Number(parseInt(timerc%60/10)).toString()+(timerc%10)); //写入秒数（两位）
setTimeout("add()", 1000); //设置1000毫秒以后执行一次本函数
};
};
add(); //首次调用add函数
</script>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
学过循环队列和递归算法比较好理解我的代码吧。。。
<html>
<head>
<title>jquery实现倒计时效果</title>
<script type="text/javascript" src="jq/jquery.js"></script>
<script type="text/javascript">
var min , minTxt; //记录分
var secDecade , secDecadeTxt; //记录秒的十位
var secUnit , secUnitTxt; //记录秒的个位
var MAXMIN = 5; //记录最大限时分
var minSwitch = false; //秒的十位和分是否开始记录的开关
$(document).ready(function() {
//初始化分、秒的十位、秒的个位
minTxt = $("table tr td:eq(0)");
secDecadeTxt = $("table tr td:eq(2)");
secUnitTxt = $("table tr td:eq(3)");
min = parseInt(minTxt.html());
secDecade = parseInt(secDecadeTxt.html());
secUnit = parseInt(secUnitTxt.html());
refresh();//调用refresh函数
});
function refresh() {
//如果分小于5，则递归调用refresh函数
if (min < MAXMIN) {
secUnit = ++secUnit % 10;
secUnitTxt.html(secUnit);//显示秒的个位
if (minSwitch && secUnit == 0) {
secDecade = ++secDecade % 6;
secDecadeTxt.html(secDecade);//显示秒的十位
if (secDecade == 0)
minTxt.html(++min);//显示分
}
minSwitch = true;//由于记录秒的个位即secUnit初始值为-1，所以第一秒后不 必将秒的十位自增，第二秒开始将此开关打开
setTimeout("refresh()", 1000);//每1秒刷新一次数据
}
}
</script>
</head>
<body>
<table>
<tr>
<td>
0
</td>
<td>
:
</td>
<td>
0
</td>
<td>
-1
</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>jquery实现倒计时效果</title>
<script type="text/javascript" src="jq/jquery.js"></script>
<script type="text/javascript">
var min , minTxt; //记录分
var secDecade , secDecadeTxt; //记录秒的十位
var secUnit , secUnitTxt; //记录秒的个位
var MAXMIN = 5; //记录最大限时分
var minSwitch = false; //秒的十位和分是否开始记录的开关
$(document).ready(function() {
//初始化分、秒的十位、秒的个位
minTxt = $("table tr td:eq(0)");
secDecadeTxt = $("table tr td:eq(2)");
secUnitTxt = $("table tr td:eq(3)");
min = parseInt(minTxt.html());
secDecade = parseInt(secDecadeTxt.html());
secUnit = parseInt(secUnitTxt.html());
refresh();//调用refresh函数
});
function refresh() {
//如果分小于5，则递归调用refresh函数
if (min < MAXMIN) {
secUnit = ++secUnit % 10;
secUnitTxt.html(secUnit);//显示秒的个位
if (minSwitch && secUnit == 0) {
secDecade = ++secDecade % 6;
secDecadeTxt.html(secDecade);//显示秒的十位
if (secDecade == 0)
minTxt.html(++min);//显示分
}
minSwitch = true;//由于记录秒的个位即secUnit初始值为-1，所以第一秒后不 必将秒的十位自增，第二秒开始将此开关打开
setTimeout("refresh()", 1000);//每1秒刷新一次数据
}
}
</script>
</head>
<body>
<table>
<tr>
<td>
0
</td>
<td>
:
</td>
<td>
0
</td>
<td>
-1
</td>
</tr>
</table>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
