• 包含天,时,分,秒的倒计时


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

    原生的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>
  • 相关阅读:
    Java:面向对象的编程语言
    Java基本数据类型
    NotePad++安装及配置
    MarkDown的黄金搭档Typora编辑器
    rabbitmq常用命令【转载】
    rabbitmqweb管理端口http://localhost:15672/ 无法访问可能出现的问题
    又一个关于TP5的坑 模板页注释了的 {aaa} 依然是会被访问的
    关于layui的分页
    使用TP5容易遇到的坑
    TP5访问不了控制器
  • 原文地址:https://www.cnblogs.com/ly-qingqiu/p/10304252.html
Copyright © 2020-2023  润新知