详解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 相关文章推荐
ECMAScript 基础知识
Jun 29 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
Sep 15 Javascript
javascript操作JSON的要领总结
Dec 09 Javascript
JavaScript用Number方法实现string转int
May 13 Javascript
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
js实现上传图片预览的方法
Feb 09 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
Dec 23 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
Jul 22 Javascript
jQuery实现字符串全部替换的方法
Dec 12 Javascript
微信小程序实现横向增长表格的方法
Jul 24 Javascript
Vue.js实现备忘录功能
Jun 26 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
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 验证图片生成函数
2009/05/21 PHP
php安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
如何用PHP实现插入排序?
2013/04/10 PHP
PHP的拦截器实例分析
2014/11/03 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
JS target与currentTarget区别说明
2011/08/28 Javascript
javascript 循环调用示例介绍
2013/11/20 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
JS数字抽奖游戏实现方法
2015/05/04 Javascript
jQuery使用ajax跨域获取数据的简单实例
2016/05/18 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
2016/06/22 Javascript
移动适配的几种方案(三种方案)
2016/11/25 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
2018/03/28 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
python检测某个变量是否有定义的方法
2015/05/20 Python
python使用matplotlib绘制折线图教程
2017/02/08 Python
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
学习python分支结构
2019/05/17 Python
Python实现名片管理系统
2020/02/14 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
德国高尔夫商店:Golfshop.de
2019/06/22 全球购物
Shopping happy life西班牙:以最优惠的价格提供最好的时尚配饰
2020/03/13 全球购物
初中音乐教学反思
2014/01/12 职场文书
领导视察欢迎词
2014/01/15 职场文书
个人承诺书怎么写
2014/05/24 职场文书
建筑工程技术专业求职信
2014/07/16 职场文书
投标邀请书范本
2015/02/02 职场文书
Java虚拟机内存结构及编码实战分享
2022/04/07 Java/Android