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 相关文章推荐
nicejforms——美化表单不用愁
Feb 20 Javascript
js arguments.callee的应用代码
May 07 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
Sep 21 Javascript
JavaScript 更严格的相等 [译]
Sep 20 Javascript
jquery制作弹窗提示窗口代码分享
Mar 02 Javascript
第一次接触神奇的Bootstrap网格系统
Jul 27 Javascript
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
微信小程序中input标签详解及简单实例
May 18 Javascript
Vue集成Iframe页面的方法示例
Dec 12 Javascript
Vue实现剪贴板复制功能
Dec 31 Javascript
小程序双头slider选择器的实现示例
Mar 31 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
Nov 30 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
文章推荐系统(三)
2006/10/09 PHP
mysql From_unixtime及UNIX_TIMESTAMP及DATE_FORMAT日期函数
2010/03/21 PHP
FirePHP 推荐一款PHP调试工具
2011/04/23 PHP
php使用json_encode对变量json编码
2014/04/07 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
Javascript 二维数组
2009/11/26 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
2013/11/25 Javascript
js选项卡的实现方法
2015/02/09 Javascript
原生JS实现网络彩票投注效果
2016/09/25 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
Vue实现导航栏点击当前标签变色功能
2020/08/19 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
react实现移动端下拉菜单的示例代码
2020/01/16 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
JavaScript forEach中return失效问题解决方案
2020/06/01 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
使用50行Python代码从零开始实现一个AI平衡小游戏
2018/11/21 Python
python装饰器的特性原理详解
2019/12/25 Python
提升python处理速度原理及方法实例
2019/12/25 Python
python 图像的离散傅立叶变换实例
2020/01/02 Python
关于Pytorch的MNIST数据集的预处理详解
2020/01/10 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
Python模拟登录requests.Session应用详解
2020/11/17 Python
HTML5 canvas基本绘图之绘制矩形
2016/06/27 HTML / CSS
朗仕(Lab series)英国官网:雅诗兰黛集团男士专属护肤品牌
2017/11/28 全球购物
美国地毯购买网站:Rugs USA
2019/02/23 全球购物
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
高一家长会邀请函
2014/01/12 职场文书
绿色出行口号
2014/06/18 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
个人创业事迹材料
2014/12/30 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python
mysql使用FIND_IN_SET和group_concat两个方法查询上下级机构
2022/04/20 MySQL