详解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学习基础笔记之DOM对象操作
Nov 03 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
Jan 08 Javascript
javascript将相对路径转绝对路径示例
Mar 14 Javascript
深入浅析Node.js 事件循环
Dec 20 Javascript
jQuery+Ajax实现限制查询间隔的方法
Jun 07 Javascript
js基本算法:冒泡排序,二分查找的简单实例
Oct 08 Javascript
在js中实现邮箱格式的验证方法(推荐)
Oct 24 Javascript
vue2组件实现懒加载浅析
Mar 29 Javascript
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 Javascript
详解JavaScript 浮点数运算的精度问题
Jul 23 Javascript
浅谈Vue static 静态资源路径 和 style问题
Nov 07 Javascript
Java 生成随机字符的示例代码
Jan 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+mysql分页代码详解
2008/03/27 PHP
php模拟post提交数据的方法
2015/02/12 PHP
php删除指定目录的方法
2015/04/03 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
JS对HTML标签select的获取、添加、删除操作
2013/10/17 Javascript
jQuery中attr()方法用法实例
2015/01/05 Javascript
js过滤HTML标签完整实例
2015/11/26 Javascript
jQuery表单元素选择器代码实例
2017/02/06 Javascript
学习使用Bootstrap栅格系统
2017/05/11 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
2017/12/14 Javascript
详解Vue中的scoped及穿透方法
2019/04/18 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
[20:21]《一刀刀一天》第十六期:TI国际邀请赛正式打响,总奖金超过550万
2014/05/23 DOTA
深入理解Python中字典的键的使用
2015/08/19 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
Python爬虫实现(伪)球迷速成
2018/06/10 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
Python:type、object、class与内置类型实例
2019/12/25 Python
python3 正则表达式基础廖雪峰
2020/03/25 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
浅谈Python3中print函数的换行
2020/08/05 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
你不知道的5个HTML5新功能
2016/06/28 HTML / CSS
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
Hertz荷兰:荷兰和全球租车
2018/01/07 全球购物
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
怎样比较两个类型为String的字符串
2016/08/17 面试题
我读书我快乐演讲稿
2014/05/07 职场文书
公司行政专员岗位职责
2014/08/24 职场文书
领导班子三严三实对照检查材料
2014/09/25 职场文书
nginx基于域名,端口,不同IP的虚拟主机设置的实现
2021/03/31 Servers
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL