倒计时功能精确到毫秒代码,JS代码库,德仔网

代码语言

代码分类

【JS】倒计时功能精确到毫秒

作者:evilgod528 / 发布于2015/2/15/ 544


	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>jquery数字读秒的倒计时代码 -</title>
	<style type="text/css">
	h1{font-family:"微软雅黑";font-size:40px;margin:20px 0;;border-bottom:solid 1px #ccc;padding-bottom:20px;letter-spacing:2px;}
	
	.time-item strong{background:#C71C60;color:#fff;line-height:49px;font-size:36px;font-family:Arial;padding:0 10px;margin-right:10px;border-radius:5px;box-shadow:1px 1px 3px rgba(0,0,0,0.2);}
	#day_show{float:left;line-height:49px;color:#c71c60;font-size:32px;margin:0 10px;font-family:Arial, Helvetica, sans-serif;}
	.item-title .unit{background:none;line-height:49px;font-size:24px;padding:0 10px;float:left;}
	</style>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
	
	$(function(){
	 countDown("2015/6/7 00:00:00","#demo01 .day","#demo01 .hour","#demo01 .minute","#demo01 .second");
	
	});
	
	function countDown(time,day_elem,hour_elem,minute_elem,second_elem){
	 //if(typeof end_time == "string")
	 var end_time = new Date(time).getTime(),//月份是实际月份-1
	 //current_time = new Date().getTime(),
	 sys_second = (end_time-new Date().getTime());
	 var timer = setInterval(function(){
	 if (sys_second > 0) {
	 sys_second -= 10;
	 var day = Math.floor((sys_second /1000/ 3600) / 24);
	 var hour = Math.floor((sys_second /1000/ 3600) % 24);
	 var minute = Math.floor((sys_second /1000/ 60) % 60);
	 var second = Math.floor(sys_second/1000 % 60);
	 var haomiao = Math.floor(sys_second%1000);
	 day_elem && $(day_elem).text(day+'天');//计算天
	 $(hour_elem).text(hour<10?"0"+hour:hour+'时');//计算小时
	 $(minute_elem).text(minute<10?"0"+minute:minute+'分');//计算分
	 $(second_elem).text(second<10?"0"+second:second+'秒');// 计算秒
	 $("#haomiao").text(haomiao);// 计算秒
	 } else {
	 clearInterval(timer);
	 }
	 }, 10);
	}
	</script>
	<div align="center" style="width:516px; margin:0 auto">
	<h1>网页上的倒计时</h1>
	
	<div class="time-item" id="demo01">
	 <strong id="day" class="day">0天</strong>
	 <strong id="hour" class="hour">0时</strong>
	 <strong id="minute" class="minute">0分</strong>
	 <strong id="second" class="second">0秒</strong>
	 <strong id="haomiao" class="second">0</strong>毫秒
	</div><!--倒计时模块-->
	</div>
	<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
	适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.
	</div>
	</body>
	</html>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　倒计时　

同语言下

可能有用的

evilgod528贡献的其它代码(3)