脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js网页版倒计时

JavaScript实现前端网页版倒计时

 更新时间：2021年03月19日 10:53:20   作者：小 菜  
这篇文章主要为大家详细介绍了JavaScript实现前端网页版倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

使用原生JavaScript简单实现倒计时，供大家参考，具体内容如下

效果

代码

// An highlighted block
<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <title></title>

 <!-- css样式 -->
 <style type="text/css">
  * {
   margin: 0;
   padding: 0;
  }

  .onsell {
   height: 400px;
   width: 200px;
   border: 1px solid #F2F2F2;
   margin: 10px;
   box-shadow: 1px 2px 4px rgba(0, 0, 0, .2);
  }

  .box {
   /* display: none; */
   float: left;
   margin: 328px 34px 0;
  }

  .box div {
   position: relative;
   display: inline-block;
   width: 40px;
   height: 40px;
   background-color: #333;
   color: #fff;
   font-size: 20px;
   text-align: center;
   line-height: 40px;
   box-shadow: 1px 2px 4px rgba(0, 0, 0, .4);
  }
 </style>

</head>

<body>
 <!-- 要求：某商品在将来某一天进行促销一天，利用js制作倒计时效果： 时：分：秒 -->
 <div class="onsell">
  <div class="box">
   <div class="hour">00</div>
   <div class="minutes">00</div>
   <div class="seconds">00</div>
  </div>
 </div>
</body>

</html>
<script>
 window.onload = function () {
  let hour = document.querySelector('.hour')
  let minutes = document.querySelector('.minutes')
  let seconds = document.querySelector('.seconds')

  // 倒计时的时间戳 使用+将时间对象转为时间戳 等同于Date.now()
  let wantTime = +new Date('2021-3-17 18:00:00')
  countTime()

  let timer = setInterval(() => {
   countTime()
  }, 1000)

  function countTime() {
   let currentTime = +new Date()
   if (wantTime >= currentTime) {
    let times = (wantTime - currentTime) / 1000 // 总秒数 时间戳/1000 = 秒
    let remainDay = parseInt(times / 60 / 60 / 24) // 余数取整就是剩余的天数
    console.log(remainDay);
    if (remainDay === 0) {
     if(times < 1) {
     // 倒计时完毕
     // 这里触发操作
     }
     // 天数小于一天开始计时
     setTime(times)
    }
   } else {
    hour.innerHTML = '00'
    minutes.innerHTML = '00'
    seconds.innerHTML = '00'
   }
  }


  function setTime(time) {

   // 粗糙版
   let s = parseInt(time % 60)
   s = s < 10 ? '0' + s : s
   let m = parseInt(time / 60 % 60)
   m = m < 10 ? '0' + m : m
   let h = parseInt(time / 60 / 60 % 24)
   h = h < 10 ? '0' + h : h
   hour.innerHTML = h
   minutes.innerHTML = m
   seconds.innerHTML = s

  }

 }
</script>

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

您可能感兴趣的文章:

相关文章

  • JavaScript中获取高度和宽度函数总结

    JavaScript中获取高度和宽度函数总结

    这篇文章主要介绍了JavaScript中获取高度和宽度函数总结,例如获取视窗大小、可见区域宽、可见区域高、获取元素自身大小等,很方便的一个总结,需要的朋友可以参考下
    2014-10-10
  • 极易被忽视的javascript面试题七问七答

    极易被忽视的javascript面试题七问七答

    这篇文章主要为大家详细介绍了一道极易被忽视的javascript面试题七问七答，感兴趣的小伙伴们可以参考一下
    2016-02-02
  • 微信小程序日历效果

    微信小程序日历效果

    这篇文章主要为大家详细介绍了微信小程序日历效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-12-12
  • 如何用js实现鼠标向上滚动时浮动导航

    如何用js实现鼠标向上滚动时浮动导航

    今天给大家介绍一下使用JavaScript判断鼠标滑轮是不是向上滚动，当向上滚动的时候，导航条浮动在顶部位置。示例代码如下。
    2016-07-07
  • Cookie 小记

    Cookie 小记

    Cookie 经常用，也就是把关键信息记录进去，确认不在保留信息，则设置使之过期。
    2010-04-04
  • JS实现多物体运动的方法详解

    JS实现多物体运动的方法详解

    这篇文章主要介绍了JS实现多物体运动的方法,结合实例形式较为详细的分析了javascript实现多物体运动的原理与相关操作技巧,需要的朋友可以参考下
    2018-01-01
  • js仿360开机效果

    js仿360开机效果

    这篇文章主要为大家详细介绍了js仿360开机效果，并且封装一个带回调函数的缓动动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-12-12
  • 原生javascript单例模式的应用实例分析

    原生javascript单例模式的应用实例分析

    这篇文章主要介绍了原生javascript单例模式的应用,结合实例形式分析了JavaScript单例模式的基本功能、原理、应用及操作注意事项,需要的朋友可以参考下
    2020-02-02
  • javascript字体颜色控件的开发 JS实现字体控制

    javascript字体颜色控件的开发 JS实现字体控制

    小编给大家带来一个用javascript编写的能控制字体大小个颜色等基本信息的控件写法，喜欢的尝试编写一下。
    2017-11-11
  • 一道关于JavaScript变量作用域的面试题

    一道关于JavaScript变量作用域的面试题

    这篇文章主要为大家介绍了一道关于JavaScript变量作用域的面试题，如何解决这道面试题，感兴趣的小伙伴们可以参考一下
    2016-03-03

最新评论