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 相关文章推荐
同一页面多个商品倒计时JS 基于面向对象的javascript
Feb 16 Javascript
JavaScript获取/更改文本框的值的实例代码
Aug 02 Javascript
JavaScript执行顺序详细介绍
Dec 04 Javascript
Javascript中的Callback方法浅析
Mar 15 Javascript
javascript实现表单验证
Jan 29 Javascript
javascript 内置对象及常见API详细介绍
Nov 01 Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 Javascript
JavaScript程序设计高级算法之动态规划实例分析
Nov 24 Javascript
详解@angular/cli 改变默认启动端口两种方式
Nov 29 Javascript
Vue插槽原理与用法详解
Mar 05 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
May 24 Javascript
Openlayers绘制聚合标注
Sep 28 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
PHP 第二节 数据类型之转换
2012/04/28 PHP
php之curl设置超时实例
2014/11/03 PHP
PHP实现的DES加密解密实例代码
2016/04/06 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
实例讲解php实现多线程
2019/01/27 PHP
js验证模型自我实现的具体方法
2013/06/21 Javascript
JS 精确统计网站访问量的实例代码
2013/07/05 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
2014/09/10 Javascript
20个实用的JavaScript技巧分享
2014/11/28 Javascript
基于JavaScript实现屏幕滚动效果
2017/01/18 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
2017/07/27 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
BootStrap table实现表格行拖拽效果
2018/12/01 Javascript
抖音上用记事本编写爱心小程序教程
2019/04/17 Javascript
读懂CommonJS的模块加载
2019/04/19 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
2020/08/07 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
2021/03/01 Vue.js
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
python os模块简单应用示例
2019/05/23 Python
python gensim使用word2vec词向量处理中文语料的方法
2019/07/05 Python
Python实现最大子序和的方法示例
2019/07/05 Python
Python urlopen()和urlretrieve()用法解析
2020/01/07 Python
Python docutils文档编译过程方法解析
2020/06/23 Python
Html5 Canvas 实现一个“刮刮乐”游戏
2019/09/05 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(三)
2013/01/21 HTML / CSS
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
澳大利亚在线百货商店:Real Smart
2017/08/13 全球购物
乌克兰时尚鞋子和衣服购物网站:Born2be
2018/05/24 全球购物
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
银行求职推荐信范文
2013/11/30 职场文书
单位在职证明范本
2014/01/09 职场文书
党员自我剖析材料
2014/08/31 职场文书
2014年外贸业务员工作总结
2014/12/11 职场文书
团员个人年度总结
2015/02/26 职场文书
python和Appium的移动端多设备自动化测试框架
2022/04/26 Python