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
-
답변 # 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"; }
관련 자료
- html 및 javascript를 사용하여 복사 버튼을 만드는 방법은 무엇입니까?
- html - Javascript를 사용하여 링크 가능한 제목을 어떻게 만들 수 있습니까?
- python - Pygame을 사용하여 버튼을 어떻게 동적으로 생성합니까?
- average - Excel Averageifs에 해당하는 것을 사용하여 파이썬 데이터 프레임에 새 열을 어떻게 생성합니까?
- html - JavaScript 'if eventtarget'에 클래스 이름 사용
- Javascript - 자바 스크립트 - 필터링 된 중첩 배열을 만드는 방법
- PHP를 사용하여 mysql 데이터베이스 데이터를 javascript 함수에 전달하는 방법은 무엇입니까?
- numpy의`full ()`메서드와 파이썬 목록을 사용하여 numpy 배열을 만들 수 없습니다
- javascript - 작업자 로더를 사용하여 웹 워커와 함께 typescript 라이브러리를 만드는 방법
- node.js - 공유 자바 스크립트 모듈에서 가져 오기 사용
- reactjs - 자바 스크립트를 사용하여 기존 배열로 데이터 푸시
- html - 자바 스크립트를 사용하여 루프에서 SVG 폴리 라인 그리기
- JavaScript to HTML (JSON)을 사용하여 배열과 연결된 루프
- jQuery 또는 JavaScript를 사용하여 배열에서 데이터 추출
- 아카이브 된 파일의 json에서 특정 값을 읽는 방법 javascript 및 jszip 사용
- r - 파이프 라인 내의 식별자 열을 사용하여 최대 값이있는 새 열 만들기
- function - 사용자 입력, JavaScript를 사용하여 타이머 설정
- javascript - Alpinejs를 사용하여 애니메이션 숫자 카운터를 만들려면 어떻게해야합니까?
- arrays - join을 사용하여 자바 스크립트에서 줄을 나누는 방법
- arrays - 자바 스크립트를 사용하여 레벨 및 이름 정보를 사용하는 트리 계층 구조
- javascript - JQuery의 ERR_ABORTED 429 (너무 많은 요청)
- jquery - javascript regex 내에서 변수를 전달하는 방법은 무엇입니까?
- javascript - eventtarget에 대한 스크립트 개정
- javascript - 특수 문자 (&)가있는 jQuery 메서드 find ()
- html - JavaScript에서 JSON 객체를 통해 반복
- javascript - each () 및 ul 및 li 요소에 대한 prepend 함수의 jQuery 문제
- javascript - 같은 페이지에 같은 클래스가있는 여러 개의 매끄러운 슬라이더?
- javascript - 데이터 테이블의 여러 자식 행, aspnet 코어의 SQL Server 데이터
- javascript - 부트 스트랩에서로드되지 않는 모달 예제
- Javascript/HTML - 자바 스크립트/html - onclick으로 기능 반복
jsbin.com 데모
데모 코드는 시작/중지/재설정 밀리 초 카운터에 불과합니다. 당신이 제 시간에 환상적인 포맷을 원한다면, 그것은 전적으로 당신에게 달려 있습니다. 시작하기에 충분해야합니다.
이것은 재미있는 작은 프로젝트였습니다. 내가 접근하는 방법은 다음과 같습니다
기본 HTML 래퍼 가져 오기
사용은 간단하다.
보너스로 타이머 용 프로그래밍 가능 API도 얻을 수 있습니다. 사용 예는 다음과 같습니다
<시간> jQuery 플러그인jQuery 부분은 위와 같이 코드 구성이 좋으면 jQuery 플러그인 작성이 쉬운 모드입니다
jQuery 플러그인 사용법