가장 간단한 JavaScript 카운트다운 코드 공유(전체 코드 첨부)-JS 튜토리얼-php.cn

가장 간단한 JavaScript 카운트다운 코드 공유(전체 코드 첨부)

yulia

풀어 주다： 2018-10-15 10:30:54

원래의

22882명이 탐색했습니다.

회사에서 페이지에 카운트다운을 설정해야 하는 경우가 많은데, JS 카운트다운 코드를 작성하는 방법을 아시나요? 이 기사에서는 가장 간단한 JS 카운트다운 코드와 자세한 카운트다운 JS 코드 아이디어를 공유할 것입니다. 여기에는 특정 참조 가치가 있으며 관심 있는 친구들이 살펴볼 수 있습니다.

예: 마감일을 설정하고 남은 시간을 표시합니다. 예를 들어 Double Eleven이 곧 출시되고 판매자는 JS 카운트다운을 사용하여 활동이 끝날 때까지 남은 시간을 표시할 수 있습니다. 구체적인 코드는 다음과 같습니다.

HTML 부분:

<body onload = "countTime()">
  <div>
         <span id="day"></span>
         <span id="hour"></span>
         <span id="minute"></span>
         <span id="second"></span>
    </div>
 </body>

로그인 후 복사

남은 일, 시, 분, 초를 표시하는 4개의 태그 제공

JavaScript 부분:

<script type="text/javascript">
  function countTime() {
            //获取当前时间
            var date = new Date();
            var now = date.getTime();
            //设置截止时间
            var endDate = new Date("2018-10-31 0:0:0");
            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);                   
            }
            //将时间赋值到div中
            document.getElementById("day").innerHTML = d+"天";
            document.getElementById("hour").innerHTML = h+"时";
            document.getElementById("minute").innerHTML = m+"分";
            document.getElementById("second").innerHTML = s+"秒";
            //递归每秒调用countTime方法，显示动态时间效果
            setTimeout(countTime,1000);
 
        }
 </script>

로그인 후 복사

카운트다운 JS 코드 아이디어:

1. date = new Date()를 사용하여 현재 시간을 가져옵니다

2. 마감일을 설정합니다. endDate = new Date("2018-10-31 0:0:0")

3. 시차 가져오기 leftTime = end -now

4. 변수 d, h, m, s를 정의하고 if 함수를 사용하여 남은 일, 시간, 분, 초를 결정합니다.

5. innerHTML을 사용하여 div에 시간을 할당합니다.

6. 재귀적으로 1초마다 countTime 함수를 호출하여 동적 시간을 표시합니다. 효과

효과는 그림과 같습니다.

가장 간단한 JavaScript 카운트다운 코드 공유(전체 코드 첨부)