CSS3+javascript实现“迅雷BOLT界面引擎”页面倒计时效果

今天逛新闻的时候发现迅雷BOLT界面引擎将开放了,打开发现页面有一个不错的倒计时效果。字体和背景都是用图片实现的,于是我就想用CSS3来实现这一效果:

第一步:CSS3实现背景框

HTML代码

CSS代码

.timelist li{width:100px; padding:10px 0;text-align:center;float:left;margin-right:30px; background:rgb(220,220,220);border-radius:5px; box-shadow:inset 3px 3px 3px rgba(0,0,0,.2); color:rgb(175,175,175);min-height:70px;}
.timelist b{width:40px;display:inline-block;}

效果

第二步:CSS3字体样式

CSS代码

.timelist li{font-size:60px;text-shadow:1px 1px 1px #FFF,-1px -1px 1px #333; font-family:Arial, Helvetica, sans-serif; font-weight:100;}
}

效果

  • 04
  • 00
  • 00
  • 00

第三步:js倒计时效果

源代码

  function showtime() {   
	  var today = new Date(),
	  hour = today.getHours(),
	  minute = today.getMinutes(),
	  date = today.getDate(),
	  second = today.getSeconds(),
	  doc = document,
	  tmp;	     	  
	  date = 18 - date;
	  hour = 23 - hour+8; //3.18 8点
	  if(hour>23) {
	  	date++;
	  	hour %= 23;
	  }
	  minute = 59 - minute;
	  second = 59 - second;
	  if (second<0) {   
		  second=60+second;   
		  minute=minute-1;   
	  }   

	  if (minute<0) {    
		  minute=60+minute;   
		  hour=hour-1;   
	  }   

	  if (hour<0) {   
		  hour=24+hour;   
		  date=date-1;   
	  }

	  if (date<0) date=31+date;
	  tmp = parseInt(date/10);
	  doc.getElementById("day1").innerHTML = tmp;
	  tmp = parseInt(date%10);
	  doc.getElementById("day2").innerHTML = tmp;
	  tmp = parseInt(hour/10);
	  doc.getElementById("hour1").innerHTML = tmp;
	  tmp = parseInt(hour%10);	
	  doc.getElementById("hour2").innerHTML = tmp;
	  tmp = parseInt(minute/10);
	  doc.getElementById("minute1").innerHTML = tmp;
	  tmp = parseInt(minute%10);
	  doc.getElementById("minute2").innerHTML = tmp;
	  tmp = parseInt(second/10);
	  doc.getElementById("second1").innerHTML = tmp;
	  tmp = parseInt(second%10);
	  doc.getElementById("second2").innerHTML = tmp;	     
  }
  showtime();
  setInterval("showtime()",1000); 

最终效果

“CSS3+javascript实现“迅雷BOLT界面引擎”页面倒计时效果”的2个回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注