>  기사  >  웹 프론트엔드  >  js에서 카운트다운 기능을 구현하는 방법은 무엇입니까? (밀리초 단위로 정확함)

js에서 카운트다운 기능을 구현하는 방법은 무엇입니까? (밀리초 단위로 정확함)

藏色散人
藏色散人원래의
2018-08-06 15:16:544092검색

이 글은 주로 js를 사용하여 카운트다운을 구현하는 효과를 소개하고 있으며, 밀리초 단위로 정확합니다. 필요한 친구들이 참고하시면 좋을 것 같습니다.

JS에서 카운트다운을 구현하는 구체적인 코드 예시는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="" />
    <title>js精确到毫秒的倒计时代码 </title>
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var times = 60 * 100; // 60秒
            countTime = setInterval(function() {
                times = --times < 0 ? 0 : times;
                var ms = Math.floor(times / 100).toString();

                if(ms.length <= 1) {
                    ms = "0" + ms;
                }
                var hm = Math.floor(times % 100).toString();
                if(hm.length <= 1) {
                    hm = "0" + hm;
                }
                if(times == 0) {
                    alert("游戏结束");
                    clearInterval(countTime);
                }
                // 获取分钟、毫秒数
                $(".a").html(ms);
                $(".b").html(hm);
            }, 10);
        });
    </script>
    <style>
        .warp{
            width: 100%;
            height: 100px;
            line-height: 100px;
            text-align: center;
            font-size: 40px;
            font-family: "微软雅黑";
        }
        .warp strong{
            width: 100px;
            display: inline-block;
            text-align: center;
            font-family: georgia;
            color: #C9302C;
        }
    </style>
</head>
<body>
<div class="warp">
    <strong class="a">111</strong>秒 <strong class="b"></strong>毫秒</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px &#39;MicroSoft YaHei&#39;;">
</div>
</body>
</html>

js에서 카운트다운 기능을 구현하는 방법은 무엇입니까? (밀리초 단위로 정확함)

[관련 추천 글]

JS에서 카운트다운(일, 시, 분, 초)을 구현합니다

2 간단 js 카운트다운 구현 방법

js 고효율 서버 시간 동기화 카운트다운

기간 한정 세일 카운트다운 기능 구현 방법


위 내용은 js에서 카운트다운 기능을 구현하는 방법은 무엇입니까? (밀리초 단위로 정확함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.