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 相关文章推荐
Jquery AutoComplete自动完成 的使用方法实例
Mar 19 Javascript
JavaScript 学习笔记之变量及其作用域
Jan 14 Javascript
JavaScript之数组(Array)详解
Apr 01 Javascript
Javascript中With语句用法实例
May 14 Javascript
JavaScript动态创建div等元素实例讲解
Jan 06 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
微信小程序实现图片轮播及文件上传
Apr 07 Javascript
Vue导出json数据到Excel电子表格的示例
Dec 04 Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 Javascript
js实现各浏览器全屏代码实例
Jul 03 Javascript
Vue-router 切换组件页面时进入进出动画方法
Sep 01 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
Oct 12 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 disk_free_space 返回目录可用空间
2010/05/10 PHP
thinkphp 多表 事务详解
2013/06/17 PHP
ThinkPHP缓存方法S()概述
2014/06/13 PHP
PHP速成大法
2015/01/30 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
php实现解析xml并生成sql语句的方法
2018/02/03 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
一些常用的JS功能函数(2009-06-04更新)
2009/06/04 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
2013/05/07 Javascript
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
JS实现下拉菜单赋值到文本框的方法
2015/08/18 Javascript
JS中如何实现点击a标签返回页面顶部的问题
2017/01/19 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
2017/02/09 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
2021/02/06 Javascript
Python三级菜单的实例
2017/09/13 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
python3+selenium实现126邮箱登陆并发送邮件功能
2019/01/23 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
使用python的turtle绘画滑稽脸实例
2019/11/21 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
python如何操作mysql
2020/08/17 Python
Python爬虫+Tkinter制作一个翻译软件的示例
2021/02/20 Python
中学教师培训制度
2014/01/31 职场文书
好听的队名和口号
2014/06/09 职场文书
担保书范文
2015/01/20 职场文书
大连导游词
2015/02/12 职场文书
加班费申请报告
2015/05/15 职场文书
详细分析PHP7与PHP5区别
2021/06/26 PHP
Go Plugins插件的实现方式
2021/08/07 Golang