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的一些总结
Nov 03 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
Jul 27 Javascript
jQuery基于正则表达式的表单验证功能示例
Jan 21 Javascript
Vue.js 单页面多路由区域操作的实例详解
Jul 17 Javascript
基于Vue实现拖拽效果
Apr 27 Javascript
简化版的vue-router实现思路详解
Oct 19 Javascript
vue+php实现的微博留言功能示例
Mar 16 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 Javascript
微信小程序新闻网站详情页实例代码
Jan 10 Javascript
通过实例了解Render Props回调地狱解决方案
Nov 04 Javascript
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
输入框跟随文字内容适配宽实现示例
Aug 14 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
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
jQuery中调用WebService方法小结
2011/03/28 Javascript
javascript检查表单数据是否改变的方法
2013/07/30 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
ajax请求get与post的区别总结
2013/11/04 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
浅析javascript中function 的 length 属性
2014/05/27 Javascript
javaScript中Math()函数注意事项
2015/06/18 Javascript
理解JavaScript中Promise的使用
2016/01/18 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
Bootstrap Table快速完美搭建后台管理系统
2017/09/20 Javascript
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
React 实现拖拽功能的示例代码
2019/01/06 Javascript
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
浅谈javascript如何获取文件后缀名
2020/08/07 Javascript
全面解析Vue中的$nextTick
2020/12/24 Vue.js
[03:17]2014DOTA2 国际邀请赛中国区预选赛 四强专访
2014/05/23 DOTA
[01:29]2014DOTA2展望TI 剑指西雅图DK战队专访
2014/06/30 DOTA
使用Python脚本在Linux下实现部分Bash Shell的教程
2015/04/17 Python
python操作 hbase 数据的方法
2016/12/18 Python
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
Python实现类似比特币的加密货币区块链的创建与交易实例
2018/03/20 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
Python开发.exe小工具的详细步骤
2021/01/27 Python
大学生个人推荐信范文
2013/11/25 职场文书
行政助理岗位职责范文
2013/12/03 职场文书
饲料采购员岗位职责
2013/12/19 职场文书
光荣入党自我鉴定
2014/01/22 职场文书
毕业证丢失证明范本
2014/09/20 职场文书
环卫工作个人总结
2015/03/04 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
环保建议书作文300字
2015/09/14 职场文书
对讲机知识
2022/04/07 无线电
MySQL一劳永逸永久支持输入中文的方法实例
2022/08/05 MySQL