js倒计时

最新推荐文章于 2025-09-11 22:10:09 发布

weixin_34309435

最新推荐文章于 2025-09-11 22:10:09 发布

阅读量55

点赞数

CC 4.0 BY-SA版权

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/hehongbo/blog/688491

本文介绍了一种使用JavaScript实现的网页循环倒计时方法，通过设置特定的结束时间，可以实时更新显示剩余的天数、小时数、分钟数及秒数。当倒计时结束后，会自动重置为三天后的日期继续倒计时。

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>JS循环倒计时</title>

</head>

<body>

<div id="times_container"  style="border:1px; border-color:#999999; border-style:solid; background:#333333; color:#FFFFFF; width:500px; height:40px; line-height:40px; font-size:24px">

距离活动结束还有：
<span id="times_day"> </span>天 

<span id="times_hour"> </span>时  

<span id="times_minute"> </span>分    

<span id="second"> </span>秒   

</div>

 

<script type="text/javascript"  language="javascript">

setTimeout("count_down()",1000);//设置每一秒调用一次倒计时函数

 

//根据天，时，分，秒的ID找到相对应的元素

var time_day = document.getElementById("times_day");

var time_hour = document.getElementById("times_hour");

var time_minute = document.getElementById("times_minute");

var time_second = document.getElementById("second");

var time_end = new Date("2016/06/02 00:00:00");  // 设定活动结束结束时间

time_end = time_end.getTime();

 

//定义倒计时函数

function count_down(){ 

   var time_now = new Date();  // 获取当前时间

   time_now = time_now.getTime();

   var time_distance = time_end - time_now;  // 时间差：活动结束时间减去当前时间   

   var int_day, int_hour, int_minute, int_second;   

 if(time_distance >= 0){   

     // 相减的差数换算成天数   

     int_day = Math.floor(time_distance/86400000)

     time_distance -= int_day * 86400000; 

 

 // 相减的差数换算成小时

        int_hour = Math.floor(time_distance/3600000) 

        time_distance -= int_hour * 3600000;  

 

// 相减的差数换算成分钟   

     int_minute = Math.floor(time_distance/60000)    

    time_distance -= int_minute * 60000; 

 

 // 相减的差数换算成秒数  

      int_second = Math.floor(time_distance/1000)    

 

    // 判断小时小于10时，前面加0进行占位

        if(int_hour < 10) 

        int_hour = "0" + int_hour;  

 

// 判断分钟小于10时，前面加0进行占位      

  if(int_minute < 10)    

   int_minute = "0" + int_minute;  

 

 // 判断秒数小于10时，前面加0进行占位 

       if(int_second < 10) 

       int_second = "0" + int_second;       

 

// 显示倒计时效果       

time_day.innerHTML = int_day;

time_hour.innerHTML = int_hour; 

time_minute.innerHTML = int_minute; 

time_second.innerHTML = int_second;

setTimeout("count_down()",1000);

    }else{

//指定的结束日期结束后，往后推迟3天，或者称之为：往后加3天

//在这里可以非常灵活的设置：比如往后推迟2天或往后加2天：2*24*60*60*1000

//比如往后推迟1天或往后加1天：1*24*60*60*1000

//比如往后推迟2小时或往后加2小时：2*60*60*1000

// 比如往后推迟40分钟或往后加40分钟：40*1000这里设置根据大家需要，灵活设置。

 time_end=time_end+3*24*60*60*1000;

setTimeout("count_down()",1000); 

   }

}

</script>

</body>

</html>

转载于:https://my.oschina.net/hehongbo/blog/688491