现在的位置: 首页 > 网文分享 > 电脑应用 > 正文
JS 倒计时代码分享
2012年08月17日 电脑应用 ⁄ 共 1870字 评论数 44 ⁄ 被围观 5,716+

昨天雷兄不仅带来了小米二代(M2),还有第一代小米的升级版(1S),感觉有点水果味哈。额,这不是今天的重点,今天的重点是分享两款简单实用的 (Javascript)JS 代码实现的网页倒计时代码。为什么和小米扯上关系呢,因为小米之前的主页上便有昨天下午两点半的一个倒计时效果。所以就想模仿一个,原以为可以直接拿过来用,可惜不行,所以只好另行寻觅。虽然网上关于倒计时的代码相当多,但多数都是针对整个网页实现的。也就是说首先要在 header 里添加相关的 JS 代码,然后再在相应的 body 处添加 div+css 语句,最后才能在网页上看到效果。但对于 WordPress 后台写文章的话,显然不适合此法,因为看不到效果,起不了作用。

不过功夫不负有心人,终于找到两个可以直接放入编辑框的倒计时代码,与大家分享下。

一、简单的倒计时

内容简单,实现的效果也简单,只有天数的倒计时。

<script language="JavaScript">
var urodz= new Date("10/1/2012");
var s="今天距十一国庆节";
var now = new Date();
var ile = urodz.getTime() - now.getTime();
var dni = Math.floor(ile / (1000 * 60 * 60 * 24));
if (dni > 1)
document.write(""+s+"还有"+dni +"天")
else if (dni == 1)
document.write("只有2天啦!")
else if (dni == 0)
document.write("只有1天啦!")
else
document.write("好象已经过了哦!");
</script>

效果如下:

二、可以显示天、时、分、秒的倒计时

相对复杂,但可以显示倒计的天、时、分、秒,比较实用。

今天距2012年10月1日国庆节还有:<span id=span_dt_dt></span>
<script language=javascript> 
<!-- 
//document.write(""); 
function show_date_time(){ 
window.setTimeout("show_date_time()", 1000); 
BirthDay=new Date("10/01/2012 00:00:00");//这个日期是可以修改的 
today=new Date(); 
timeold=(BirthDay.getTime()-today.getTime()); 
sectimeold=timeold/1000 
secondsold=Math.floor(sectimeold); 
msPerDay=24*60*60*1000 
e_daysold=timeold/msPerDay 
daysold=Math.floor(e_daysold); 
e_hrsold=(e_daysold-daysold)*24; 
hrsold=Math.floor(e_hrsold); 
e_minsold=(e_hrsold-hrsold)*60; 
minsold=Math.floor((e_hrsold-hrsold)*60); 
seconds=Math.floor((e_minsold-minsold)*60); 
span_dt_dt.innerHTML="<font color=ff0000>"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒"+"</font>" ; 
} 
show_date_time(); 
//--> 
</script>

效果如下(额,经测试发现,在 chrome 及 ie6 下均显示正常,不知为何在 firefox 下竟不能正常显示,怪了。2012年8月17日12:30分更新。):

今天距2012年10月1日国庆节还有:



目前有 44 条留言 其中:访客:44 条, 博主:0 条

  1. 90后奋斗博客 : 2012年08月19日14:46:39  21楼

    好东西,多谢分享!


    • 管理员
      admin : 2012年08月20日14:15:23  地下1层

      欢迎捧场 常来

  2. Miracle : 2012年08月21日13:41:46  22楼

    好东西啊~果断copy!


    • 管理员
      admin : 2012年08月21日14:45:21  地下1层

      额 备用

  3. firefly : 2012年08月21日14:33:16  23楼

    你的博,我早收藏了,内容很有价值,学习一个


    • 管理员
      admin : 2012年08月21日14:45:41  地下1层

      额 多谢 欢迎常来


如果觉得文章或者网站对您有帮助请点击 向TA付款 捐赠作者或者点击下面的分享按钮支持作者

更多

给我留言

留言无头像?

无觅相关文章插件,快速提升流量

×