>
if(stopwatch >= track[song].duration)

track[song].duration  사운드 클라우드 트랙의 지속 시간을 찾습니다.

swap 를 클릭하면 밀리 초를 계산하는 스톱워치 기능을 만들려고합니다.  아이디 stopwatch  따라서 함수가 특정 시간 동안 "클릭"되면 if 함수가 무언가를 수행합니다. 제 경우에는 이미지를 교체하십시오. 또한 다시 클릭하면 기능이 자동으로 재설정됩니다.

stopwatch 처럼

 = current time  - clicked time   clicked time 를 설정하는 방법

current time  = new Date().getTime();  ? 밀리 초 단위입니까?

$('#swap').click(function()...


  • 답변 # 1

    jsbin.com 데모

    데모 코드는 시작/중지/재설정 밀리 초 카운터에 불과합니다. 당신이 제 시간에 환상적인 포맷을 원한다면, 그것은 전적으로 당신에게 달려 있습니다. 시작하기에 충분해야합니다.

    이것은 재미있는 작은 프로젝트였습니다. 내가 접근하는 방법은 다음과 같습니다

    var Stopwatch = function(elem, options) {
      var timer       = createTimer(),
          startButton = createButton("start", start),
          stopButton  = createButton("stop", stop),
          resetButton = createButton("reset", reset),
          offset,
          clock,
          interval;
      // default options
      options = options || {};
      options.delay = options.delay || 1;
      // append elements     
      elem.appendChild(timer);
      elem.appendChild(startButton);
      elem.appendChild(stopButton);
      elem.appendChild(resetButton);
      // initialize
      reset();
      // private functions
      function createTimer() {
        return document.createElement("span");
      }
      function createButton(action, handler) {
        var a = document.createElement("a");
        a.href = "#" + action;
        a.innerHTML = action;
        a.addEventListener("click", function(event) {
          handler();
          event.preventDefault();
        });
        return a;
      }
      function start() {
        if (!interval) {
          offset   = Date.now();
          interval = setInterval(update, options.delay);
        }
      }
      function stop() {
        if (interval) {
          clearInterval(interval);
          interval = null;
        }
      }
      function reset() {
        clock = 0;
        render();
      }
      function update() {
        clock += delta();
        render();
      }
      function render() {
        timer.innerHTML = clock/1000; 
      }
      function delta() {
        var now = Date.now(),
            d   = now - offset;
        offset = now;
        return d;
      }
      // public API
      this.start  = start;
      this.stop   = stop;
      this.reset  = reset;
    };
    
    

    기본 HTML 래퍼 가져 오기

    <!-- create 3 stopwatches -->
    <div class="stopwatch"></div>
    <div class="stopwatch"></div>
    <div class="stopwatch"></div>
    
    

    사용은 간단하다.

    var elems = document.getElementsByClassName("stopwatch");
    for (var i=0, len=elems.length; i<len; i++) {
      new Stopwatch(elems[i]);
    }
    
    

    보너스로 타이머 용 프로그래밍 가능 API도 얻을 수 있습니다. 사용 예는 다음과 같습니다

    var elem = document.getElementById("my-stopwatch");
    var timer = new Stopwatch(elem, {delay: 10});
    // start the timer
    timer.start();
    // stop the timer
    timer.stop();
    // reset the timer
    timer.reset();
    
    
    <시간> jQuery 플러그인

    jQuery 부분은 위와 같이 코드 구성이 좋으면 jQuery 플러그인 작성이 쉬운 모드입니다

    (function($) {
      var Stopwatch = function(elem, options) {
        // code from above...
      };
      $.fn.stopwatch = function(options) {
        return this.each(function(idx, elem) {
          new Stopwatch(elem, options);
        });
      };
    })(jQuery);
    
    

    jQuery 플러그인 사용법

    // all elements with class .stopwatch; default delay (1 ms)
    $(".stopwatch").stopwatch();
    // a specific element with id #my-stopwatch; custom delay (10 ms)
    $("#my-stopwatch").stopwatch({delay: 10});
    
    

  • 답변 # 2

    마이크로 초 정밀도 사용 :

    performance.now(->브라우저 지원)

       var t0 = performance.now();
        doSomething();
        var t1 = performance.now();
        console.log("Call to doSomething took " + (t1 - t0) + " milliseconds.");
                
        function doSomething(){    
           for(i=0;i<1000000;i++){var x = i*i;}
        }
    
    

    와이즈 비즈 <시간 /> <시간 />

    로깅을 위해 다음을 사용할 수 있습니다 :

    작업에 소요 된 시간을 밀리 초 단위로 측정하고 콘솔에 기록하려면 다음을 사용하십시오.

    Unlike other timing data available to JavaScript (for example Date.now), the timestamps returned by Performance.now() are not limited to one-millisecond resolution. Instead, they represent times as floating-point numberswith up to microsecond precision.

    Also unlike Date.now(), the values returned by Performance.now() always increase at a constant rate, independent of the system clock (which might be adjusted manually or skewed by software like NTP). Otherwise, performance.timing.navigationStart + performance.now() will be approximately equal to Date.now().

    결과 :

    와이즈 비즈

    다른 작업을 위해 타이머 이름을 변경할 수 있습니다.

    예 :

    console.time('Timer name');
    // your time consuming operation
    console.timeEnd('Timer name');
    
    

  • 답변 # 3

    mace가 제공 한 코드를 약간 수정 한 후에 스톱워치를 만들었습니다. https://codepen.io/truestbyheart/pen/EGELmv

    Timer name: 0.013ms

  • 답변 # 4

    간단하고 쉬운 당신을위한 시계이며 나를 잊지 마세요;)

    console.time('Search page');
    setTimeout(function(){
      console.timeEnd('Search page');
    },1500);
    
    
     <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Stopwatch</title>
        <style>
        #center {
         margin: 30%  30%;
         font-family: tahoma;
         }
        .stopwatch {
             border:1px solid #000;
             background-color: #eee;
             text-align: center;
             width:656px;
             height: 230px;
             overflow: hidden;
         }
         .stopwatch span{
             display: block;
             font-size: 100px;
         }
         .stopwatch p{
             display: inline-block;
             font-size: 40px;
         }
         .stopwatch a{
           font-size:45px;
         }
         a:link,
         a:visited{
             color :#000;
             text-decoration: none;
             padding: 12px 14px;
             border: 1px solid #000;
         }
        </style>
      </head>
      <body>
          <div id="center">
                <div class="timer stopwatch"></div>
          </div>
        <script>
          const Stopwatch = function(elem, options) {
            let timer = createTimer(),
              startButton = createButton("start", start),
              stopButton = createButton("stop", stop),
              resetButton = createButton("reset", reset),
              offset,
              clock,
              interval,
              hrs = 0,
              min = 0;
            // default options
            options = options || {};
            options.delay = options.delay || 1;
            // append elements
            elem.appendChild(timer);
            elem.appendChild(startButton);
            elem.appendChild(stopButton);
            elem.appendChild(resetButton);
            // initialize
            reset();
            // private functions
            function createTimer() {
              return document.createElement("span");
            }
            function createButton(action, handler) {
              if (action !== "reset") {
                let a = document.createElement("a");
                a.href = "#" + action;
                a.innerHTML = action;
                a.addEventListener("click", function(event) {
                  handler();
                  event.preventDefault();
                });
                return a;
              } else if (action === "reset") {
                let a = document.createElement("a");
                a.href = "#" + action;
                a.innerHTML = action;
                a.addEventListener("click", function(event) {
                  clean();
                  event.preventDefault();
                });
                return a;
              }
            }
            function start() {
              if (!interval) {
                offset = Date.now();
                interval = setInterval(update, options.delay);
              }
            }
            function stop() {
              if (interval) {
                clearInterval(interval);
                interval = null;
              }
            }
            function reset() {
              clock = 0;
              render(0);
            }
            function clean() {
              min = 0;
              hrs = 0;
              clock = 0;
              render(0);
            }
            function update() {
              clock += delta();
              render();
            }
            function render() {
              if (Math.floor(clock / 1000) === 60) {
                min++;
                reset();
                if (min === 60) {
                  min = 0;
                  hrs++;
                }
              }
              timer.innerHTML =
                hrs + "<p>hrs</p>" + min + "<p>min</p>" + Math.floor(clock / 1000)+ "<p>sec</p>";
            }
            function delta() {
              var now = Date.now(),
                d = now - offset;
              offset = now;
              return d;
            }
          };
          // Initiating the Stopwatch
          var elems = document.getElementsByClassName("timer");
          for (var i = 0, len = elems.length; i < len; i++) {
            new Stopwatch(elems[i]);
          }
        </script>
      </body>
    </html>
    
    

    var x; var startstop = 0; function startStop() { /* Toggle StartStop */ startstop = startstop + 1; if (startstop === 1) { start(); document.getElementById("start").innerHTML = "Stop"; } else if (startstop === 2) { document.getElementById("start").innerHTML = "Start"; startstop = 0; stop(); } } function start() { x = setInterval(timer, 10); } /* Start */ function stop() { clearInterval(x); } /* Stop */ var milisec = 0; var sec = 0; /* holds incrementing value */ var min = 0; var hour = 0; /* Contains and outputs returned value of function checkTime */ var miliSecOut = 0; var secOut = 0; var minOut = 0; var hourOut = 0; /* Output variable End */ function timer() { /* Main Timer */ miliSecOut = checkTime(milisec); secOut = checkTime(sec); minOut = checkTime(min); hourOut = checkTime(hour); milisec = ++milisec; if (milisec === 100) { milisec = 0; sec = ++sec; } if (sec == 60) { min = ++min; sec = 0; } if (min == 60) { min = 0; hour = ++hour; } document.getElementById("milisec").innerHTML = miliSecOut; document.getElementById("sec").innerHTML = secOut; document.getElementById("min").innerHTML = minOut; document.getElementById("hour").innerHTML = hourOut; } /* Adds 0 when value is <10 */ function checkTime(i) { if (i < 10) { i = "0" + i; } return i; } function reset() { /*Reset*/ milisec = 0; sec = 0; min = 0 hour = 0; document.getElementById("milisec").innerHTML = "00"; document.getElementById("sec").innerHTML = "00"; document.getElementById("min").innerHTML = "00"; document.getElementById("hour").innerHTML = "00"; }

관련 자료

  • 이전 c# - Windows Azure Table Storage의 모든 행을 쿼리하는 방법은 무엇입니까?
  • 다음 reflection - javalangclasscastexception - comsunproxy $proxy47을 캐스트 할 수 없습니다