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 相关文章推荐
Prototype使用指南之selector.js
Jan 10 Javascript
用javascript实现给图片加链接
Aug 15 Javascript
PNG背景在不同浏览器下的应用
Jun 22 Javascript
extjs中grid中嵌入动态combobox的应用
Jan 01 Javascript
javascript中直接写php代码的方法
Jul 31 Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 Javascript
使用AngularJS 应用访问 Android 手机的图片库
Mar 24 Javascript
jQuery如何使用自动触发事件trigger
Nov 29 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
Dec 25 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
Oct 29 Javascript
JavaScript数据结构链表知识详解
Nov 21 Javascript
Vue 数据响应式相关总结
Jan 28 Vue.js
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 xfocus防注入资料
2008/04/27 PHP
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
基于jQuery的投票系统显示结果插件
2011/08/12 Javascript
EASYUI TREEGRID异步加载数据实现方法
2012/08/22 Javascript
jQuery EasyUI提交表单验证
2016/07/19 Javascript
详解使用nodeJs安装Vue-cli
2017/05/17 NodeJs
Vue项目中引入外部文件的方法(css、js、less)
2017/07/24 Javascript
vue组件父子间通信详解(三)
2017/11/07 Javascript
JavaScript设计模式之构造函数模式实例教程
2018/07/02 Javascript
vuejs简单验证码功能完整示例
2019/01/08 Javascript
使用layui定义一个模块并使用的例子
2019/09/14 Javascript
[31:55]完美世界DOTA2联赛循环赛 IO vs GXR BO2第一场 11.04
2020/11/05 DOTA
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
python杀死一个线程的方法
2015/09/06 Python
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
关于Python中空格字符串处理的技巧总结
2017/08/10 Python
python中验证码连通域分割的方法详解
2018/06/04 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
scrapy-redis源码分析之发送POST请求详解
2019/05/15 Python
python爬虫爬取监控教务系统的思路详解
2020/01/08 Python
Python re正则表达式元字符分组()用法分享
2020/02/10 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
LACOSTE波兰官网:Polo衫、服装和鞋类
2020/09/29 全球购物
简历自荐信
2013/12/02 职场文书
2015年党风廉政建设责任书
2015/01/29 职场文书
幼儿园教师自荐书
2015/03/06 职场文书
2015年副班长工作总结
2015/05/15 职场文书
学校教代会开幕词
2016/03/04 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
golang正则之命名分组方式
2021/04/25 Golang
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android
Nginx的gzip相关介绍
2022/05/11 Servers