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 的Document属性和方法集合
Jan 25 Javascript
lyhucSelect基于Jquery的Select数据联动插件
Mar 29 Javascript
JavaScript入门之对象与JSON详解
Oct 21 Javascript
ie6下png图片背景不透明的解决办法使用js实现
Jan 11 Javascript
Javascript必知必会(四)js类型转换
Jun 08 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
详解node如何让一个端口同时支持https与http
Jul 04 Javascript
thinkjs 文件上传功能实例代码
Nov 08 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
May 22 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
在vue-cli中引入lodash.js并使用详解
Nov 13 Javascript
JS访问对象两种方式区别解析
Aug 29 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
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
在Yii2特定页面如何禁用调试工具栏Debug Toolbar详解
2017/08/07 PHP
兼容FireFox 的 js 日历 支持时间的获取
2009/03/04 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
2010/06/18 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
2011/07/26 Javascript
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
JavaScript表格常用操作方法汇总
2015/04/15 Javascript
Angular 理解module和injector,即依赖注入
2016/09/07 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
2019/02/01 Javascript
浏览器事件循环与vue nextTicket的实现
2019/04/16 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
nodejs实现聊天机器人功能
2019/09/19 NodeJs
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
Python实现图像几何变换
2015/07/06 Python
python中WSGI是什么,Python应用WSGI详解
2017/11/24 Python
儿童python练习实例
2018/05/27 Python
实例讲解Python3中abs()函数
2019/02/19 Python
Python中那些 Pythonic的写法详解
2019/07/02 Python
Python内置方法和属性应用:反射和单例(推荐)
2020/06/19 Python
python+appium+yaml移动端自动化测试框架实现详解
2020/11/24 Python
奥地利网上书店:Weltbild
2017/07/14 全球购物
伦敦香水公司:The London Perfume Company
2019/11/13 全球购物
Java面试题:请说出如下代码的输出结果
2013/04/22 面试题
会计电算一体化个人简历的自我评价
2013/10/15 职场文书
机械工程师的岗位职责
2013/11/17 职场文书
小学生期末评语大全
2014/04/21 职场文书
教师专业自荐信
2014/05/31 职场文书
实现中国梦思想汇报2014
2014/09/13 职场文书
2014年终个人工作总结
2014/11/07 职场文书
试用期辞职信范文
2015/03/02 职场文书