兼容ie的活动倒计时

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2014-02-08 13:15:40　-　阅:　-　评:0　-　积分:0

关于倒计时的代码，网上一搜索，结果是铺天盖地数不胜数。但是找了很久，大多都是js写的，结果都不是自己想要的。于是又搜索了下一些参数，然后捣鼓捣鼓，终于出结果了。之前在网上找的有的不兼容ie，在ie下不能正常显示出来，这个是时间的格式不同而已。就如同部分网站上面的时间仍然是“114年xx月xx日一样”，这是因为使用的是“getYear()”来获取年份所致，更换成“getFullYear()即可。”先放一张洒家做的最终效果图：

好了，该上源码了：

css样式：

*{margin:0; padding:0;}
.clearfix:before,.clearfix:after {display:table;content:"";line-height:0;}
.clearfix:after{clear:both;}
.ylsj-wrap{height:28px;overflow:hidden;margin-top:5px;}
.ylsj-title{text-align:center;background:#000;color:#fff;height:28px;line-height:28px;}
.ylsj-title2{background:#999;}
.w{width:100%;}
.w pre{float:left;background:#e0e0e0; text-align:left; color:#000;margin:10px auto;height:20px; line-height:20px; width:49%;margin-left:10px;}
p{background:#e0e0e0; text-align:left;color:#000;margin:10px auto;height:20px;line-height:20px;}
.w ol{width:44%; padding-left:30px; float:left;}
.w ol li{border-left:3px solid #0F0;width:100%; background:#dedede;}

jq代码（部分参数均未用到，在这里列出是为了便于浏览时知道对应的含义，截取时可对应省略）：

　function shua(){
　   /*倒计时*/
　　var szsj="2/14/2014 2:13:14";              //设置活动时间
　　//var hdsj=new Date("9/19/2013 19:45:23"); //设置活动时间2
　　var hdsj=new Date(szsj);
　　var hqhdsj=hdsj.getTime();               //获取活动时间毫秒
　　var nt=new Date().getTime();             //现在时间毫秒
　　var cha=(hqhdsj-nt)/1000;                ///时间差
　　var fen=Math.floor(cha/60);               ///分
　　var shi=Math.floor(fen/60);               ///时
　　var tian=Math.floor(shi/24);              ///天
　　/*样式1设置*/
　　var ymiao=Math.floor(cha%60);             ///无天显示秒
　　var yfen=fen%60;                          ///无天显示分
　　var yshi=shi%60;                          ///无天显示时
　　/*样式2设置*/
　　var shi2=Math.floor(shi%24);              ///有天显示时
　　/*判断活动时间是否已经过期*/
　　if(tian<0){tian="00";shi="00";yshi="00";shi2="00";fen="00";yfen="00";cha="00";ymiao="00";
　　//alert("活动已经结束");
　　}
　　/*判断时间大于0小于10时前面自动+0*/
　　if(ymiao<10){ymiao="0"+ymiao}
　　if(yfen<10){yfen="0"+yfen}
　　if(yshi<10){yshi="0"+yshi}
　　if(fen<10){fen="0"+fen}
　　if(shi<10){shi="0"+shi}
　　if(tian<10){tian="0"+tian}
　　if(shi2<10){shi2="0"+shi2}
　　/*输出显示结果*/
　　$(".sj").html("设置活动时间  :"+   szsj);
　　$(".style").html("【样式0（显示全部）】：  "+shi+"小时; "+fen+"分钟; "+ymiao+"秒;  "+cha+"毫秒");
　　$(".style1").html("【样式1（显示天数）】: "+tian+"天 "+shi2+"小时 "+yfen+"分 "+ymiao+"秒");
　　$(".style2").html("【样式2（不显示天数）】: "+shi+"小时 "+yfen+"分 "+ymiao+"秒");
　　$(".style3").html("【样式3（电子计时器,只能显示24小时内的时间，天数在此省略）】: "+shi2+":"+yfen+":"+ymiao);
　　setTimeout(shua,1000);
　　}
　　$(function(){
　　var mydate=new Date();
　　var ye=mydate.getYear();
　　var fy=mydate.getFullYear();
　　var m=mydate.getMonth()+1;
　　var date=mydate.getDate();
　　var day=mydate.getDay();
　　var time=mydate.getTime();
　　var h=mydate.getHours();
　　var mi=mydate.getMinutes();
　　var se=mydate.getSeconds();
　　var mill=mydate.getMilliseconds();
　　var tim=mydate.getTimezoneOffset();
　　var ud=mydate.getUTCDate();
　　var ud2=mydate.getUTCDay();
　　var uf=mydate.getUTCFullYear();
　　var uh=mydate.getUTCHours();
　　var um=mydate.getUTCMilliseconds();
　　var um2=mydate.getUTCMinutes();
　　var um3=mydate.getUTCMonth();
　　var us=mydate.getUTCSeconds();
　　var riqi=mydate.toDateString();
　　var tg=mydate.toGMTString();
　　var tld=mydate.toLocaleDateString();
　　var tls=mydate.toLocaleString();
　　var tlt=mydate.toLocaleTimeString();
　　//var ts2=mydate.toSource();
　　var tsr=mydate.toString();
　　var tts=mydate.toTimeString();
　　var tus=mydate.toUTCString();
　　/*判断日期小于10前面+0*/
　　/*if(h<10){h="0"+h}
　　if(mi<10){mi="0"+mi}
　　if(se<10){se="0"+se}
　　if(date<10){date="0"+date}
　　if(m<10){m="0"+m}
　　$(".style4").html("【样式4（正计时，显示当前时间，待完善！）】   "+h+":"+mi+":"+se+"          "+date+"/"+m+"/"+fy);*/
　　$(".d1").html("new Date()             :"+mydate);
　　$(".d2").append(ye+" ----获取当前年份(2位)");
　　$(".d3").append(fy+" ----获取完整的年份(4位,1970-????)");
　　$(".d4").append(m+" -----获取当前月份(0-11,0代表1月)?");
　　$(".d5").append(date+" ----获取当前日(1-31)");
　　$(".d6").append(day+" ----获取当前星期X(0-6,0代表星期天)");
　　$(".d7").append(time+" ----获取当前时间(从1970.1.1开始的毫秒数）");
　　$(".d8").append(h+" -----获取当前小时数(0-23)");
　　$(".d9").append(mi+" -----获取当前分钟数(0-59)");
　　$(".d10").append(se+" -----获取当前秒数(0-59)");
　　$(".d11").append(mill+" -----获取当前毫秒数(0-999)");
　　$(".d12").append(tim+" -------  ");
　　$(".d13").append(ud+" -------  ");
　　$(".d14").append(ud2+" -------  ");
　　$(".d15").append(uf+" -------  ");
　　$(".d16").append(uh+" -------  ");
　　$(".d17").append(um+" -------  ");
　　$(".d18").append(um2+" -------  ");
　　$(".d19").append(um3+" -------  ");
　　$(".d20").append(us+" -------  ");
　　$(".d21").append(riqi+" -------  ");
　　$(".d22").append(tg+" -------  ");
　　$(".d23").append(tld+" -------  ");
　　$(".d24").append(tls+" -------  ");
　　$(".d25").append(tlt+" -------  ");
　　//$(".d26").html(mydate.toString()+" -------  ");
　　$(".d27").append(tsr+" -------  ");
　　$(".d28").append(tts+" -------  ");
　　$(".d29").append(tus+" -------  ");
　　//1天=24小时=24*60分=24*60*60秒   --1440分  ---86400秒
　　//1年=365天=365*24小时=8760小时=525600分=31536000秒
　　$(".ylsj-title").toggle(function(){
　　var $wg=$(this).siblings(".w").height()+50;
　　$(this).parent(".ylsj-wrap").animate({"height":$wg+"px"},500);
　　$(this).text("隐藏参数");
　　},function(){
　　$(this).parent(".ylsj-wrap").animate({"height":28+"px"},500);
　　$(this).text("显示参数");
　　});
　　shua();
　});

html模块内容：

在线演示<div class="ylsj-wrap">
　<div class="ylsj-title">显示参数</div>
　　<div class="w clearfix">
　　   <pre class="d1">new Date()             :</pre>
　   　<pre class="d2">getYear()              :</pre>
　　   <pre class="d3">getFullYear()          :</pre>
　　   <pre class="d4">getMonth()             :</pre>
　　   <pre class="d5">getDate()              :</pre>
　   　<pre class="d6">getDay()               :</pre>
　   　<pre class="d7">getTime()              :</pre>
　   　<pre class="d8">getHours()             :</pre>
　   　<pre class="d9">getMinutes()           :</pre>
　   　<pre class="d10">getSeconds()          :</pre>
　　   <pre class="d11">getMilliseconds()     :</pre>
　   　<pre class="d12">getTimezoneOffset()   :</pre>
　   　<pre class="d13">getUTCDate()          :</pre>
　   　<pre class="d14">getUTCDay()           :</pre>
　   　<pre class="d15">getUTCFullYear()      :</pre>
　   　<pre class="d16">getUTCHours()         :</pre>
　   　<pre class="d17">getUTCMilliseconds()  :</pre>
　   　<pre class="d18">getUTCMinutes         :</pre>
　   　<pre class="d19">getUTCMonth()         :</pre>
　   　<pre class="d20">getUTCSeconds()       :</pre>
　   　<pre class="d21">toDateString()        :</pre>
　   　<pre class="d22">toGMTString()         :</pre>
　   　<pre class="d23">toLocaleDateString()  :</pre>
　   　<pre class="d24">toLocaleString()      :</pre>
　   　<pre class="d25">toLocaleTimeString()  :</pre>
　   　<pre class="d26">toSource()            :</pre>
　   　<pre class="d27">toString()            :</pre>
　   　<pre class="d28">toTimeString()        :</pre>
　   　<pre class="d29">toUTCString()         :</pre>
　　</div>
　</div>
</div>
<div class="ylsj-wrap">
　<!--月份+星期-->
　<div class="ylsj-title ylsj-title2">显示参数</div>
　　<div class="w clearfix">
　   　<ol>
　      　<li>一月: January</li>
　　      <li>二月：February</li>　      　
<li>三月：March</li>
　      　<li>四月：April</li>
　　<li>五月：May </li>
　　<li>六月：June </li>
　      　<li>七月：July</li>
　      　<li>八月：August </li>
　      　<li>九月：September </li>
　      　<li>十月：October </li>
　      　<li>十一月：November</li>
　      　<li>十二月：December</li>
　　   </ol>
　　   <ol>
　　      <li>星期一：Monday</li>
　      　<li>星期二：Tuesday</li>
　      　<li>星期三：Wednesday</li>
　      　<li>星期四：Thursday</li>
　      　<li>星期五：Friday</li>
　      　<li>星期六：Saturday</li>
　      　<li>星期日：Sunday</li>
　   　</ol>
　　</div>
　</div>
</div>
<p class="sj"> </p>
<p class="style"> </p>
<p class="style1"> </p>
<p class="style2"> </p>
<p class="style3"> </p>
<!--p class="style4"> </p-->

点此下载→→【代码】兼容ie的活动倒计时.zip　　　

注：本文预期效果的思路与方法均为个人观点，不代表大众，准确性不做保证，以实现最终效果为标准！代码仅供读者参考。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2014-02-08/148.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！