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

详解JS实现简单的时分秒倒计时代码

刘选
2023-03-14
本文向大家介绍详解JS实现简单的时分秒倒计时代码,包括了详解JS实现简单的时分秒倒计时代码的使用技巧和注意事项,需要的朋友参考一下

本文实例为大家分享了JS时分秒倒计时的实现的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js简单时分秒倒计时</title>
  <script type="text/javascript">
    function countTime() {
      //获取当前时间
      var date = new Date();
      var now = date.getTime();
      //设置截止时间
      var endDate = new Date("2016-10-22 23:23:23");
      var end = endDate.getTime();
      //时间差
      var leftTime = end-now;
      //定义变量 d,h,m,s保存倒计时的时间
      var d,h,m,s;
      if (leftTime>=0) {
        d = Math.floor(leftTime/1000/60/60/24);
        h = Math.floor(leftTime/1000/60/60%24);
        m = Math.floor(leftTime/1000/60%60);
        s = Math.floor(leftTime/1000%60);          
      }
      //将倒计时赋值到div中
      document.getElementById("_d").innerHTML = d+"天";
      document.getElementById("_h").innerHTML = h+"时";
      document.getElementById("_m").innerHTML = m+"分";
      document.getElementById("_s").innerHTML = s+"秒";
      //递归每秒调用countTime方法,显示动态时间效果
      setTimeout(countTime,1000);
 
    }
  </script>
</head >
<body onload = "countTime()">
  <div>
    <span id="_d">00</span>
    <span id="_h">00</span>
    <span id="_m">00</span>
    <span id="_s">00</span>
  </div>
</body>
</html>

代码总结:

Math.floor:返回小于等于参数的最大整数

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式

以上所述是小编给大家介绍的JS时分秒倒计时的实现详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!

 类似资料:
  • 本文向大家介绍js简单倒计时实现代码,包括了js简单倒计时实现代码的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js简单倒计时实现代码。分享给大家供大家参考,具体如下: 更多关于JavaScript相关内容可查看本站专题:《JavaScript时间与日期操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技

  • 本文向大家介绍iOS中实现简单易懂秒杀倒计时/倒计时代码,包括了iOS中实现简单易懂秒杀倒计时/倒计时代码的使用技巧和注意事项,需要的朋友参考一下 示例代码简单易懂: 以上所述是小编给大家介绍的iOS中实现简单易懂秒杀倒计时/倒计时代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持!

  • 本文向大家介绍JS倒计时实例_天时分秒,包括了JS倒计时实例_天时分秒的使用技巧和注意事项,需要的朋友参考一下 HTML代码: JavaScript代码: 以上这篇JS倒计时实例_天时分秒就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持呐喊教程。

  • 本文向大家介绍简单实现js倒计时功能,包括了简单实现js倒计时功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js倒计时的具体代码,主要使用了JS的Date对象和定时器setInterval,供大家参考,具体内容如下 更多关于倒计时的文章请查看专题:《倒计时功能》 更多JavaScript时钟特效点击查看:JavaScript时钟特效专题 以上就是本文的全部内容,希望对大家的学习

  • 本文向大家介绍js倒计时简单实现方法,包括了js倒计时简单实现方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js倒计时简单实现方法的代码,分享给大家供大家参考,具体如下: 如果想显示倒计时效果,可以使用如下代码调用:  jquery插件形式: 希望本文所述对大家JavaScript程序设计有所帮助。

  • 本文向大家介绍简单易用的倒计时js代码,包括了简单易用的倒计时js代码的使用技巧和注意事项,需要的朋友参考一下