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 相关文章推荐
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
Jan 09 Javascript
使用node.js 获取客户端信息代码分享
Nov 26 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
Dec 31 Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
Jan 27 Javascript
angular之ng-template模板加载
Nov 09 Javascript
three.js实现3D模型展示的示例代码
Dec 31 Javascript
r.js来合并压缩css文件的示例
Apr 26 Javascript
axios向后台传递数组作为参数的方法
Aug 11 Javascript
JS获取动态添加元素的方法详解
Jul 31 Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 Javascript
JS可断点续传文件上传实现代码解析
Jul 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
一个可以删除字符串中HTML标记的PHP函数
2006/10/09 PHP
PHP使用DES进行加密与解密的方法详解
2013/06/06 PHP
ThinkPHP查询语句与关联查询用法实例
2014/11/01 PHP
CI框架安全类Security.php源码分析
2014/11/04 PHP
php以post形式发送xml的方法
2014/11/04 PHP
php中Snoopy类用法实例
2015/06/19 PHP
JavaScript 输入框内容格式验证代码
2010/02/11 Javascript
jquery动态添加删除div 具体实现
2013/07/20 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
2015/03/12 Javascript
每日十条JavaScript经验技巧(二)
2016/06/23 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
2016/11/03 Javascript
js制作可以延时消失的菜单
2017/01/13 Javascript
Bootstrap datepicker日期选择器插件使用详解
2017/07/26 Javascript
分析javascript中9 个常见错误阻碍你进步
2017/09/18 Javascript
Vue Element使用icon图标教程详解(第三方)
2018/02/07 Javascript
JS事件流与事件处理程序实例分析
2019/08/16 Javascript
解决layer弹出层msg的文字不显示的问题
2019/09/11 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
Python实现获取磁盘剩余空间的2种方法
2017/06/07 Python
Python操作MySQL模拟银行转账
2018/03/12 Python
Django中的文件的上传的几种方式
2018/07/23 Python
对pandas的层次索引与取值的新方法详解
2018/11/06 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
python对Excel的读取的示例代码
2020/02/14 Python
Python GUI库Tkiner使用方法代码示例
2020/11/27 Python
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
有关HTML5中背景音乐的自动播放功能
2017/10/16 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
英国领先的男士服装和时尚零售商:Burton
2017/01/09 全球购物
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
美国探亲签证邀请信
2014/02/05 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
民主评议教师党员自我评价
2015/03/04 职场文书
大学毕业生自我鉴定范文
2019/06/21 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers