찾다

집  >  기사  >  웹 프론트엔드  >  JS를 사용하여 10ms까지 정확한 스톱워치 만들기(코드 첨부)

JS를 사용하여 10ms까지 정확한 스톱워치 만들기(코드 첨부)

不言
不言원래의
2018-08-07 11:44:452118검색

이 기사의 내용은 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>

추천 관련 기사 :


위 내용은 JS를 사용하여 10ms까지 정확한 스톱워치 만들기(코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

if date 循环 JS 对象
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：js에서 파일 업로드 진행 상황을 얻는 방법은 무엇입니까? 파일 업로드 진행 상황을 가져오는 js 코드다음 기사：js에서 파일 업로드 진행 상황을 얻는 방법은 무엇입니까? 파일 업로드 진행 상황을 가져오는 js 코드

관련 기사

더보기