JavaScript实现前端倒计时效果

本文实例为大家分享了JavaScript实现前端倒计时效果的具体代码，供大家参考，具体内容如下

代码：

!DOCTYPE htML>
    html lang="en">
    head>
      meta charset="UTF-8">
      tITle>
    Title/title>
      style>
    div {
          padding: 10px;
          font-Size: 100px;
    }
        p {
          float: left;
          width: 300px;
          height: 300px;
          border: 1px solid #000000;
          color: #ffffff;
          background-color: #333333;
          text-align: center;
          line-height: 300px;
    }
      /style>
    /head>
    body>
      div>
        p class="hour">
    1/p>
        p class="minute">
    2/p>
        p class="second">
    3/p>
      /div>
      script>
    window.addEventListener('load', function() {
          //获取元素      VAR hour = document.querySelector('.hour');
     //小时的黑盒子      var minute = document.querySelector('.minute');
     //分钟的黑色盒子      var second = document.querySelector('.second');
     //秒数的黑色盒子      var inputTime = +new Date('2021-2-6 18:00:00');
     //返回的是用户输入时间总的毫秒数      countDown();
     //先调用一次这个函数，防止第一次刷新页面有空白      //开启定时器      setInterval(countDown, 1000);
      function countDown() {
            var nowTime = +new Date();
     //返回的是当前时间总的毫秒数        var times = (inputTime - nowTime) / 1000;
     //tiems是剩余时间总的毫秒数        var h = parseInt(times / 60 / 60 % 24);
     //时        h = h  10 ? '0' + h : h;
            hour.innerHTML = h;
     //把剩余的小时给小时黑盒子        var m = parseInt(times / 60 % 60);
     //分        m = m  10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60);
     //当前的秒        s = s  10 ? '0' + s : s;
            second.innerHTML = s;
      }
    }
    )/script>
    

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

• JS 倒计时实现代码(时、分，秒)
• JS实现倒计时(天数、时、分、秒)
• 简单易用的倒计时js代码
• js代码实现点击按钮出现60秒倒计时
• 2种简单的js倒计时方式
• 原生JS实现简单的倒计时功能示例
• js几秒以后倒计时跳转示例
• 一个不错的js html页面倒计时可精确到秒
• js实现点击获取验证码倒计时效果
• Javascript实现商品秒杀倒计时（时间与服务器时间同步）

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！