详解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 到 JQuery (1)学习小结
Feb 12 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
Oct 20 Javascript
JavaScript输入邮箱自动提示实例代码
Jan 13 Javascript
js获取url中的参数且参数为中文时通过js解码
Mar 19 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 Javascript
解决js函数闭包内存泄露问题的办法
Jan 25 Javascript
JavaScript获取服务器时间的方法详解
Dec 11 Javascript
基于vue循环列表时点击跳转页面的方法
Aug 31 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
Sep 19 Javascript
js实现鼠标点击飘爱心效果
Aug 19 Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 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/06/15 PHP
PHP人民币金额数字转中文大写的函数代码
2013/02/27 PHP
PHP图片上传代码
2013/11/04 PHP
PHP eval函数使用介绍
2013/12/08 PHP
经常用的图片在容器中的水平垂直居中实例
2007/06/10 Javascript
用JS实现一个TreeMenu效果分享
2011/08/28 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
JavaScript实现网页对象拖放功能的方法
2015/04/15 Javascript
如何使用HTML5地理位置定位功能
2015/04/27 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
2015/06/17 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
AngularJS入门教程之REST和定制服务详解
2016/08/19 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
2017/07/17 jQuery
vue数组对象排序的实现代码
2018/06/20 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
vue实现的网易云音乐在线播放和下载功能案例
2019/02/18 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
2019/09/30 Javascript
Python greenlet实现原理和使用示例
2014/09/24 Python
Python 数据处理库 pandas 入门教程基本操作
2018/04/19 Python
用vue.js组件模拟v-model指令实例方法
2019/07/05 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
如何用Matplotlib 画三维图的示例代码
2020/07/28 Python
python开根号实例讲解
2020/08/30 Python
BeautifulSoup获取指定class样式的div的实现
2020/12/07 Python
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
远程Wi-Fi宠物监控相机:Petcube
2017/04/26 全球购物
英国知名小木屋定制网站:Tiger Sheds
2020/03/06 全球购物
Linux文件操作命令都有哪些
2016/07/23 面试题
法定代表人授权委托书格式
2014/10/14 职场文书
单位计划生育责任书
2015/05/09 职场文书
教师继续教育反思周记
2015/06/25 职场文书
MySQL 字符集 character
2022/05/04 MySQL
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python