zoukankan      html  css  js  c++  java
  • 包含天,时,分,秒的倒计时

    这个很基础的东西写的过程中出了很多小的错误,在此记录一下。

    原生的js。

    结构:

    <p id="time"></p>

    js:

    <script>
      var start = new Date().getTime(); // 获取开始时间
      var end = new Date("2019-01-22 18:00:00").getTime(); // 设置结束时间
      var space = Math.floor((end-start)/1000) // 获取时间差值
      function countDown(time){
        var timer = null;
        timer = setInterval(function(){
          var day = 0; // 设置默认时间均为0
            hour = 0;
            minute = 0;
            second = 0;
          if(time > 0){
            day = Math.floor(time / 60 / 60 / 24);
            hour = Math.floor(time / 60 / 60 % 24);
            minute = Math.floor(time / 60 % 60);
            second = Math.floor(time % 60);

            
          //    其中计算时间的这部分代码可以写成如下两种方式:

            day = Math.floor(times / (60 * 60 * 24));
            hour = Math.floor(times / (60 * 60)) - (day * 24);
            minute = Math.floor(times / 60) - (day * 24 * 60) - (hour * 60);
            second = Math.floor(times) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
          
          // 或者:
            
            day = parseInt(times / 60 / 60/ 24);
            hour = parseInt(times / 60 / 60 % 24);
            minute = parseInt(times / 60 % 60);
            second = parseInt(times % 60);

          }

          
          

          
          if(minute <= 9){
            minute = "0" + minute;
          }
          if(second <= 9){
            second = "0" + second;
          }
          time--;
          document.getElementById("time").innerHTML = "剩余时间是:"+day+"天"+hour+"小时"+minute+"分"+second+"秒";
        },1000)
        if(time <= 0){
          clearInterval(timer) // 关闭定时器
        }
      }
      countDown(space);
    </script>
  • 相关阅读:
    document.body.scrollTop or document.documentElement.scrollTop
    获取到body的offsetTop和offsetLeft值
    Web安全学习笔记之一
    angular.js学习笔记之一
    backbone学习笔记一
    IE中的CSS3不完全兼容方案
    c#调用c++库函数
    c++动态库封装及调用(3、windows下动态库调用)
    c++动态库封装及调用(2、windows下动态库创建)
    c++动态库封装及调用(1、动态库介绍)
  • 原文地址:https://www.cnblogs.com/ly-qingqiu/p/10304252.html
Copyright © 2011-2022 走看看