홈>2020-02-01 00:37

jquery - JavaScript를 사용하여 스톱워치를 만드는 방법은 무엇입니까?

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()...

javascript jquery

답변 # 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";
}

Python2.net

jquery - JavaScript를 사용하여 스톱워치를 만드는 방법은 무엇입니까?

관련 자료