这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
逼真的 Js 图片倒计时,显示剩余小时、分钟、秒数。仅用了一张图片就搞定了,与纯网页版的不太一样哦。现在用图片模拟 LED 的效果,还真不错,希望大家彻底喜欢哦。
一般的倒计时代码都是文字版本的,这个是图片格式的,更漂亮的,图片大家可以自己做。主要是参考实现方法。
[Ctrl+A 全选 注:
- <!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>
如需引入外部 Js 需刷新才能执行
]来源: http://www.phperz.com/article/17/0425/284212.html