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 相关文章推荐
禁止js文件缓存的代码
Apr 09 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
Nov 14 Javascript
老生常谈javascript变量的命名规范和注释
Sep 29 Javascript
jQuery插件WebUploader实现文件上传
Nov 07 Javascript
整理一下常见的IE错误
Nov 18 Javascript
JS实现的ajax和同源策略(实例讲解)
Dec 01 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
Jan 16 Javascript
vue中引用阿里字体图标的方法
Feb 10 Javascript
JS基于开关思想实现的数组去重功能【案例】
Feb 18 Javascript
关于layui表单中按钮自动提交的解决方法
Sep 09 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 Javascript
微信小程序实现带放大效果的轮播图
May 26 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
Ajax+PHP边学边练 之五 图片处理
2009/12/03 PHP
php Rename 更改文件、文件夹名称
2011/05/24 PHP
PHP基于数组实现的分页函数实例
2014/08/20 PHP
phplist及phpmailer(组合使用)通过gmail发送邮件的配置方法
2016/03/30 PHP
zend框架实现支持sql server的操作方法
2016/12/08 PHP
PHP微信企业号开发之回调模式开启与用法示例
2017/11/25 PHP
php日志函数error_log用法实例分析
2019/09/23 PHP
浅析js中取绝对值的2种方法
2013/07/09 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
file控件选择上传文件确定后触发的js事件是哪个
2014/03/17 Javascript
jquery密码强度校验
2015/12/02 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
2015/12/16 Javascript
Javascript实现苹果悬浮虚拟按钮
2016/04/10 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
2017/02/08 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
开发Vue树形组件的示例代码
2017/12/21 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
2018/08/06 Javascript
js canvas实现画图、滤镜效果
2018/11/27 Javascript
Vue infinite update loop的问题解决
2019/04/23 Javascript
vue用elementui写form表单时,在label里添加空格操作
2020/08/13 Javascript
Python中的urllib模块使用详解
2015/07/07 Python
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
解决python3在anaconda下安装caffe失败的问题
2017/06/15 Python
python 除法保留两位小数点的方法
2018/07/16 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
将labelme格式数据转化为标准的coco数据集格式方式
2020/02/17 Python
Piercing Pagoda官网:耳环、戒指、项链、手链等
2020/09/28 全球购物
汽车广告策划方案
2014/05/31 职场文书
优秀小学生事迹材料
2014/12/26 职场文书
市场营销计划书
2015/01/17 职场文书
房产公证书样本
2015/01/23 职场文书
2015年社会实践个人总结
2015/03/06 职场文书
小学毕业感言200字
2015/07/30 职场文书
阳光体育运动标语口号
2015/12/26 职场文书
初中生物教学反思
2016/02/20 职场文书