Trong JavaScript có một hàm tích hợp sẵn được gọi là Date.now(). Đồng hồ bấm trong JavaScript. Bạn bắt đầu nó bằng cách gọi hàm start(). Bạn có thể tạm dừng đồng hồ bằng cách gọi hàm suspend(). Bản demo Đồng hồ Bấm JavaScript với các điều khiển bắt đầu, dừng và bộ đếm vòng.
Mã HTML
Hãy bắt đầu bằng mã HTML đơn giản.
<h2><time>00:00:00</time></h2>
<button id="start">start</button>
<button id="stop">stop</button>
<button id="clear">clear</button>
Mã JavaScript Thuần
Hãy bắt đầu bằng mã JavaScript đơn giản.
var h2 = document.getElementsByTagName('h2')[0],
start = document.getElementById('start'),
stop = document.getElementById('stop'),
clear = document.getElementById('clear'),
seconds = 0, minutes = 0, hours = 0,
t;
function add() {
seconds++;
if (seconds >= 60) {
seconds = 0;
minutes++;
if (minutes >= 60) {
minutes = 0;
hours++;
}
}
h2.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);
startstopwatch();
}
function startstopwatch() {
t = setTimeout(add, 1000);
}
startstopwatch();
/* stopwatch Start button */
start.onclick = startstopwatch;
/* stopwatch Stop button */
stop.onclick = function() {
clearTimeout(t);
}
/* stopwatch Clear button */
clear.onclick = function() {
h2.textContent = "00:00:00";
seconds = 0; minutes = 0; hours = 0;
}
đếm thời gian bằng JavaScript
Phương thức getTime() trả về số mili giây kể từ nửa đêm ngày 1 tháng 1 năm 1970.
var st = new Date().getTime();
for (i = 0; i < 50000; ++i) {
// do something
}
var end = new Date().getTime();
var time = end - st;
alert('Execution time: ' + time);
hẹn giờ HTML
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
text-align: center;
font-size: 50px;
margin-top: 0px;
}
</style>
</head>
<body>
<p id="example"></p>
<script>
var countDownDate = new Date("Jan 9, 2022 15:37:25").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var finaldes = countDownDate - now;
var days = Math.floor(finaldes / (1000 * 60 * 60 * 24));
var hours = Math.floor((finaldes % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((finaldes % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((finaldes % (1000 * 60)) / 1000);
// Results the example in an element with id="example"
document.getElementById("example").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
if (finaldes < 0) {
clearInterval(x);
document.getElementById("example").innerHTML = "EXPIRED";
}
}, 1000);
</script>
</body>
</html>
Hy vọng bạn có ý tưởng về đồng hồ bấm JavaScript.
- Bài đăng blog này ban đầu được xuất bản tại: https://www.pakainfo.com