详解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 replace方法与正则表达式
Feb 19 Javascript
javascript 应用小技巧方法汇总
Jul 05 Javascript
wap手机端解决返回上一页的js实例
Dec 08 Javascript
js中常用的Math方法总结
Jan 12 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
Jun 29 Javascript
JavaScript正则表达式和级联效果
Sep 14 Javascript
ES6关于Promise的用法详解
May 07 Javascript
实例详解Node.js 函数
Jun 10 Javascript
layui时间控件选择时间范围的实现方法
Sep 28 Javascript
js实现随机点名程序
Sep 17 Javascript
JS深入学习之数组对象排序操作示例
May 01 Javascript
Vue实现跑马灯效果
May 25 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/08/07 PHP
php学习笔记 php中面向对象三大特性之一[封装性]的应用
2011/06/13 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
使用户点击后退按钮使效三行代码
2007/07/07 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
jquery中实现标签切换效果的代码
2011/03/01 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
2013/06/05 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
JSON与JS对象的区别与对比
2017/03/01 Javascript
详解vue-router基本使用
2017/04/18 Javascript
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
CentOS 安装NodeJS V8.0.0的方法
2017/06/15 NodeJs
vue在使用ECharts时的异步更新和数据加载详解
2017/11/22 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
2018/02/22 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
2018/09/04 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
2018/10/19 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
Python脚本实时处理log文件的方法
2016/11/21 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
python匹配两个短语之间的字符实例
2018/12/25 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
python GUI库图形界面开发之PyQt5多线程中信号与槽的详细使用方法与实例
2020/03/08 Python
Camille Jewelry官网:现代女性时尚首饰
2019/07/07 全球购物
教堂婚礼主持词
2014/03/14 职场文书
通用自荐信范文
2014/03/14 职场文书
导游个人求职信范文
2014/03/23 职场文书
会计毕业生自荐书
2014/06/12 职场文书
2014矛盾纠纷排查调处工作总结
2014/12/09 职场文书
参观邀请函范文
2015/02/02 职场文书
Java后端 Dubbo retries 超时重试机制的解决方案
2022/04/14 Java/Android
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers