详解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 相关文章推荐
兼容多浏览器的字幕特效Marquee的通用js类
Jul 20 Javascript
JQuery 学习笔记 选择器之二
Jul 23 Javascript
js中的异常处理try...catch使用介绍
Sep 21 Javascript
单击和双击事件的冲突处理示例代码
Apr 03 Javascript
浏览器缩放检测的js代码
Sep 28 Javascript
AngularJS中的缓存使用
Jan 11 Javascript
详解Vue单元测试Karma+Mocha学习笔记
Jan 31 Javascript
vue elementui el-form rules动态验证的实例代码详解
May 23 Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 Javascript
Vue实现附件上传功能
May 28 Javascript
javascript全局自定义鼠标右键菜单
Dec 08 Javascript
JavaScript实现简单拖拽效果
Sep 15 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
再说下636单管机
2021/03/02 无线电
学习php设计模式 php实现策略模式(strategy)
2015/12/07 PHP
PHP生成和获取XML格式数据的方法
2016/03/04 PHP
Mac下关于PHP环境和扩展的安装详解
2019/10/17 PHP
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
node.js正则表达式获取网页中所有链接的代码实例
2014/06/03 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
javascript事件绑定学习要点
2016/03/09 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
微信小程序canvas实现刮刮乐效果
2018/07/09 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
2019/06/10 Javascript
在Vue项目中使用Typescript的实现
2019/12/19 Javascript
小程序实现可拖动的悬浮按钮
2020/09/07 Javascript
[01:03:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第一场 1月29日
2021/03/11 DOTA
Python比较两个图片相似度的方法
2015/03/13 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
台湾乐天市场:日本No.1的网路购物网站
2017/03/22 全球购物
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
Linux的文件类型
2012/03/07 面试题
如何查看在weblogic中已经发布的EJB
2012/06/01 面试题
优秀毕业生找工作自荐信
2014/06/23 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
2014年医生工作总结
2014/11/21 职场文书
大三学生英语考试作弊检讨书
2015/01/01 职场文书
清洁员岗位职责
2015/02/15 职场文书
Python基本数据类型之字符串str
2021/07/21 Python
MySQL时区造成时差问题
2022/04/13 MySQL