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 相关文章推荐
一段效率很高的for循环语句使用方法
Aug 13 Javascript
基于jquery的多功能软键盘插件
Jul 25 Javascript
jquery弹出层类代码分享
Dec 27 Javascript
jquery控制页面部分刷新的方法
Jun 24 Javascript
javascript控制台详解
Jun 25 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
Ionic项目中Native Camera的使用方法
Jun 07 Javascript
Javascript中的getter和setter初识
Aug 17 Javascript
vue.js删除列表中的一行
Jun 30 Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
Sep 24 Javascript
Vue中inheritAttrs的使用实例详解
Dec 31 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 session处理的定制
2009/03/16 PHP
PHP has encountered an Access Violation at 7C94BD02解决方法
2009/08/24 PHP
PHP CKEditor 上传图片实现代码
2009/11/06 PHP
phpMyadmin 用户权限中英对照
2010/04/02 PHP
mod_php、FastCGI、PHP-FPM等PHP运行方式对比
2015/07/02 PHP
php获取远程文件大小
2015/10/20 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
javascript new后的constructor属性
2010/08/05 Javascript
jQuery之选择组件的深入解析
2013/06/19 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
2013/12/10 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
2015/12/03 Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
2016/03/11 Javascript
老生常谈遮罩层 滚动条的问题
2016/04/29 Javascript
JavaScript提高网站性能优化的建议(二)
2016/07/24 Javascript
angular分页指令操作
2017/01/09 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
2017/01/21 Javascript
学习使用jQuery表单验证插件和日历插件
2017/02/13 Javascript
jQuery插件echarts去掉垂直网格线用法示例
2017/03/03 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
2017/05/27 Javascript
JavaScript实现图片切换效果
2017/08/12 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
Typescript的三种运行方式(小结)
2019/09/18 Javascript
微信小程序实现左侧滑动导航栏
2020/04/08 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
Python 迭代器工具包【推荐】
2016/05/06 Python
python代码实现ID3决策树算法
2017/12/20 Python
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
pytorch索引查找 index_select的例子
2019/08/18 Python
利用python中集合的唯一性实现去重
2020/02/11 Python
什么是数组名
2012/05/10 面试题
千元咖啡店的创业计划书范文
2013/12/29 职场文书
法制宣传月活动总结
2014/04/29 职场文书
在职党员进社区活动总结
2014/07/05 职场文书
师德师风事迹材料
2014/12/20 职场文书
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技