详解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 相关文章推荐
JSON 数据格式介绍
Jan 13 Javascript
jQuery语法总结和注意事项小结
Nov 11 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
Nov 28 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
Nov 07 Javascript
详解javascript立即执行函数表达式IIFE
Feb 13 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
Jul 21 Javascript
VUE实现自身整体组件销毁的示例代码
Jan 13 Javascript
JS中==、===你分清楚了吗
Mar 04 Javascript
JS实现公告上线滚动效果
Jan 10 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
德生BCL3000的电路分析和打磨
2021/03/02 无线电
php类
2006/11/27 PHP
php将access数据库转换到mysql数据库的方法
2014/12/24 PHP
简要剖析PHP的Yii框架的组件化机制的基本知识
2016/03/17 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
一些常用的Javascript函数
2006/12/22 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
2014/10/14 Javascript
node.js中的fs.createWriteStream方法使用说明
2014/12/17 Javascript
详解jQuery中的事件
2016/12/14 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
JS实现放烟花效果
2020/03/10 Javascript
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
[01:48]DOTA2 2015国际邀请赛中国区预选赛第二日战报
2015/05/27 DOTA
python回调函数用法实例分析
2015/05/09 Python
Python中不同进制的语法及转换方法分析
2016/07/27 Python
Python中str.format()详解
2017/03/12 Python
python去除字符串中的换行符
2017/10/11 Python
python3 中文乱码与默认编码格式设定方法
2018/10/31 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
python通过文本在一个图中画多条线的实例
2020/02/21 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
专门经营化妆刷的美国彩妆品牌:Sigma Beauty
2017/09/11 全球购物
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
介绍一下#error预处理
2015/09/25 面试题
自我鉴定的范文
2013/10/03 职场文书
2014年图书室工作总结
2014/12/09 职场文书
毕业生对母校寄语
2015/02/26 职场文书
班级元旦晚会开幕词
2016/03/04 职场文书
快消品行业营销模式与盈利模式分享
2019/09/27 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang