Implementierung einer Countdown-Funktion basierend auf Javascript_Javascript-Kenntnissen-js-Tutorial-php.cn

Implementierung einer Countdown-Funktion basierend auf Javascript_Javascript-Kenntnissen

WBOY

Freigeben： 2016-05-16 15:14:31

Original

1582 Leute haben es durchsucht

Das Beispiel in diesem Artikel implementiert eine Countdown-Funktion. Die Countdown-Funktion wird verwendet, um die Zeitfunktion in der Veröffentlichungszeit eines Projekts oder des Countdowns einer Aktivität usw. hervorzuheben.
Die Schnittstellencodestruktur muss zuerst fertiggestellt werden. Ich werde diese Schnittstelle nicht so schön machen, sondern nur (O(∩_∩)O haha~).

Codename

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>倒计时实现</title>
  <style>
    ul, li {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    #countdown {
      font-size: 50px;;
      width: 350px;
      margin: 0 auto;
      background-image: none;
      color: #fff;
      padding: 100px;
      font-weight: bolder;
    }
    #countdown ul {
      display: flex;
      align-items: flex-start;
      justify-content: center;
    }
    #countdown ul li{
      display: inline-block;
      margin-left: 10px;
    }
    #countdown ul li:last-child {
      margin-right: 10px;
    }

    #countdown ul li strong {
      text-shadow: 5px 5px 5px #000;
    }
    #countdown ul li strong, #countdown ul li span {
      display: block;
      text-align: center;
    }
    #sec {
      color: #ff0000;
      text-shadow: 5px 5px 2px #ff0000;
    }
  </style>
</head>
<body>
  <div id="countdown">
    <ul>
      <li>
        <strong id="day">00</strong>
        <span>天</span>
      </li>
      <li>:</li>
      <li>
        <strong id="hour">00</strong>
        <span>时</span>
      </li>
      <li>:</li>
      <li>
        <strong id="min">00</strong>
        <span>分</span>
      </li>
      <li>:</li>
      <li>
        <strong id="sec">00</strong>
        <span>秒</span>
      </li>
    </ul>
  </div>
</body>
</html>

Nach dem Login kopieren

Das Folgende ist eine Erklärung von Javascript.

Stellen Sie zunächst eine Endzeit ein und die Zeit wird über new Date() erstellt. Nur so kann die Countdown-Zeit berechnet werden

//结束时间
var t_endtime = new Date("2016-05-22 00:00:00");

Nach dem Login kopieren

Dann gibt es noch die Umrechnungsregeln. Die Umrechnung der Regeln ist gesunder Menschenverstand.

// 时间换算规则
var t_day = 60 * 60 * 24;
var t_hour = 60 * 60;
var t_min = 60;

Nach dem Login kopieren

Der Vergleich der aktuellen Zeit wird erneut über setInterval berechnet. Da die Zeit um eine Sekunde vergeht, muss die aktuelle Zeit natürlich in setInterval berechnet werden.

var ele_day = document.getElementById("day");
var ele_hour = document.getElementById("hour");
var ele_min = document.getElementById("min");
var ele_sec = document.getElementById("sec");

setInterval(function () {
  //获取当前时间
  var t_currenttime = new Date();
  //结束时间 - 当前时间 = 剩余时间
  var t_result = t_endtime.getTime() - t_currenttime.getTime();

  //剩余时间换算
  var t_time = Math.floor( t_result / 1000 );
  var t_result_day = Math.floor( t_time / t_day );
  var t_result_hour = Math.floor( t_time % t_day / t_hour);
  var t_result_min = Math.floor(t_time % t_day % t_hour/ t_min);
  var t_result_sec = Math.floor( t_time % t_day % t_hour % t_min);

  // 将时间小于10的,在值前面加入0;
  if ( t_result_day < 10) {
    t_result_day = "0" + t_result_day;
  }

  if ( t_result_hour < 10) {
    t_result_hour = "0" + t_result_hour;
  }

  if ( t_result_min < 10) {
    t_result_min = "0" + t_result_min;
  }

  if ( t_result_sec < 10) {
    t_result_sec = "0" + t_result_sec;
  }

  //显示到页面上
  ele_day.textContent = t_result_day;
  ele_hour.textContent = t_result_hour;
  ele_min.textContent = t_result_min;
  ele_sec.textContent = t_result_sec;

}, 1000);

Nach dem Login kopieren

Es ist ganz einfach, nur eine Countdown-Funktion.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.