详解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 相关文章推荐
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 Javascript
常用的JavaScript验证正则表达式汇总
Nov 26 Javascript
js中用window.open()打开多个窗口的name问题
Mar 13 Javascript
Jquery给基本控件的取值、赋值示例
May 23 Javascript
jquery实现一个简单好用的弹出框
Sep 26 Javascript
JQuery中ajax方法访问web服务实例
Jul 18 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
Nov 28 Javascript
JS简单实现获取元素的封装操作示例
Apr 07 Javascript
小程序实现发表评论功能
Jul 06 Javascript
浅谈Javascript中的对象和继承
Apr 19 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
Jul 26 Javascript
一篇文章弄清楚Ajax请求的五个步骤
Mar 17 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 随机数的深入理解
2013/06/05 PHP
CI(CodeIgniter)框架配置
2014/06/10 PHP
PHP实现递归无限级分类
2015/10/22 PHP
php实现无限级分类查询(递归、非递归)
2016/03/10 PHP
Symfony2学习笔记之模板用法详解
2016/03/17 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
PHP编程一定要改掉的5个不良习惯
2020/09/18 PHP
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
javascript学习笔记(六) Date 日期类型
2012/06/19 Javascript
javascript实现禁止复制网页内容
2014/12/16 Javascript
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
js实现楼层导航功能
2017/02/23 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
Angular17之Angular自定义指令详解
2018/01/21 Javascript
vue插件实现v-model功能
2018/09/10 Javascript
Vue 无限滚动加载指令实现方法
2019/05/28 Javascript
vue移动端城市三级联动组件使用详解
2019/07/26 Javascript
python删除列表中重复记录的方法
2015/04/28 Python
深入浅出分析Python装饰器用法
2017/07/28 Python
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
python spyder中读取txt为图片的方法
2018/04/27 Python
python集合是否可变总结
2019/06/20 Python
PyCharm+Pipenv虚拟环境开发和依赖管理的教程详解
2020/04/16 Python
使用Python实现微信拍一拍功能的思路代码
2020/07/09 Python
介绍一下.net和Java的特点和区别
2012/09/26 面试题
应届毕业生的自我鉴定
2013/11/13 职场文书
护理学毕业生求职信
2013/11/14 职场文书
高中军训感言400字
2014/02/24 职场文书
大四学生找工作的自荐信
2014/03/27 职场文书
危爆物品安全大检查大整治工作方案
2014/05/03 职场文书
三严三实·严以用权心得体会
2016/01/12 职场文书
nginx配置文件使用环境变量的操作方法
2021/06/02 Servers
如何用Python搭建gRPC服务
2021/06/30 Python
MySQL 中如何归档数据的实现方法
2022/03/16 SQL Server