js实现指定时间倒计时效果


Posted in Javascript onAugust 26, 2019

本文实例为大家分享了js实现指定时间倒计时的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>计时</title>
 </head>
 <body>
 <div style="display: flex; justify-content: center; align-items: center;">
  <span>从2019年6月31日至今:</span>
  <span id="timeid1" style="font-size:35px"></span>天
  <span id="timeid2" style="font-size:35px"></span>小时
  <span id="timeid3" style="font-size:35px"></span>分
  <span id="timeid4" style="font-size:35px"></span>秒
 </div>
 <script type="text/javascript">
  function loveTime() {
  var the=new Date(2019,6,31) 
  var date = new Date() - the
  var days = Math.floor(date / 1000 / 60 / 60 / 24) // 从这里开始
  var daysmod = date - days * 24 *60 * 60 * 1000 
  var hours = Math.floor(daysmod / 1000 / 60 / 60) 
  var hoursmod = date - (days * 24 *60 * 60 * 1000) - (hours * 1000 * 60 * 60) 
  var minutes = Math.floor(hoursmod / 1000 / 60)
  var minutesmod = date - (days * 24 *60 * 60 * 1000) - (hours * 1000 * 60 * 60) - (minutes * 1000 * 60)
  var seconds = Math.floor(minutesmod / 1000) // 到这里结束,是将总毫秒转化成对应天数+小时数+分钟数+秒数的转换方法
  var daysshow = document.getElementById("timdid1");
  var ds = document.getElementById("timeid1");
  var hs = document.getElementById("timeid2");
  var ms = document.getElementById("timeid3");
  var ss = document.getElementById("timeid4");
  ds.innerHTML = days;
  hs.innerHTML = hours;
  ms.innerHTML = minutes;
  ss.innerHTML = seconds;
  }
  // 使用定时器实现每一秒写一次时间
  setInterval("loveTime();",1000);

 </script>
</body>
</html>

更多关于倒计时的文章请查看专题:《倒计时功能》

更多JavaScript时钟特效点击查看:JavaScript时钟特效专题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript静态的动态
Sep 18 Javascript
完美解决JS中汉字显示乱码问题(已解决)
Dec 27 Javascript
JavaScript学习笔记(十七)js 优化
Feb 04 Javascript
JavaScript CSS修改学习第六章 拖拽
Feb 19 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
Jun 13 Javascript
jQuery 三击事件实现代码
Sep 11 Javascript
深入领悟JavaScript中的面向对象
Nov 18 Javascript
JS实现一个按钮的方法
Feb 05 Javascript
jquery可定制的在线UEditor编辑器
Nov 17 Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 Javascript
关于iframe跨域POST提交的方法示例
Jan 15 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
Aug 26 #Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 #Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 #Javascript
微信小程序实现手势滑动效果
Aug 26 #Javascript
详解nuxt 微信公众号支付遇到的问题与解决
Aug 26 #Javascript
Vue路由之JWT身份认证的实现方法
Aug 26 #Javascript
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 #Javascript
You might like
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
php实现登陆模块功能示例
2016/10/20 PHP
PHP+Ajax异步带进度条上传文件实例
2016/11/01 PHP
js中获取事件对象的方法小结
2011/03/13 Javascript
javascript自然分类法算法实现代码
2013/10/11 Javascript
JavaScript代码复用模式详解
2014/11/07 Javascript
jQuery实现图片左右滚动特效
2020/04/20 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
2016/01/26 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
2016/03/25 Javascript
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
微信小程序实现打开内置地图功能【附源码下载】
2017/12/07 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
2018/08/31 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
2019/05/23 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
2020/11/09 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
[01:31]DOTA2上海特级锦标赛 SECRET战队完整宣传片
2016/03/16 DOTA
python用pickle模块实现“增删改查”的简易功能
2017/06/07 Python
Python 查看文件的读写权限方法
2018/01/23 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
python正则爬取某段子网站前20页段子(request库)过程解析
2019/08/10 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
Python3 shutil(高级文件操作模块)实例用法总结
2020/02/19 Python
keras小技巧——获取某一个网络层的输出方式
2020/05/23 Python
浅析Python 字符编码与文件处理
2020/09/24 Python
pycharm 配置svn的图文教程(手把手教你)
2021/01/15 Python
用CSS禁用输入法(CSS3 UI规范)实例解析
2012/12/04 HTML / CSS
Linux面试经常问的文件系统操作命令
2015/11/05 面试题
医院护士求职自荐信格式
2013/09/21 职场文书
上班早退检讨书
2014/01/09 职场文书
教师节促销活动方案
2014/02/14 职场文书
知识竞赛主持词
2014/03/26 职场文书
新员工考核评语
2014/12/31 职场文书
好好学习保证书
2015/02/26 职场文书
2015年企业工作总结范文
2015/04/28 职场文书
html+css实现文字折叠特效实例
2021/06/02 HTML / CSS