JS를 사용하여 10ms까지 정확한 스톱워치 만들기(코드 첨부)-JS 튜토리얼-php.cn

이 기사의 내용은 JS를 사용하여 10ms까지 정확할 수 있는 스톱워치 제작을 구현하는 내용입니다(코드 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. .

이 기간 동안 js를 접하게 되었는데, 배운 지식을 활용하여 간단한 스톱워치를 만들고 싶습니다.

스톱워치를 만드는 아이디어는 다음과 같습니다.

1. 먼저 기능과 인터페이스를 결정합니다.

제 목적은 가장 간단한 스톱워치를 만드는 것이기 때문에 시작, 종료, 재설정 기능만 필요합니다. 인터페이스는 아래와 같습니다:

실행이 시작되지 않음:

실행 중:

2. 구현 방법을 구상합니다.

먼저 핵심 메소드는 단연 setInterval() 메소드로, 주기적으로 시간을 표시하는데 사용됩니다. 10ms까지 정확하게 하고 싶어서 시간 간격을 10으로 설정했습니다.

게다가 시간을 늘리는 방법은 무엇입니까?

A . 제가 생각하기 시작한 것은 변수 설정입니다. 밀리초, 초, 분, 시간입니다. milliSeconds는 10ms마다 1씩 증가합니다. milliSeconds >= 100인 경우 milliSeconds 모듈로 100을 사용하고 동시에 초는 1씩 증가합니다. 마찬가지로 초가 60에 도달하면 분은 1씩 증가하고 분이 60에 도달하면 시간은 1씩 증가합니다.

단, 형식의 통일성을 보장하기 위해(2:1:24:6이 아닌 02:01:24:06을 표시하고 싶습니다) 위와 같은 생각으로 4개의 변수를 8개의 변수로 변경했습니다. . (코드에 대해서는 이 페이지 끝에 있는 "지연이 있는 스톱워치"를 참조하십시오.)

단, 작동 중 딜레이 문제가 발생하여 딜레이가 누적됩니다. 시간이 짧을 때에도 비교적 정확하게 작동할 수 있습니다. 시간이 지남에 따라 스톱워치의 시간은 표준 시간에서 크게 벗어나게 됩니다.

비. 지연을 줄이기 위해 다른 방법을 설계했습니다(실제로 이 방법은 이전 방법보다 지연이 더 높습니다). 이때 트리거 시작을 기록하는 데는 하나의 시간 변수만 사용됩니다. 버튼을 누른 후 경과한 밀리초 수(시간은 10ms 단위, 아래의 a/b/c/d는 밀리초(10ms), 초, 분, 시를 나타냄). 형식의 통일성을 추구하기 위해 다음과 같이 덧붙였습니다. 명령문에서 a/b/c/d가 10보다 작으면 앞에 0 자리 표시자를 추가합니다.

var a=time%100;
var b=time%6000/100;
var c=time%360000/6000;
var d=time%8640000/36000;

로그인 후 복사

솔루션 A와 B를 비교하세요. A는 시간을 계산하기 위해 중첩된 형식을 사용하므로 시간이 짧을 경우 계획 A는 더 적은 판단이 필요하고 더 효율적이지만 계획 B의 경우 각 주기는 4번의 계산을 거쳐야 하므로 시간이 짧을 경우 효율성이 높아집니다. A보다 훨씬 낮습니다.

C .실시간과 오류없이 동기화하기 위해 다른 방법을 생각했습니다. JS Date 객체에는 1970년 1월 1일 이후의 밀리초 수를 반환하는 데 사용되는 getTime()이라는 메서드가 있습니다. start를 클릭하면 getTime()이 발생하는데, 이 시간을 기준으로 getTime()이 10밀리초마다 실행되며 전자에서 후자를 빼서 상대 시간을 구한다. 이러한 방식으로 실시간 동기화 문제가 완벽하게 해결됩니다.

아래 세 가지 코드가 첨부되어 있습니다.

Code 1

<!doctype html>
<html>
    <head>
        <title>有延迟的秒表</title>
        <style type="text/css"></style>        
    </head>
    <body>
        <div id="div1">
            <span id="span10">0</span><span id="span11">0</span> :
            <span id="span20">0</span><span id="span21">0</span> :
            <span id="span30">0</span><span id="span31">0</span> :
            <span id="span40">0</span><span id="span41">0</span>
        </div>
        <input id="input1" type="button" value="start" onclick="whenClick();">
        <input id="input2" type="button" value="clear" onclick="clear1();">
        <script  type="text/javascript">
            var milliSeconds1 = document.getElementById("span41");
            var milliSeconds0 = document.getElementById("span40");
            var seconds1 = document.getElementById("span31");
            var seconds0 = document.getElementById("span30");
            var minutes1 = document.getElementById("span21");
            var minutes0 = document.getElementById("span20");
            var hours1 = document.getElementById("span11");
            var hours0 = document.getElementById("span10");
            var flag;

            function whenClick(){//  开始/暂停
                var inputValue = document.getElementById("input1");
                if(inputValue.value=="start"||inputValue.value=="continue"){
                    inputValue.value=" stop";
                    start1();
                }
                else {
                    inputValue.value="continue";
                    stop1();
                }
            }
            
            function clear1(){//  清零
                stop1();
                milliSeconds1.innerHTML = milliSeconds0.innerHTML = 
                seconds1.innerHTML = seconds0.innerHTML = minutes1.innerHTML = 
                minutes0.innerHTML = hours1.innerHTML = hours0.innerHTML = 0;
                document.getElementById("input1").value = "start";
            }

            function start1(){//  开始/继续
                flag = setInterval("timeIncrement();",10);
            }

            function timeIncrement(){
                milliSeconds1.innerHTML++;
                if(milliSeconds1.innerHTML>=10){
                    milliSeconds1.innerHTML%=10;
                    milliSeconds0.innerHTML++;
                    if(milliSeconds0.innerHTML>=10){
                        milliSeconds0.innerHTML%=10;
                        seconds1.innerHTML++;
                        if(seconds1.innerHTML>=10){
                            seconds1.innerHTML%=10;
                            seconds0.innerHTML++;
                            if(seconds0.innerHTML>=6){
                                seconds0.innerHTML%=6
                                minutes1.innerHTML++;
                                if(minutes1.innerHTML>=10){
                                    minutes1.innerHTML%=10;
                                    minutes0.innerHTML++;
                                    if(minutes0.innerHTML>=6){
                                        minute0.innerHTML%=6;
                                        hours1.innerHTML++;
                                        if(hours1.innerHTML>=10){
                                            hours1.innerHTML%=10;
                                            hours0.innerHTML++;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

            function stop1(){//  暂停/停止
                clearInterval(flag);
            }

        </script>
    </body>
</html>

로그인 후 복사

Code 2

<!doctype html>
<html>
    <head>
        <title>仍然有延迟的秒表</title>
        <style type="text/css"></style>        
    </head>
    <body>
        <div id="div1">
            <span id="span1">00</span> :
            <span id="span2">00</span> :
            <span id="span3">00</span> :
            <span id="span4">00</span>
        </div>
        <input id="input1" type="button" value="start" onclick="whenClick();">
        <input id="input2" type="button" value="clear" onclick="clear1();">
        <script  type="text/javascript">
            var milliSeconds1 = document.getElementById("span4");
            var seconds1 = document.getElementById("span3");
            var minutes1 = document.getElementById("span2");
            var hours1 = document.getElementById("span1");
            var time = 0;
            var flag;

            function whenClick(){//  开始/暂停
                var inputValue = document.getElementById("input1");
                if(inputValue.value=="start"||inputValue.value=="continue"){
                    inputValue.value=" stop";
                    start1();
                }
                else {
                    inputValue.value="continue";
                    stop1();
                }
            }
            
            function clear1(){//  清零
                stop1();
                milliSeconds1.innerHTML = seconds1.innerHTML =minutes1.innerHTML = hours1.innerHTML = "00";
                time=0;
                document.getElementById("input1").value = "start";
            }

            function start1(){//  开始/继续
                flag = setInterval("timeIncrement();",10);
            }

            function timeIncrement(){
                time++;
                var a=time%100;
                var b=time%6000/100;
                var c=time%360000/6000;
                var d=time%8640000/360000;
                milliSeconds1.innerHTML=(a<10)?(&#39;0&#39;+a):a;
                seconds1.innerHTML=(b<10)?(&#39;0&#39;+Math.floor(b)):(Math.floor(b));
                minutes1.innerHTML=(c<10)?(&#39;0&#39;+Math.floor(c)):(Math.floor(c));
                hours1.innerHTML=(d<10)?(&#39;0&#39;+Math.floor(d)):(Math.floor(d));
            }

            function stop1(){//  暂停/停止
                clearInterval(flag);
            }

        </script>
    </body>
</html>

로그인 후 복사

Code 3(시간과 동기화된 코드)

<!doctype html>
<html>
    <head>
        <title>秒表</title>
        <style type="text/css"></style>        
    </head>
    <body>
        <div id="div1">
            <span id="span1">00</span> :
            <span id="span2">00</span> :
            <span id="span3">00</span> :
            <span id="span4">00</span>
        </div>
        <input id="input1" type="button" value="start" onclick="whenClick();">
        <input id="input2" type="button" value="clear" onclick="clear1();">
        <script  type="text/javascript">
            var milliSeconds1 = document.getElementById("span4");
            var seconds1 = document.getElementById("span3");
            var minutes1 = document.getElementById("span2");
            var hours1 = document.getElementById("span1");
            var time=0;
            var pre_time=0;
            var intervals=0;
            var pre_intervals=0;
            var flag;

            function whenClick(){//  开始/暂停
                var inputValue = document.getElementById("input1");
                if(inputValue.value=="start"||inputValue.value=="continue"){
                    var date= new Date();
                    time = date.getTime();
                    pre_time=time;
                    inputValue.value="stop ";
                    start1();
                }
                else {
                    inputValue.value="continue";
                    stop1();
                }
            }
            
            function clear1(){//  清零
                stop1();
                milliSeconds1.innerHTML = seconds1.innerHTML =minutes1.innerHTML = hours1.innerHTML = "00";
                time=0;
                pre_time=0;
                intervals=0;
                pre_intervals=0;
                document.getElementById("input1").value = "start";
            }

            function start1(){//  开始/继续
                flag = setInterval("timeIncrement();",10);
            }
            
            function timeIncrement(){
                date = new Date();
                intervals=date.getTime()-time+pre_intervals;
                var a=intervals%1000/10;
                var b=intervals%60000/1000;
                var c=intervals%3600000/60000;
                var d=intervals/3600000;
                milliSeconds1.innerHTML=(a<10)?(&#39;0&#39;+Math.floor(a)):(Math.floor(a));
                seconds1.innerHTML=(b<10)?(&#39;0&#39;+Math.floor(b)):(Math.floor(b));
                minutes1.innerHTML=(c<10)?(&#39;0&#39;+Math.floor(c)):(Math.floor(c));
                hours1.innerHTML=(d<10)?(&#39;0&#39;+Math.floor(d)):(Math.floor(d));
            }

            function stop1(){//  暂停/停止
                date = new Date();
                pre_intervals += date.getTime()-pre_time;
                clearInterval(flag);
            }

        </script>
    </body>
</html>

로그인 후 복사