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实现照片墙功能实例
Feb 05 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
Aug 16 Javascript
AngularJS递归指令实现Tree View效果示例
Nov 07 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
May 20 Javascript
JavaScript中使用参数个数实现重载功能
Sep 01 Javascript
node-sass安装失败的原因与解决方法
Sep 04 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
Mar 03 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
Aug 27 Javascript
vue项目打包后怎样优雅的解决跨域
May 26 Javascript
Vue中对iframe实现keep alive无刷新的方法
Jul 23 Javascript
微信小程序 scroll-view的使用案例代码详解
Jun 11 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漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
php简单实现批量上传图片的方法
2016/05/09 PHP
Javascript 个人笔记(没有整理,很乱)
2007/07/07 Javascript
js查找父节点的简单方法
2008/06/28 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
2010/06/19 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
javascript排序函数实现数字排序
2015/06/26 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
AngularJS入门教程之更多模板详解
2016/08/19 Javascript
D3.js实现柱状图的方法详解
2016/09/21 Javascript
微信小程序 icon组件详细及实例代码
2016/10/25 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
Vue 换肤的示例实践
2018/01/23 Javascript
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
2019/04/25 Javascript
微信小程序音乐播放器开发
2019/11/20 Javascript
原生javascript制作的拼图游戏实现方法详解
2020/02/23 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
tornado捕获和处理404错误的方法
2014/02/26 Python
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
使用python在本地电脑上快速处理数据
2017/06/22 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
Python Tkinter Entry和Text的添加与使用详解
2020/03/04 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
英国时尚首饰品牌:Missoma
2020/06/29 全球购物
计算机专业个人求职自荐信
2013/09/21 职场文书
大三学生入党思想汇报
2014/01/02 职场文书
太行山上观后感
2015/06/05 职场文书
优秀党员主要事迹范文
2015/11/05 职场文书
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python