给网站首页加倒计时

因为现在我大三下了,要考研,所以想给自己网站加一个倒计时,提醒自己考研正在一步一步接近..

其中就是简单的js,效果就类似我的网站小人下面的样式,喜欢的同学可以拿去:

<script type="text/javascript">
function NewDate(str) { 
	str = str.split('/'); 
	var date = new Date(); 
	date.setUTCFullYear(str[0], str[1] - 1, str[2]); 
	date.setUTCHours(str[3], str[4], str[5], str[6]); 
	return date; 
} 
function show_date_time(){
window.setTimeout("show_date_time()", 1000);
//BirthDay=new Date("12/24/2016 00:00:00"); //忽略这行
BirthDay=NewDate("2016/12/24/0/0/0/0");//这个改成你要的目的日期即可
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="<div style='color:black;font-size:12px;padding:5px;margin:0px;letter-spacing:4px;'><em style='font-family:haibao;'>距2017考研还有:</em></br>"+"<em style='letter-spacing:0px;color:#df846c;'>"+daysold+"</em>"+"<em style='font-family:haibao;'>天</em>"+"<em style='letter-spacing:0px;color:#df846c;'>"+hrsold+"</em>"+"<em style='font-family:haibao;'>小时</em>"+"<em style='letter-spacing:0px;color:#df846c;'>"+minsold+"</em>"+"<em style='font-family:haibao;'>分</em>"+"<em style='letter-spacing:0px;color:#df846c;'>"+seconds+"</em>"+"<em style='font-family:haibao;'>秒</em>"+"</div>"; 
}
show_date_time();
</script>

然后在html加入如下标签即可:

<span id="span_date"></span>

样式如下:

20160418113542

由于我用了@font-face字体,所以实际效果会不一样(只是字体不一样).

拓展

setUTCHours()函数用于基于UTC时间设置当前Date对象中的小时值。也就是"年月日 时分秒"中"时"的数值。setUTCHours()函数还可同时设置分钟值和秒值以及毫秒值。

// UTC是世界标准时间,而中国大陆与之的时差为8,也就是 UTC +8。下面定义一个本地时间的Date对象"2012-03-15 13:11:43"
var date = new Date(2012, 2, 15, 13, 11, 43);
document.writeln( date.toLocaleString() ); // 2012年3月15日 13:11:43
// 由于设置的是UTC时间,换算成本地时间,还要+8小时, 因此本地时间为"2012-03-15 (23+8):11:43" = "2012-03-16 07:11:43"
1、date.setUTCHours(23);
document.writeln( date.toLocaleString() ); // 2012年3月16日 7:11:43
2、date.setUTCHours(13, 20, 5);
document.writeln( date.toLocaleString() ); // 2012年3月15日 21:20:05
3、date.setUTCHours(26, -3, 100);
document.writeln( date.toLocaleString() ); // 2012年3月16日 9:58:40

以上可以对上面代码中的NewDate函数做一个解释。

标签:   |  
时间: 2016年04月18日上午11:38  |  
作者:
6 COMMENTS
  1. 2016/04/21
    成航先森

    这个挺好玩的,很俏皮~

  2. 2016/05/14
    我是从贴吧来的菜鸟

    我把大段的代码放到footer.php里前边了。 这一小段加到前边了。 不显示东西。菜鸟一只,请指教。

    • 2016/05/14
      那樊笼
      @我是从贴吧来的菜鸟 你把js和span这一段放在一起试试,都放在同一个地方
      • 2016/05/14
        我是从贴吧来的菜鸟
        @那樊笼 主题页脚 (footer.php) 都添加到这个页面了。不显示。我这么笨吗?
LEAVE A REPLY
loading
正在赶回来……