详解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 相关文章推荐
非常漂亮的JS代码经典广告
Oct 21 Javascript
javascript学习(二)javascript常见问题总结
Jan 02 Javascript
JavaScript实现获取dom中class的方法
Feb 09 Javascript
Angular2库初探
Mar 01 Javascript
详解Vue中过度动画效果应用
May 25 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
深入掌握 react的 setState的工作机制
Sep 27 Javascript
vue计算属性computed的使用方法示例
Mar 13 Javascript
layui 监听select选择 获取当前select的ID名称方法
Sep 24 Javascript
node使用request请求的方法
Dec 20 Javascript
js实现直播点击飘心效果
Aug 19 Javascript
javascript实现滚轮轮播图片
Dec 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通过修改header强制图片下载的方法
2015/03/24 PHP
php实现获取农历(阴历)、节日、节气的类与用法示例
2017/11/20 PHP
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
javascript 复杂的嵌套环境中输出单引号和双引号
2009/05/26 Javascript
js parseInt(&quot;08&quot;)未指定进位制问题
2010/06/19 Javascript
jquery插件制作 自增长输入框实现代码
2012/08/17 jQuery
JS之Date对象和获取系统当前时间详解
2014/01/13 Javascript
nodejs 的 session 简单使用
2016/06/06 NodeJs
Bootstrap被封装的弹层
2016/07/20 Javascript
js防阻塞加载的实现方法
2016/09/09 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
JavaScript中数组常见操作技巧
2017/09/01 Javascript
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
2019/08/27 Javascript
详解如何在Javascript和Sass之间共享变量
2019/11/13 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
vue 组件间的通信之子组件向父组件传值的方式
2020/07/29 Javascript
[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG
2014/05/26 DOTA
Python中无限元素列表的实现方法
2014/08/18 Python
Python回调函数用法实例详解
2015/07/02 Python
Python解析最简单的验证码
2016/01/07 Python
python在OpenCV里实现投影变换效果
2019/08/30 Python
解决pyecharts运行后产生的html文件用浏览器打开空白
2020/03/11 Python
在python3.64中安装pyinstaller库的方法步骤
2020/06/02 Python
Python自动化之UnitTest框架实战记录
2020/09/08 Python
米兰必去买手店排行榜首位:Antonioli
2016/09/11 全球购物
岗位聘任书范文
2014/03/29 职场文书
高考寄语大全
2014/04/08 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
优秀共产党员演讲稿
2014/09/04 职场文书
教师学习十八届五中全会精神心得体会
2016/01/05 职场文书
Mysql binlog日志文件过大的解决
2021/10/05 MySQL
Java9新特性对HTTP2协议支持与非阻塞HTTP API
2022/03/16 Java/Android