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


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

    原生的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 Applet实现五子棋游戏
    CrawlScript脚本语言实现网络爬虫
    Eclipse集成Git的实践
    以图表形式分析和统计数据
    爬虫抓取分页数据的简单实现
    爬虫的简单实现
    使用htmlparser爬虫技术爬取电影网页的全部下载链接
    使用webcollector爬虫技术获取网易云音乐全部歌曲
    百度地图API-覆盖物
    百度地图API-控件
  • 原文地址:https://www.cnblogs.com/ly-qingqiu/p/10304252.html
Copyright © 2020-2023  润新知