网站首页 Html5模版

js实现倒计时与网站运行时间特效

发布时间：2016-01-31编辑：余斗文件大小：35KB阅读：(0)字号：大中小

　　给博客底部加了一个统计网站运行时间的计时器，突然发现用js实现类似倒计时功能的方法不止一种，余斗目前已知的就有三种方法：

　　一、网站运行时间统计

　　显示格式：已运行0 年 1 天 0 小时 4 分钟 35 秒(秒为跑秒)

　　代码为：

	
	<span id="sitetime"></span>

	<script language=javascript>

	function siteTime(){

	window.setTimeout("siteTime()", 1000);

	var seconds = 1000

	var minutes = seconds * 60

	var hours = minutes * 60

	var days = hours * 24

	var years = days * 365

	var today = new Date()

	var todayYear = today.getFullYear()

	var todayMonth = today.getMonth()

	var todayDate = today.getDate()

	var todayHour = today.getHours()

	var todayMinute = today.getMinutes()

	var todaySecond = today.getSeconds()

	/* Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳)

	year - 作为date对象的年份，为4位年份值

	month - 0-11之间的整数，做为date对象的月份

	day - 1-31之间的整数，做为date对象的天数

	hours - 0(午夜24点)-23之间的整数，做为date对象的小时数

	minutes - 0-59之间的整数，做为date对象的分钟数

	seconds - 0-59之间的整数，做为date对象的秒数

	microseconds - 0-999之间的整数，做为date对象的毫秒数 */

	var t1 = Date.UTC(2014,0,14,11,19,00)

	var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond)

	var diff = t2-t1

	var diffYears = Math.floor(diff/years)

	var diffDays = Math.floor((diff/days)-diffYears*365)

	var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours)

	var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes)

	var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds)

	document.getElementById("sitetime").innerHTML=" 已运行"+diffYears+" 年 "+diffDays+" 天 "+diffHours+" 小时 "+diffMinutes+" 分钟 "+diffSeconds+" 秒"

	}

	siteTime()

	</script>

　　二、jQuery实现倒计时功能

　　jQuery.countdown插件实现，需要加载jQuery相关文件，显示格式：50 周 01 天 07 小时 18 分 41 秒(秒为跑秒)

　　一个页面可以有多个倒计时实例，可以停止和开始，它没有提供太多的功能，但时间格式和输出的尺寸都可以自定义。

　　代码为：

	
	<div id="getting-started"></div>

	<script type="text/javascript" src="js/jquery.min.js"></script>

	<script type="text/javascript" src="js/jquery.countdown.js"></script>

	<script type="text/javascript">

	    $('#getting-started').countdown('2051/01/31 23:05', function(event) {

	        $(this).html(event.strftime('倒计时：%w 周 %d 天 %H:%M:%S'));

	    });

	</script>

　　注意：如果需要一共还有多少天数用%D，参数说明：

	
	Y: "years"

	m: "months"

	w: "weeks"

	d: "days"

	D: "totalDays"

	H: "hours"

	M: "minutes"

	S: "seconds"

　　三、js实现倒计时功能

　　显示格式：距离结束时间还有：00天05小时25分30秒(秒为跑秒)

　　代码为：

	
	<div id="time" class="time"></div>

	<script language=javascript>

	function show_date_time(){

	  window.setTimeout("show_date_time()", 1000);

	  target=new Date(2014,0,15,17,0,0); //注意：表示月份的参数介于 0 到 11 之间。也就是说，如果希望把月设置为8月，则参数应该是7。

	  today=new Date();

	  timeold=(target.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);

	    if (daysold<0) {

	    document.getElementById("time").innerHTML="逾期,倒计时已经失效";

	}

	  else{

	  if (daysold<10) {daysold="0"+daysold}

	  if (hrsold<10) {hrsold="0"+hrsold}

	  if (minsold<10) {minsold="0"+minsold}

	  if (seconds<10) {seconds="0"+seconds}

	  if (daysold>0) {

	    document.getElementById("time").innerHTML="距离结束时间还有："+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";

	  }

	  else

	    document.getElementById("time").innerHTML="<font color=red>距离结束时间还有："+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒</font>"; //结束时间小于1天，字体呈红色提醒

	}

	}

	show_date_time();

	</script>