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之十四 (触发事件核心方法)
Aug 23 Javascript
JavaScript通过RegExp实现客户端验证处理程序
May 07 Javascript
Angular中$compile源码分析
Jan 28 Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
Sep 22 Javascript
angularjs实现柱状图动态加载的示例
Dec 11 Javascript
layui输入框中只允许输入整数的实现方法
Sep 18 Javascript
javascript实现fetch请求返回的统一拦截
Dec 22 Javascript
jQuery 选择器用法基础入门示例
Jan 04 jQuery
element el-table表格的二次封装实现(附表格高度自适应)
Jan 19 Javascript
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 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
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
php阳历转农历优化版
2016/08/08 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
PHP页面静态化――纯静态与伪静态用法详解
2020/06/05 PHP
JS类定义原型方法的两种实现的区别评论很多
2007/09/12 Javascript
创建公共调用 jQuery Ajax 带返回值
2012/08/01 Javascript
javascript不可用的问题探究
2013/10/01 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
JavaScript 随机验证码的生成实例代码
2016/09/22 Javascript
Vue数据驱动模拟实现2
2017/01/11 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
Javascript删除数组里的某个元素
2019/02/28 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
Vue移动端实现图片上传及超过1M压缩上传
2019/12/23 Javascript
nodejs对mongodb数据库的增加修删该查实例代码
2020/01/05 NodeJs
使用React-Router实现前端路由鉴权的示例代码
2020/07/26 Javascript
vue动画—通过钩子函数实现半场动画操作
2020/08/09 Javascript
Python实现的石头剪子布代码分享
2014/08/22 Python
浅谈python import引入不同路径下的模块
2017/07/11 Python
python 提取tuple类型值中json格式的key值方法
2018/12/31 Python
python多进程读图提取特征存npy
2019/05/21 Python
Python中的 is 和 == 以及字符串驻留机制详解
2019/06/28 Python
Django模板Templates使用方法详解
2019/07/19 Python
Python FtpLib模块应用操作详解
2019/12/12 Python
python enumerate内置函数用法总结
2020/01/07 Python
Python2和Python3中@abstractmethod使用方法
2020/02/04 Python
PyQt5实现登录页面
2020/05/30 Python
西班牙英格列斯百货法国官网:El Corte Inglés法国
2017/07/09 全球购物
优秀教师工作感言
2014/02/16 职场文书
2014年创先争优活动总结
2014/05/04 职场文书
幼儿园安全生产月活动总结
2014/07/05 职场文书
五年级学生评语大全
2014/12/26 职场文书
python脚本框架webpy模板赋值实现
2021/11/20 Python
5道关于python基础 while循环练习题
2021/11/27 Python
Linux系统下MySQL配置主从分离的步骤
2022/03/21 MySQL