基于Javascript倒计时效果

更新时间：2016年12月22日 11:46:47 作者：逆世风灵

这篇文章主要为大家详细介绍了基于Javascript倒计时效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js倒计时效果的具体代码，供大家参考，具体内容如下

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>

运行结果如图:

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

js
倒计时

斜45度寻路实现函数
没事写个寻路的，很简单，有需要的朋友可以参考下。
2009-08-08
JavaScript开发简单易懂的Svelte实现原理详解
这篇文章主要为大家介绍了JavaScript开发简单易懂的Svelte实现原理的内容详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步
2021-11-11
解决function函数内的循环变量
鼠标放到指定的行上自动弹出当前的个数，从0开始，这个功能方便我们在tab切换中定位
2008-10-10
jquery插件bootstrapValidator数据验证详解
这篇文章主要为大家详细介绍了jquery插件bootstrapValidator数据验证使用教程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11
ie 7/8不支持trim的属性的解决方案
在ie 7 8浏览器中，如果使用trim()属性去除空格的话，则会导致报错，下面有几种不错的解决方法
2014-05-05
简单了解JS打开url的方法
这篇文章主要介绍了简单了解JS打开url的方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-02-02
Bootstrap页面布局基础知识全面解析
Bootstrap作为支持响应式布局的一个前端插件，发挥着非常重要的作用，下面通过本文给大家介绍Bootstrap页面布局基础知识，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧
2016-06-06
js判断节假日实例代码
因为要做一个日历控件，遇到国家法定节假日,怎么实现此功能呢？其实实现代码很简单的。下面小编给大家分享js判断节假日实例代码，需要的朋友参考下吧
2017-12-12
JS利用prototype给类添加方法操作详解
这篇文章主要介绍了JS利用prototype给类添加方法操作,结合实例形式分析了javascript使用prototype实现给类添加方法的相关操作技巧,需要的朋友可以参考下
2019-06-06
分享两段简单的JS代码防止SQL注入
下面小编就为大家分享两段简单的JS代码防止SQL注入。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-04-04