[ Vanilla JavaScript Example ] 3 countdown clocks
페이지 정보
본문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Vanilla JavaScript </title>
<style>
.countdown {
font-size: 24px;
margin: 10px;
}
</style>
</head>
<body>
<div style='color: #a9a9a9'>
Vanilla JavaScript Example <br>
가볍긴 한데, interval을 쓰다보니, 딜레이가 있음.
</div>
<div>
<div class="countdown">
<h2>Alarm 1 (8 AM):</h2>
<p id="countdown1"></p>
</div>
<div class="countdown">
<h2>Alarm 2 (9 AM):</h2>
<p id="countdown2"></p>
</div>
<div class="countdown">
<h2>Alarm 3 (10 AM):</h2>
<p id="countdown3"></p>
</div>
</div>
<script>
function updateCountdown(targetTime, elementId) {
var countdownElement = document.getElementById(elementId);
setInterval(function() {
var now = new Date();
var remainingTime = targetTime - now;
if (remainingTime > 0) {
var hours = Math.floor(remainingTime / (1000 * 60 * 60));
var minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
countdownElement.innerHTML = hours + "h " + minutes + "m " + seconds + "s";
} else {
countdownElement.innerHTML = "Time's up!";
}
}, 1000);
}
// Set the alarm times
var now = new Date();
var alarm1Time = new Date(now.setHours(8, 0, 0, 0)); // 8:00 AM today
var alarm2Time = new Date(now.setHours(22, 30, 0, 0)); // 9:00 AM today
var alarm3Time = new Date(now.setHours(23, 0, 0, 0)); // 10:00 AM today
// Start the countdown for each alarm
updateCountdown(alarm1Time, 'countdown1');
updateCountdown(alarm2Time, 'countdown2');
updateCountdown(alarm3Time, 'countdown3');
</script>
</body>
</html>
countdown<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Vanilla JavaScript </title>
<style>
.countdown {
font-size: 24px;
margin: 10px;
}
</style>
</head>
<body>
<div style='color: #a9a9a9'>
Vanilla JavaScript Example <br>
가볍긴 한데, interval을 쓰다보니, 딜레이가 있음.
</div>
<div>
<div class="countdown">
<h2>Alarm 1 (8 AM):</h2>
<p id="countdown1"></p>
</div>
<div class="countdown">
<h2>Alarm 2 (9 AM):</h2>
<p id="countdown2"></p>
</div>
<div class="countdown">
<h2>Alarm 3 (10 AM):</h2>
<p id="countdown3"></p>
</div>
</div>
<script>
function updateCountdown(targetTime, elementId) {
var countdownElement = document.getElementById(elementId);
setInterval(function() {
var now = new Date();
var remainingTime = targetTime - now;
if (remainingTime > 0) {
var hours = Math.floor(remainingTime / (1000 * 60 * 60));
var minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
countdownElement.innerHTML = hours + "h " + minutes + "m " + seconds + "s";
} else {
countdownElement.innerHTML = "Time's up!";
}
}, 1000);
}
// Set the alarm times
var now = new Date();
var alarm1Time = new Date(now.setHours(8, 0, 0, 0)); // 8:00 AM today
var alarm2Time = new Date(now.setHours(22, 30, 0, 0)); // 9:00 AM today
var alarm3Time = new Date(now.setHours(23, 0, 0, 0)); // 10:00 AM today
// Start the countdown for each alarm
updateCountdown(alarm1Time, 'countdown1');
updateCountdown(alarm2Time, 'countdown2');
updateCountdown(alarm3Time, 'countdown3');
</script>
</body>
</html>
clocks
countdown
clocks
162,163,164,165
[ AngularJS Example ] 3 countdown clocks
[ jquery Example ] 3 countdown clocks (jquery.countdown.min.js)
[ Vanilla JavaScript Example ] 3 countdown clocks
[ AngularJS Example ] 3 countdown clocks
댓글목록
등록된 댓글이 없습니다.