详解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模拟类继承小例子
Jul 17 Javascript
jquery中获取id值方法小结
Sep 22 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
May 30 Javascript
jQuery组件easyui基本布局实现代码
Aug 25 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
Oct 25 Javascript
使用JavaScript获取URL中的参数(两种方法)
Nov 16 Javascript
vue.js父组件使用外部对象的方法示例
Apr 25 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
在Vue项目中使用d3.js的实例代码
May 01 Javascript
JQuery的加载和选择器用法简单示例
May 13 jQuery
JS实现处理时间,年月日,星期的公共方法示例
May 31 Javascript
新手快速入门微信小程序组件库 iView Weapp
Jun 24 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
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
PHP中使用gettext解决国际化问题的例子(i18n)
2014/06/13 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
php微信开发之带参数二维码的使用
2016/08/03 PHP
magento后台无法登录解决办法的两种方法
2016/12/09 PHP
safari下载文件自动加了html后缀问题
2018/11/09 PHP
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
JavaScript国旗变换效果代码
2008/08/13 Javascript
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
2013/10/15 Javascript
轻松创建nodejs服务器(4):路由
2014/12/18 NodeJs
基于jQuery实现仿51job城市选择功能实例代码
2016/03/02 Javascript
jquery中实现时间戳与日期相互转换
2016/04/12 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
2017/01/05 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
javascript实现点击按钮切换轮播图功能
2020/09/23 Javascript
[03:09]DOTA2亚洲邀请赛 LGD战队出场宣传片
2015/02/07 DOTA
[38:23]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第二场 11.01
2020/11/02 DOTA
python实现文件名批量替换和内容替换
2014/03/20 Python
Python简单生成8位随机密码的方法
2017/05/24 Python
Python实现获取前100组勾股数的方法示例
2018/05/04 Python
Python函数中的可变长参数详解
2019/09/12 Python
神经网络训练采用gpu设置的方式
2021/03/03 Python
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
ZWILLING双立人英国网上商店:德国刀具锅具厨具品牌
2018/05/15 全球购物
Unix如何在一行中运行多个命令
2015/05/29 面试题
一月红领巾广播稿
2014/02/11 职场文书
任命书模板
2014/06/04 职场文书
社区反邪教工作方案
2014/06/16 职场文书
一份文言文检讨书
2014/09/13 职场文书
行政处罚决定书
2015/06/24 职场文书
《最终幻想14》6.01版本4月5日推出 追加新任务新道具
2022/04/03 其他游戏