详解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 相关文章推荐
用javascript来实现动画导航效果的代码
Dec 16 Javascript
获取焦点时,利用js定时器设定时间执行动作
Apr 02 Javascript
基于Jquery与WebMethod投票功能实现代码
Jan 19 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
Jul 15 Javascript
Jquery中给animation加更多的运作效果实例
Sep 05 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
Aug 27 Javascript
微信小程序 登陆流程详细介绍
Jan 17 Javascript
Vue实例简单方法介绍
Jan 20 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 Javascript
浅谈Angular4中常用管道
Sep 27 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
Apr 04 Javascript
vue组件jsx语法的具体使用
May 21 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 遍历显示文件夹下所有目录、所有文件的函数,没有分页的代码
2008/11/14 PHP
图解找出PHP配置文件php.ini的路径的方法
2014/08/20 PHP
PHP类的反射用法实例
2014/11/03 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
jQuery Div中加载其他页面的实现代码
2009/02/27 Javascript
Javascript 中的类和闭包
2010/01/08 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
2013/03/20 Javascript
ext中store.load跟store.reload的区别示例介绍
2014/06/17 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
2016/05/05 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
详解webpack3编译兼容IE8的正确姿势
2017/12/21 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python 开发的三种运行模式详细介绍
2017/01/18 Python
手把手教你python实现SVM算法
2017/12/27 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
python目标检测给图画框,bbox画到图上并保存案例
2020/03/10 Python
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
HttpServlet类中的主要方法都有哪些?各自的作用是什么?
2014/03/16 面试题
电气自动化自荐信
2013/10/10 职场文书
《英英学古诗》教学反思
2014/04/11 职场文书
家庭贫困证明范本(经典版)
2014/09/22 职场文书
2014年政风行风工作总结
2014/11/22 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
2015年酒店年度工作总结
2015/05/23 职场文书
2015年个人实习工作总结
2015/05/28 职场文书
高质量“欢迎词”
2019/04/03 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js
电脑无法安装Windows 11怎么办?无法安装Win11的解决方法
2021/11/21 数码科技