详解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 无限级 Select效果实现代码(json格式)
Aug 30 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
Feb 03 Javascript
jquery对象和DOM对象的区别介绍
Aug 09 Javascript
Jquery对数组的操作技巧整理
Mar 25 Javascript
Bootstrap基本组件学习笔记之分页(12)
Dec 08 Javascript
JS正则表达式验证密码格式的集中情况总结
Feb 23 Javascript
Vue.js中兄弟组件之间互相传值实例
Jun 01 Javascript
vue2.0之多页面的开发的示例
Jan 30 Javascript
Vue中android4.4不兼容问题的解决方法
Sep 04 Javascript
写给新手同学的vuex快速上手指北小结
Apr 14 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 Javascript
利用js canvas实现五子棋游戏
Oct 11 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 数组基础知识小结
2010/08/20 PHP
php实现图片添加水印功能
2014/02/13 PHP
php 使用file_get_contents读取大文件的方法
2014/11/13 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
JavaScript实际应用:innerHTMl和确认提示的使用
2006/06/22 Javascript
常用js脚本
2006/12/03 Javascript
location.href 在IE6中不跳转的解决方法与推荐使用代码
2010/07/08 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
2013/12/12 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
2014/12/08 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
easyui form validate总是返回false的原因及解决方法
2016/11/07 Javascript
Angular工具方法学习
2016/12/26 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
2017/07/13 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
Vue Router 实现动态路由和常见问题及解决方法
2020/03/06 Javascript
jQuery实现带进度条的轮播图
2020/09/13 jQuery
js 将多个对象合并成一个对象 assign方法的实现
2020/09/24 Javascript
Openlayers显示瓦片网格信息的方法
2020/09/28 Javascript
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
python使用KNN算法识别手写数字
2019/04/25 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
在django-xadmin中APScheduler的启动初始化实例
2019/11/15 Python
Python实现bilibili时间长度查询的示例代码
2020/01/14 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
美国领先的精品家居照明和装饰产品在线零售商:LightsOnline.com
2018/01/23 全球购物
大学四年学习的自我评价分享
2013/12/09 职场文书
高校教师自荐信范文
2014/03/13 职场文书
关于党风廉政建设宣传教育月的活动总结!
2019/08/08 职场文书
如何利用python实现Simhash算法
2022/06/28 Python