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作一个通用向导说明
Aug 30 Javascript
文字不间断滚动(上下左右)实例代码
Apr 21 Javascript
Jquery常用的方法汇总
Sep 01 Javascript
Javascript基础教程之比较null和undefined值
May 16 Javascript
浅谈json取值(对象和数组)
Jun 24 Javascript
Vue.js路由组件vue-router使用方法详解
Dec 02 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
Jul 20 Javascript
node.js支持多用户web终端实现及安全方案
Nov 29 Javascript
Vue-路由导航菜单栏的高亮设置方法
Mar 17 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
Sep 04 Javascript
vue 手机物理监听键+退出提示代码
Sep 09 Javascript
uniapp微信小程序实现一个页面多个倒计时
Nov 01 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
超级实用的7个PHP代码片段分享
2012/01/05 PHP
CI框架Session.php源码分析
2014/11/03 PHP
基于jquery的模态div层弹出效果
2010/08/21 Javascript
IE6浏览器中window.location.href无效的解决方法
2014/11/20 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
2015/12/01 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
新闻上下滚动jquery 超简洁(必看篇)
2017/01/21 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
2019/05/14 Javascript
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
详解Vscode中使用Eslint终极配置大全
2019/11/08 Javascript
Vue实现图书管理案例
2021/01/20 Vue.js
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
python常见数制转换实例分析
2015/05/09 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
python构建基础的爬虫教学
2018/12/23 Python
python程序控制NAO机器人行走
2019/04/29 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
Python如何定义接口和抽象类
2020/07/28 Python
python分布式爬虫中消息队列知识点详解
2020/11/26 Python
matplotlib源码解析标题实现(窗口标题,标题,子图标题不同之间的差异)
2021/02/22 Python
美国猫狗药物和用品网站:PetCareRx
2017/01/05 全球购物
EGO Shoes美国/加拿大:英国时髦鞋类品牌
2018/08/04 全球购物
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
奶茶店创业计划书范文
2014/01/17 职场文书
挂职学习心得体会
2014/09/09 职场文书
2014年体育教学工作总结
2014/12/09 职场文书
员工年终考核评语
2014/12/31 职场文书
答谢词范文
2015/01/05 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书
Python 发送SMTP邮件的简单教程
2021/06/24 Python