집 > 기사 > 웹 프론트엔드 > Javascript_javascript 스킬을 기반으로 카운트다운 기능 구현

Javascript_javascript 스킬을 기반으로 카운트다운 기능 구현

WBOY원래의: 2016-05-16 15:14:311536검색

이 글의 예시에서는 카운트다운 기능을 구현했습니다. 카운트다운 기능은 프로젝트 출시 시간이나 활동 카운트다운 등에서 시간 기능을 강조하는 데 사용됩니다.
먼저 인터페이스 코드 구조를 완성해야 합니다. 인터페이스를 너무 아름답게 만들지 말고 그냥 만들어 보세요(O(∩_∩)O 하하~).

코드명

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

다음은 Javascript에 대한 설명입니다.

먼저 종료 시간을 설정하고 new Date()를 통해 시간을 생성해야 카운트다운 시간을 계산할 수 있습니다.

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

그리고 변환 규칙이 있습니다. 규칙의 변환은 상식입니다.

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

다시 한번, 현재 시간의 비교는 setInterval을 통해 계산됩니다. 시간이 1초씩 흐르기 때문에 현재 시간은 setInterval에서 계산됩니다. 물론 계산된 결과가 인터페이스에 표시되어야 합니다.

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

매우 간단합니다. 카운트다운 기능입니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

성명：

이전 기사：JS_javascript 기술에서 JSON 문자열을 구문 분석하는 Eval의 작은 문제다음 기사：JS_javascript 기술에서 JSON 문자열을 구문 분석하는 Eval의 작은 문제

Javascript_javascript 스킬을 기반으로 카운트다운 기능 구현

관련 기사