[ jquery Example ] 3 countdown clocks (jquery.countdown.min.js)
페이지 정보
작성자 로봇 작성일 25-03-04 15:19 조회 76 댓글 0본문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> jquery.countdown </title>
<style>
.countdown {
font-size: 24px;
margin: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.rawgit.com/hilios/jQuery.countdown/2.2.0/dist/jquery.countdown.min.js"></script>
</head>
<body>
<div>
<div class="countdown">
<h2>Alarm 1 (8 AM):</h2>
<div id="countdown1"></div>
</div>
<div class="countdown">
<h2>Alarm 2 (9 AM):</h2>
<div id="countdown2"></div>
</div>
<div class="countdown">
<h2>Alarm 3 (10 AM):</h2>
<div id="countdown3"></div>
</div>
</div>
<script>
// Set the times for the alarms (8 AM, 9 AM, 10 AM)
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
// Initialize countdown for each alarm
$('#countdown1').countdown(alarm1Time, function(event) {
$(this).html(event.strftime('%H:%M:%S'));
});
$('#countdown2').countdown(alarm2Time, function(event) {
$(this).html(event.strftime('%H:%M:%S'));
});
$('#countdown3').countdown(alarm3Time, function(event) {
$(this).html(event.strftime('%H:%M:%S'));
});
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> jquery.countdown </title>
<style>
.countdown {
font-size: 24px;
margin: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.rawgit.com/hilios/jQuery.countdown/2.2.0/dist/jquery.countdown.min.js"></script>
</head>
<body>
<div>
<div class="countdown">
<h2>Alarm 1 (8 AM):</h2>
<div id="countdown1"></div>
</div>
<div class="countdown">
<h2>Alarm 2 (9 AM):</h2>
<div id="countdown2"></div>
</div>
<div class="countdown">
<h2>Alarm 3 (10 AM):</h2>
<div id="countdown3"></div>
</div>
</div>
<script>
// Set the times for the alarms (8 AM, 9 AM, 10 AM)
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
// Initialize countdown for each alarm
$('#countdown1').countdown(alarm1Time, function(event) {
$(this).html(event.strftime('%H:%M:%S'));
});
$('#countdown2').countdown(alarm2Time, function(event) {
$(this).html(event.strftime('%H:%M:%S'));
});
$('#countdown3').countdown(alarm3Time, function(event) {
$(this).html(event.strftime('%H:%M:%S'));
});
</script>
</body>
</html>
댓글목록 0
등록된 댓글이 없습니다.