jquery倒计时效果插件
这个案例是使用jquery实现的一个比较常见的倒计时效果，现实中我们经常会在购物网站上看到某商品定时开抢或某活动开始等，基本都是这么实现的，下面首先看一下这个倒计时效果图！
下面是具体的实现代码：
<html xmlns="http://www.phpernote.com/php-template-framework/850.html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery倒计时效果插件</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
body{font:12px/180%;background:#fff; text-align:center;}
.timerbg{height:60px;width:980px;margin:20px auto;}
.timerbg div{font-size:20px;margin:24px auto;text-align:left;font-family:"微软雅黑","宋体";font-weight:800;}
.timerbg div span{font-size:28px;margin:0 13px;color:#D6000F;font-family:Arial;font-weight:800;}
#daoend{margin:24px 0 0 0;width:324px;color:#D6000F;font-size:22px;}
</style>
<script type="text/javascript" src="http://www.phpernote.com/js/jquery.min.js"></script>
</head>
<body>
<div class="timerbg">
<div id="daoend" style="display:none;">如果还没有世界末日，说明预言又失败了。</div>
<div id="dao">世界末日倒计时：<span id="RemainD"> </span>天<span id="RemainH"> </span>时<span id="RemainM"> </span>分<span id="RemainS"> </span>秒</div>
</div>
<div><a href="http://www.phpernote.com/">php程序员的笔记</a> 网站倾情奉献！</div>
<script type="text/javascript">
var startTime=new Date();
startTime.setFullYear(2213,12,21);
//注意：setFullYear函数的第二个参数，代表月份，其取值范围：0-11，因此如果是：2013年7月20日，则这里的参数应该是：2013,6,20
startTime.setHours(23);
startTime.setMinutes(59);
startTime.setSeconds(59);
startTime.setMilliseconds(999);
var EndTime=startTime.getTime();
function GetRTime(){
var NowTime=new Date();
var nMS=EndTime-NowTime.getTime();
var nD=Math.floor(nMS/(1000*60*60*24));
var nH=Math.floor(nMS/(1000*60*60))%24;
var nM=Math.floor(nMS/(1000*60))%60;
var nS=Math.floor(nMS/1000)%60;
if (nMS<0){
$("#dao").hide();
$("#daoend").show();
}else{
$("#dao").show();
$("#daoend").hide();
$("#RemainD").text(nD);
$("#RemainH").text(nH);
$("#RemainM").text(nM);
$("#RemainS").text(nS);
}
}
$(document).ready(function(){
var timer_rt=window.setInterval("GetRTime()",1000);
});
</script>
</body>
</html>转载请注明出处：php程序员的笔记
最后修改时间：2013年07月20日 18时14分 文章来源：-わ千与千寻
下一篇：$.ajax用法与举例