当前位置: 首页 > 编程笔记 >

JS倒计时实例_天时分秒

屈畅
2023-03-14
本文向大家介绍JS倒计时实例_天时分秒,包括了JS倒计时实例_天时分秒的使用技巧和注意事项,需要的朋友参考一下

HTML代码:

<div id="times_wrap" class="time_num">
 距离结束时间:
 <div class="time_w">
  <b id="times_d" class="time"> </b>天
  <b id="times_h" class="time"> </b>时
  <b id="times_m" class="time"> </b>分
  <b id="times_s" class="time"> </b>秒
 </div>
</div>

JavaScript代码:

<script type="text/javascript">
setTimeout("show_time()",1000);
var time_wrap = document.getElementByIdx_x("times_wrap");
var time_d = document.getElementByIdx_x("times_d");
var time_h = document.getElementByIdx_x("times_h");
var time_m = document.getElementByIdx_x("times_m");
var time_s = document.getElementByIdx_x("times_s");

var time_end = new Date("2012/10/29 08:00:00"); // 设定结束时间
time_end = time_end.getTime();

function show_time(){
 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)
 
  // 时分秒为单数时、前面加零站位
  if(int_hour < 10)
  int_hour = "0" + int_hour;
  if(int_minute < 10)
  int_minute = "0" + int_minute;
  if(int_second < 10)
  int_second = "0" + int_second;
  
  // 显示时间
  time_d.innerHTML = int_day;
  time_h.innerHTML = int_hour;
  time_m.innerHTML = int_minute;
  time_s.innerHTML = int_second;
  
  setTimeout("show_time()",1000);
 }else{
  time_d.innerHTML = time_d.innerHTML;
  time_h.innerHTML = time_h.innerHTML;
  time_m.innerHTML = time_m.innerHTML;
  time_s.innerHTML = time_s.innerHTML;
 
  // clearTimeout(timerID)
 }
};
</script>

以上这篇JS倒计时实例_天时分秒就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍js倒计时抢购实例,包括了js倒计时抢购实例的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了JavaScript实现限时抢购,供大家参考,具体代码如下 运行效果图: 具体代码如下: 更多关于倒计时的文章请查看专题:《倒计时功能》 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍js倒计时显示实例,包括了js倒计时显示实例的使用技巧和注意事项,需要的朋友参考一下 话不多说,请看实例代码 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持呐喊教程!

  • 本文向大家介绍js实现的倒计时按钮实例,包括了js实现的倒计时按钮实例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js实现的倒计时按钮。分享给大家供大家参考。具体分析如下: 效果图如下: 具体代码如下: 这里只是一个小例子,在实际运用中,可能需要记录各种时间,考虑到页面刷新的变化,需要用cookie来进行数据存储等等! 希望本文所述对大家的javascript程序设计有所帮助。

  • 本文向大家介绍JS实现的倒计时效果实例(2则实例),包括了JS实现的倒计时效果实例(2则实例)的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS实现的倒计时效果。分享给大家供大家参考,具体如下: 我们经常会看到某些网站在注册的时候喜欢搞个按钮倒计时的效果,就是多少秒之后注册这个按钮才可以点击,其目的就是强迫你去看他的注册注意事项,这是一个很实用的效果;另外当我们进行在线考试的时候也必定会

  • 本文向大家介绍Andorid实现精确到天时分秒的抢购倒计时,包括了Andorid实现精确到天时分秒的抢购倒计时的使用技巧和注意事项,需要的朋友参考一下 今天项目用到了抢购时倒计时的功能 ,今天找了好多哥们,也百度了好多,但是没有自己喜欢并且能消化的。好不容易找到了一个能容易看懂的,然而又不符合我想要的需求,所以自己搞一下。不知道是否简单,但是最起码是项目的功能可以实现。(一下午,没白费。开心) 直

  • 本文向大家介绍基于JS实现的倒计时程序实例,包括了基于JS实现的倒计时程序实例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了基于JS实现的倒计时程序。分享给大家供大家参考。具体实现方法如下: 希望本文所述对大家的javascript程序设计有所帮助。