JavaScript 逼真图片倒计时实现代码

发布于 2017-04-25 08:27:48 | 81 次阅读 | 评论: 0 | 来源: 网友投递

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。

一般的倒计时代码都是文字版本的，这个是图片格式的，更漂亮的，图片大家可以自己做。主要是参考实现方法。
逼真的Js图片倒计时，显示剩余小时、分钟、秒数。仅用了一张图片就搞定了，与纯网页版的不太一样哦。现在用图片模拟LED的效果，还真不错，希望大家彻底喜欢哦。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>逼真图片倒计时</title> 
<meta http-equiv="content-type" content="text/html;charset=gb2312"> 
<style type="text/css"> 
.time{width:200px;height:25px;border:1px red solid;overflow:hidden;} 
.time span{float:left;line-height:25px;height:25px;overflow:hidden;} 
.time span.danwei{padding:0 1px;} 
.clear{height:0;clear:both;overflow:hidden;} 
</style> 
</head> 
<body> 
距离发射升空还有： 
<div> 
<img class="img-responsive" src="http://img.phperz.com/data/img/20170322_18/1490190655_3286.jpg"> 
<img class="img-responsive" src="http://img.phperz.com/data/img/20170322_2/1490190656_2133.jpg"> 
<img class="img-responsive" src="http://img.phperz.com/data/img/20170322_11/1490190657_6172.jpg"> 
： 
<img class="img-responsive" src="http://img.phperz.com/data/img/20170322_4/1490190658_7310.jpg"> 
<img class="img-responsive" src="http://img.phperz.com/data/img/20170322_18/1490190659_4953.jpg"> 
： 
<img class="img-responsive" src="http://img.phperz.com/data/img/20170322_13/1490190661_7713.jpg"> 
<img class="img-responsive" src="http://img.phperz.com/data/img/20170322_9/1490190662_3387.jpg"> 
<br class="clear"> 
</div> 
<script type="text/javascript"> 
var overa; 
overa = new Date(2010, 10, 01, 00, 00);///第数日时间当时间超过999小时 
var localNow = new Date(); 
function clock1(){ 
var local = new Date(); 
var intDiff = overa.getTime() - local.getTime(); 
if(intDiff <= 0){document.getElementById('time1').innerHTML = "活动已结束！";//显示活动结束 
return false;} 
var day = Math.floor(intDiff / (1000 * 60 * 60 * 24)); 
var hour = Math.floor(intDiff / (1000 * 60 * 60)) - (day * 24); 
var hour2 = Math.floor(intDiff / (1000 * 60 * 60)); 
var minute = Math.floor(intDiff / (1000 * 60)) - (day * 24 * 60) - (hour * 60); 
var second = Math.floor(intDiff / 1000) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60); 
if (hour2 <= 99) hour2 = '0' + hour2; 
if (day <= 9) day = '0' + day; 
if (hour2 <= 9) hour2 = '0' + hour2; 
if (minute <= 9) minute = '0' + minute; 
if (second <= 9) second = '0' + second; 
document.getElementById('hour_01').style.marginTop = (hour2.toString().substr(0,1)) * (-25) +'px'; 
document.getElementById('hour_02').style.marginTop = (hour2.toString().substr(1,1)) * (-25) +'px'; 
document.getElementById('hour_03').style.marginTop = (hour2.toString().substr(2,1)) * (-25) +'px'; 
document.getElementById('minute_01').style.marginTop = (minute.toString().substr(0,1)) * (-25) +'px'; 
document.getElementById('minute_02').style.marginTop = (minute.toString().substr(1,1)) * (-25) +'px'; 
document.getElementById('second_01').style.marginTop = (second.toString().substr(0,1)) * (-25) +'px'; 
document.getElementById('second_02').style.marginTop = (second.toString().substr(1,1)) * (-25) +'px'; 
setTimeout("clock1()", 1000); 
} 
clock1(); 
</script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

JavaScript 逼真图片倒计时实现代码

JavaScript客户端脚本语言

后端技术

前端技术

数据库

热门框架

常用IDE

其他