js实现指定时间倒计时效果

 更新时间:2019年08月26日 09:43:30   作者:Vam的金豆之路  
这篇文章主要为大家详细介绍了js实现指定时间倒计时效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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时钟特效专题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • JS 中document.write()的用法和清空的原因浅析

    JS 中document.write()的用法和清空的原因浅析

    这篇文章主要介绍了JS 中document.write()的用法和清空的原因浅析,需要的朋友可以参考下
    2017-12-12
  • javascript中innerHTML 获取或替换html内容的实现代码

    javascript中innerHTML 获取或替换html内容的实现代码

    这篇文章主要介绍了javascript中innerHTML 获取或替换html内容,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • 妙用Bootstrap的 popover插件实现校验表单提示功能

    妙用Bootstrap的 popover插件实现校验表单提示功能

    最近使用bootstrap开发项目比较多,在表单校验功能中用popover插件实现出错提示功能很方面,下面小编给大家带来了一篇关于Bootstrap的 popover插件实现校验表单提示功能的实现代码,非常不错,感兴趣的朋友一起看看吧
    2016-08-08
  • JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法

    JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法

    这篇文章主要介绍了JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法,结合实例形式分析了javascript通过针对单击onclick事件增加定时器进行onClick事件与onDblClick事件的区别判定操作,需要的朋友可以参考下
    2018-06-06
  • uni-app 组件里面获取元素宽高的实现

    uni-app 组件里面获取元素宽高的实现

    这篇文章主要介绍了uni-app 组件里面获取元素宽高的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • 关于List.ToArray()方法的效率测试

    关于List.ToArray()方法的效率测试

    这篇文章主要介绍了关于List.ToArray()方法的效率测试的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-09-09
  • JS右下角广告窗口代码(可收缩、展开及关闭)

    JS右下角广告窗口代码(可收缩、展开及关闭)

    这篇文章主要介绍了JS右下角广告窗口代码,具有浮动显示、可收缩、展开及关闭等功能,涉及javascript针对页面元素属性操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • Bootstrap缩略图与警告框学习使用

    Bootstrap缩略图与警告框学习使用

    这篇文章主要为大家详细介绍了Bootstrap缩略图与警告框学习使用的相关资料,希望通过这篇文章和大家更多的去学习Bootstrap缩略图与警告框,从中得到收获
    2017-02-02
  • 原生js实现日历效果

    原生js实现日历效果

    这篇文章主要为大家详细介绍了原生js实现日历效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • webpack实现热更新(实施同步刷新)

    webpack实现热更新(实施同步刷新)

    本篇文章主要介绍了webpack实现热更新(实施同步刷新),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07

最新评论