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 TextArea动态显示剩余字符
Oct 22 Javascript
jquery实现具有嵌套功能的选项卡
Feb 12 Javascript
非常棒的jQuery图片轮播效果
Apr 17 Javascript
JavaScript面试开发常用的知识点总结
Aug 08 Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 Javascript
利用JS判断鼠标移入元素的方向
Dec 11 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
Feb 19 Javascript
JS原生数据双向绑定实现代码
Aug 14 Javascript
JavaScript选择排序算法原理与实现方法示例
Aug 06 Javascript
Bootstrap-table自定义可编辑每页显示记录数
Sep 07 Javascript
vue.draggable实现表格拖拽排序效果
Dec 01 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
Jun 02 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
收音机指标测试方法及仪器
2021/03/01 无线电
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
PHP记录搜索引擎蜘蛛访问网站足迹的方法
2015/04/15 PHP
php实现爬取和分析知乎用户数据
2016/01/26 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
PHP如何读取由JavaScript设置的Cookie
2017/03/22 PHP
php对象工厂类完整示例
2018/08/09 PHP
js遍历td tr等html元素
2012/12/13 Javascript
JS取request值以及自动执行使用示例
2014/02/24 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
Js为表单动态添加节点内容的方法
2015/02/10 Javascript
js用拖动滑块来控制图片大小的方法
2015/02/27 Javascript
Jquery动态添加输入框的方法
2015/05/29 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
Nodejs之http的表单提交
2017/07/07 NodeJs
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
elementUI Tree 树形控件的官方使用文档
2019/04/25 Javascript
jQuery实现简易聊天框
2020/02/08 jQuery
基于better-scroll 实现歌词联动功能的代码
2020/05/07 Javascript
Element Alert警告的具体使用方法
2020/07/27 Javascript
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
Pycharm学习教程(5) Python快捷键相关设置
2017/05/03 Python
python实现用户管理系统
2018/01/10 Python
numpy返回array中元素的index方法
2018/06/27 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
python3.6.3安装图文教程 TensorFlow安装配置方法
2020/06/24 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
解决jupyter notebook打不开无反应 浏览器未启动的问题
2020/04/10 Python
python 实现两个线程交替执行
2020/05/02 Python
基于HTML5 Canvas:字符串,路径,背景,图片的详解
2013/05/09 HTML / CSS
购房意向书范本
2014/04/01 职场文书
员工考核评语大全
2014/04/26 职场文书
2015年护士工作总结范文
2015/03/31 职场文书
承兑汇票延期证明
2015/06/23 职场文书
清洁工工作总结
2015/08/11 职场文书
Python机器学习之PCA降维算法详解
2021/05/19 Python