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 相关文章推荐
jQuery + Flex 通过拖拽方式动态改变图片的代码
Aug 03 Javascript
jQuery把表单元素变为json对象
Nov 06 Javascript
JavaScript中如何通过arguments对象实现对象的重载
May 12 Javascript
Javascript闭包用法实例分析
Jan 23 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
Mar 17 Javascript
JQ实现新浪游戏首页幻灯片
Jul 29 Javascript
bootstrap下拉菜单使用方法解析
Jan 13 Javascript
浅谈webpack对样式的处理
Jan 05 Javascript
如何使用 vue + d3 画一棵树
Dec 03 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
Jul 19 Javascript
vue路由缓存的几种实现方式小结
Feb 02 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 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 定界符 使用技巧
2009/06/14 PHP
PHP 开发环境配置(Zend Server安装)
2010/04/28 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
百度工程师讲PHP函数的实现原理及性能分析(二)
2015/05/13 PHP
javascript getElementsByName()的用法说明
2009/07/31 Javascript
ie focus bug 解决方法
2009/09/03 Javascript
javascript两段代码,两个小技巧
2010/02/04 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
2013/11/08 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
2013/12/11 Javascript
javaScript 计算两个日期的天数相差(示例代码)
2013/12/27 Javascript
js的hasownproperty使用示例
2014/03/02 Javascript
浅谈JavaScript中Date(日期对象),Math对象
2015/02/05 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
微信公众号菜单配置微信小程序实例详解
2017/03/31 Javascript
原生JS发送异步数据请求
2017/06/08 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
Python实现的随机森林算法与简单总结
2018/01/30 Python
Python 3.7新功能之dataclass装饰器详解
2018/04/21 Python
python批量修改图片大小的方法
2018/07/24 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
Python3操作YAML文件格式方法解析
2020/04/10 Python
解决Jupyter因卸载重装导致的问题修复
2020/04/10 Python
中专毕业生的自我鉴定
2013/12/01 职场文书
竞选班长演讲稿
2013/12/30 职场文书
商场总经理岗位职责
2014/02/03 职场文书
卫校毕业生个人自我鉴定
2014/04/28 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
社区好人好事材料
2014/12/26 职场文书
2019年教师节:送给所有老师的祝福语
2019/09/05 职场文书
pytorch 6 batch_train 批训练操作
2021/05/28 Python
Java实战之用Swing实现通讯录管理系统
2021/06/13 Java/Android
MySQL面试题讲解之如何设置Hash索引
2021/11/01 MySQL
python如何查找列表中元素的位置
2022/05/30 Python