Perbincangan ringkas tentang dua cara untuk mencapai kesan undur dalam JS (contoh kod)-tutorial js-php.cn

Perbincangan ringkas tentang dua cara untuk mencapai kesan undur dalam JS (contoh kod)

PHPz

Lepaskan： 2021-05-31 16:00:16

ke hadapan

2746 orang telah melayarinya

Artikel ini terutamanya memperkenalkan contoh kod bagi dua kaedah pelaksanaan kira detik JS Artikel ini memperkenalkannya dengan terperinci melalui kod contoh Ia mempunyai nilai pembelajaran rujukan tertentu untuk kajian atau kerja semua orang pembangunan penyemak imbas terkini Kira detik antara muka boleh dilaksanakan menggunakan js Terdapat dua cara:

Perbincangan ringkas tentang dua cara untuk mencapai kesan undur dalam JS (contoh kod)

Satu: Tetapkan tempoh dan kira detik. Contohnya, masa peperiksaan, dsb.

Kodnya adalah seperti berikut:

<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>

Salin selepas log masuk

Keputusan berjalan:

Perbincangan ringkas tentang dua cara untuk mencapai kesan undur dalam JS (contoh kod)

2: Cap Masa Tetapan untuk kira detik. Contohnya, masa sehingga tamat acara, dsb.

Kodnya adalah seperti berikut:

<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>

Salin selepas log masuk

Hasil berjalan:

Perbincangan ringkas tentang dua cara untuk mencapai kesan undur dalam JS (contoh kod)