倒计时效果_78273740-优快云博客

本文链接：https://blog.youkuaiyun.com/WJM_Aunt/article/details/78273740

本文介绍了JavaScript中Date对象的基本使用方法，包括获取当前时间和日期、实现倒计时和限时抢购等功能。通过具体实例展示了如何利用JavaScript进行日期时间的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

知识点

JavaScript Date （日期对象）

Date() 返回当前的日期和时间
getDate() 查看date对象并返回日期（1-31）
getDay() 返回星期（0-6）
getHours() 返回小时数（0-23）
getMinutes() 返回分钟数（0-59）
getMonth() 返回月份值（0-11，当前月份+1）
getSeconds() 返回秒数
getTime() 返回毫秒数
getYear() 返回年份，获取年份的时候用
getFullYear() 方法操作

一、获取系统时间

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>当前系统时间显示</title>
</head>
<body>
<div id="show">显示时间的位置</div>
<script>
    window.onload = function () {
      showTime();
    }
    //如果分数和秒数是单个数字的话，前面加个0，格式整洁
    function checkTime(i){
        if(i<10){
            i = "0"+i;
        }
        return i;
    }
    function showTime(){
      var myDate = new Date();
      var year = myDate.getFullYear();
      var month = myDate.getMonth();
      var date = myDate.getDate();
      var day = myDate.getDay();
      //将获取到的数字转成字符串格式
      var weekday = new Array(7);
      weekday[0] = "星期日";
      weekday[1] = "星期一";
      weekday[2] = "星期二";
      weekday[3] = "星期三";
      weekday[4] = "星期四";
      weekday[5] = "星期五";
      weekday[6] = "星期六";
      var hour = myDate.getHours();
      var minute = myDate.getMinutes();
      var seconds = myDate.getSeconds();
      minute = checkTime(minute);
      seconds = checkTime(seconds);
      document.getElementById("show").innerHTML = year+"年"+month+"月"+date+"日 "+weekday[day]+" "+hour+":"+minute+":"+seconds;
      setTimeout(showTime, 500);
    }
</script>
</body>
</html>

二、倒计时时差

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>倒计时时差</title>
</head>
<body>
  <div>距离2018年元旦还有 <span id="showTime">时间差</span> 天</div>
  <script>
    window.onload = function(){
      var nowtime = new Date();
      var endtime = new Date("2018,1,1");
      var lefttime = Math.ceil((endtime.getTime()-nowtime.getTime())/(24*60*60*1000));
      document.getElementById("showTime").innerHTML = lefttime;
    }
  </script>
</body>
</html>

（1）Math.ceil()

执行的是向上取整计算，返回的是大于或等于函数参数，并且与之最接近的整数。

（2）逻辑

结束时间 - 当前时间 = 时间差
时间差：毫秒差，向上取整计算

三、限时抢

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>限时抢购</title>
</head>
<body>
<div>还剩<span id="showTime">最后抢购时间</span></div>
<script>
  window.onload = function(){
    showTime();
  }
  function showTime(){
    var nowtime = new Date();
    var endtime = new Date("2017/6/27,18:00:00");
    //parseInt() 取整
    var lefttime = parseInt((endtime.getTime()-nowtime.getTime())/1000);
    var d = parseInt(lefttime/(24*60*60));
    var h = parseInt(lefttime/(60*60)%24);
    var m = parseInt(lefttime/60%60);
    var s = parseInt(lefttime%60);
    var st = document.getElementById("showTime");
    st.innerHTML = d+"天"+h+"小时"+m+"分"+s+"秒";
    if (endtime<=0){
      st.innerHTML = "抢购结束！";
    }
    setTimeout(showTime, 500);
  }
</script>
</body>
</html>