jquery如何实现倒计时效果

我想实现这样的效果：在页面里一个div，这个div里会有一个秒表显示，就是这样。0:01，第二秒显示为0:02,这样一直显示，到5:00(5分钟的时候这个时间计数器就停止... 我想实现这样的效果：在页面里一个div，这个div里会有一个秒表显示，就是这样。0:01，第二秒显示为0:02,这样一直显示，到5:00(5分钟的时候这个时间计数器就停止了。不再继续下一秒了)。请问这个效果怎么做啊。求大侠指点。。。我这只有5分了不然全部给了。谢谢了展开

 我来答

3个回答

#热议# 生活中有哪些实用的心理学知识？

learneroner

高粉答主

推荐于2018-02-27 · 关注我不会让你失望

知道大有可为答主

回答量：1.1万

采纳率：91%

帮助的人：6488万

我也去答题访问个人页

关注

展开全部

首先获取当前时间与目标时间的时间差，然后通过定时器更新这个时间差，就实现了倒计时效果。实现上述过程需要以下两个函数：

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); 
}

观察效果

某个时刻的截图
几秒后的截图

已赞过 已踩过<

评论收起

北京勤哲软件技术

广告2024-12-02

勤哲Excel服务器软件2024，用Excel自动生成基于web，移动APP和PC的plm软件。软博会金奖产品，适合于各行各业的管理人员使用。

www.qinzhe.com

匿名用户
推荐于2017-11-25

展开全部

<!--载入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>


本回答被网友采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

匿名用户
2013-05-20

展开全部

学过循环队列和递归算法比较好理解我的代码吧。。。

<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>