这篇文章主要为大家详细介绍了基于 Javascript 倒计时效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
Index.html
- <!DOCTYPE html >
- <html>
- <head>
- <title>倒计时</title>
- <style type="text/CSS">
- .colockbox
- {
- width:500px;
- height:20px;
- color:#000000;
- }
- .colockbox span
- {
- float:left;display:block;
- width:20px;
- height:20px;
- line-height:20px;
- font-size:18px;
- font-weight:bold;
- text-align:center;
- color:#ffffff;
- text-indent:3px;
- }
- .square
- {
- float:left;
- width:26px;
- height:20px;
- background-color:#222222;
- border-radius:3px;
- padding:0px;
- margin-right:5px;
- }
- </style>
- <script type="text/javascript" src="jquery-1.11.3.js"></script>
- <script type="text/javascript">
- $(function(){
- countDown("2016/12/25 23:00:00","#colockbox1");
- });
- function countDown(time,id){
- var day_elem = $(id).find('.day');
- var hour_elem = $(id).find('.hour');
- var minute_elem = $(id).find('.minute');
- var second_elem = $(id).find('.second');
- var end_time = new Date(time).getTime(),//月份是实际月份-1
- sys_second = (end_time-new Date().getTime())/1000;
- var timer = setInterval(function(){
- if (sys_second > 1) {
- sys_second -= 1;
- var day = Math.floor((sys_second / 3600) / 24);
- var hour = Math.floor((sys_second / 3600) % 24);
- var minute = Math.floor((sys_second / 60) % 60);
- var second = Math.floor(sys_second % 60);
- day_elem && $(day_elem).text(day);//计算天
- $(hour_elem).text(hour<10?"0"+hour:hour);//计算小时
- $(minute_elem).text(minute<10?"0"+minute:minute);//计算分钟
- $(second_elem).text(second<10?"0"+second:second);//计算秒杀
- } else {
- clearInterval(timer);
- }
- }, 1000);
- }
- </script>
- </head>
- <body>
- <div class="colockbox" id="colockbox1">
- <div class="square">
- <span class="day">00</span>
- </div>
- <span style="color:gray;font-size:15px; float:left;">天</span>
- <div class="square">
- <span class="hour">00</span>
- </div>
- <span style="color:gray;font-size:15px; float:left;">时</span>
- <div class="square">
- <span class="minute">00</span>
- </div>
- <span style="color:gray;font-size:15px; float:left;">分</span>
- <div class="square">
- <span class="second">00</span>
- </div>
- <span style="color:gray;font-size:15px; float:left;">秒</span>
- </div>
- </body>
- </html>
运行结果如图:
来源: http://www.phperz.com/article/17/0610/329272.html