집 > 기사 > 웹 프론트엔드 > JS에서 카운트다운 효과를 얻는 두 가지 방법에 대한 간략한 설명(코드 예제)

JS에서 카운트다운 효과를 얻는 두 가지 방법에 대한 간략한 설명(코드 예제)

PHPz앞으로: 2016-05-16 15:03:022755검색

이 기사에서는 JS 카운트다운의 두 가지 구현 방법에 대한 코드 예제를 주로 소개합니다. 예제 코드를 통해 이를 매우 자세하게 소개합니다. 이는 모든 사람의 학습이나 작업에 대한 특정 참조 학습 가치를 가지고 있습니다. 최근 브라우저 개발 js를 사용하여 인터페이스 카운트다운을 구현할 수 있습니다.

하나: 기간과 카운트다운을 설정합니다. 예를 들어 시험 시간 등

코드는 다음과 같습니다.

<html>
<head>
<meta charset="UTF-8">
<title>简单时长倒计时</title>
<SCRIPT type="text/javascript">
      var maxtime = 60 * 60; //一个小时，按秒计算，自己调整!
      function CountDown() {
        if (maxtime >= 0) {
          minutes = Math.floor(maxtime / 60);
          seconds = Math.floor(maxtime % 60);
          msg = "距离结束还有" + minutes + "分" + seconds + "秒";
          document.all["timer"].innerHTML = msg;
          if (maxtime == 5 * 60)alert("还剩5分钟");
            --maxtime;
        } else{
          clearInterval(timer);
          alert("时间到，结束!");
        }
      }
      timer = setInterval("CountDown()", 1000);
    </SCRIPT>
</head>
<body>
<p id="timer" style="color:red"></p>
<p id="warring" style="color:red"></p>
</body>
</html>

실행 결과:

JS에서 카운트다운 효과를 얻는 두 가지 방법에 대한 간략한 설명(코드 예제)

2: 카운트다운을 위한 타임스탬프 설정. 예를 들어 이벤트 종료까지의 시간 등

코드는 다음과 같습니다.

<html>
<head>
  <meta charset="UTF-8">
  <title>js简单时分秒倒计时</title>
  <script type="text/javascript">
    function countTime() {
      //获取当前时间
      var date = new Date();
      var now = date.getTime();
      //设置截止时间
      var str="2017/5/17 00:00:00";
      var endDate = new Date(str);
      var end = endDate.getTime();

      //时间差
      var leftTime = end-now;
      //定义变量 d,h,m,s保存倒计时的时间
      var d,h,m,s;
      if (leftTime>=0) {
        d = Math.floor(leftTime/1000/60/60/24);
        h = Math.floor(leftTime/1000/60/60%24);
        m = Math.floor(leftTime/1000/60%60);
        s = Math.floor(leftTime/1000%60);
      }
      //将倒计时赋值到p中
      document.getElementById("_d").innerHTML = d+"天";
      document.getElementById("_h").innerHTML = h+"时";
      document.getElementById("_m").innerHTML = m+"分";
      document.getElementById("_s").innerHTML = s+"秒";
      //递归每秒调用countTime方法，显示动态时间效果
      setTimeout(countTime,1000);

    }
  </script>
</head >
<body onload="countTime()" >
  <p>
    <span id="_d">00</span>
    <span id="_h">00</span>
    <span id="_m">00</span>
    <span id="_s">00</span>
  </p>
</body>
</html>

실행 결과:

JS에서 카운트다운 효과를 얻는 두 가지 방법에 대한 간략한 설명(코드 예제)

JS에서 카운트다운 효과를 얻는 두 가지 방법에 대한 간략한 설명(코드 예제)

관련 기사