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


Posted in Javascript onApril 25, 2019

本文实例为大家分享了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时分秒倒计时的实现详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
QQ登录简单实现代码
Mar 09 Javascript
JavaScript入门学习书籍推荐
Jun 12 Javascript
几个javascript操作word的参考代码
Oct 26 Javascript
一个javascript图片阅览组件
Nov 09 Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
Oct 10 Javascript
vue首次赋值不触发watch的解决方法
Sep 11 Javascript
vue项目刷新当前页面的三种方法
Dec 04 Javascript
微信小程序页面传多个参数跳转页面的实现方法
May 17 Javascript
JS实现图片切换特效
Dec 23 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
Apr 07 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
Apr 13 Javascript
node.js ws模块搭建websocket服务端的方法示例
Apr 25 #Javascript
JS实现指定区域的全屏显示功能示例
Apr 25 #Javascript
使用React手写一个对话框或模态框的方法示例
Apr 25 #Javascript
elementUI Tree 树形控件的官方使用文档
Apr 25 #Javascript
微信小程序Flex布局用法深入浅出分析
Apr 25 #Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
Apr 25 #Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
Apr 25 #Javascript
You might like
php调用方法mssql_fetch_row、mssql_fetch_array、mssql_fetch_assoc和mssql_fetch_objcect读取数据的区别
2012/08/08 PHP
Netbeans 8.2与PHP相关的新特性介绍
2016/10/08 PHP
PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)
2016/12/14 PHP
Javascript String.replace的妙用
2009/09/08 Javascript
toString()一个会自动调用的方法
2010/02/08 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
2013/05/23 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
关于function类中定义变量this的简单说明
2016/05/28 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
javascript动画之模拟拖拽效果篇
2016/09/26 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
2017/04/28 Javascript
JavaScript实现指定数量的并发限制的示例代码
2020/03/10 Javascript
在react中使用vue的状态管理的方法示例
2020/05/02 Javascript
浅谈JavaScript中this的指向问题
2020/07/28 Javascript
Python的垃圾回收机制深入分析
2014/07/16 Python
python 把数据 json格式输出的实例代码
2016/10/31 Python
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
浅谈python之自动化运维(Paramiko)
2020/01/31 Python
详解python算法常用技巧与内置库
2020/10/17 Python
Python接口自动化测试框架运行原理及流程
2020/11/30 Python
详解css3 object-fit属性
2018/07/27 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
2020/08/21 HTML / CSS
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
戴尔美国官网:Dell
2016/08/31 全球购物
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
屈臣氏菲律宾官网:Watsons菲律宾
2020/06/30 全球购物
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
上课睡觉检讨书
2014/01/28 职场文书
业务部门经理岗位职责
2014/02/23 职场文书
村级换届选举方案
2014/05/10 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书