Dalam posting blog ini, saya membagikan kode Javascript Sederhana Jam Hitung Mundur dengan hari, Jam, Menit, dan Detik. Yang sering digunakan untuk penawaran atau untuk hitungan mundur ulang tahun. Jadi ayo mulai Show
indeks. html <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create a Countdown Clock</title>
<link rel="stylesheet" href="style.css">
</head>
<body style="background-color: lightcyan;">
<div class="container">
<h1 id="headline">Countdown to end offer:</h1>
<div id="countdown">
<ul>
<li><span id="days"></span>days</li>
<li><span id="hours"></span>Hours</li>
<li><span id="minutes"></span>Minutes</li>
<li><span id="seconds"></span>Seconds</li>
</ul>
</div>
<div id="content" class="emoji">
<span>😔</span>
<span>😢</span>
<span>😔</span>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
naskah. js (function () {
const second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24;
let offer= "Sep 05, 2021 00:00:00",
countDown = new Date(offer).getTime(),
x = setInterval(function() {
let now = new Date().getTime(),
distance = countDown - now;
document.getElementById("days").innerText = Math.floor(distance / (day)),
document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),
document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),
document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second);
//do something later when date is reached
if (distance < 0) {
let headline = document.getElementById("headline"),
countdown = document.getElementById("countdown"),
content = document.getElementById("content");
headline.innerText = "Ohhh no! Offer has ended";
countdown.style.display = "none";
content.style.display = "block";
clearInterval(x);
}
//seconds
}, 0)
}());
_Anda dapat mengubah waktu di nomor baris 7 biarkan penawaran = “05 Sep 2021 00. 00. 00”, gaya. css /* general styling */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
margin: 0;
}
body {
align-items: center;
display: flex;
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen-Sans,
Ubuntu,
Cantarell,
"Helvetica Neue",
sans-serif;
}
.container {
color: #333;
margin: 0 auto;
text-align: center;
}
h1 {
font-weight: normal;
letter-spacing: .125rem;
text-transform: uppercase;
}
li {
display: inline-block;
font-size: 1.5em;
list-style-type: none;
padding: 1em;
text-transform: uppercase;
}
li span {
display: block;
font-size: 4.5rem;
}
.emoji {
display: none;
padding: 1rem;
}
.emoji span {
font-size: 4rem;
padding: 0 .5rem;
}
@media all and (max-width: 768px) {
h1 {
font-size: 1.5rem;
}
li {
font-size: 1.125rem;
padding: .75rem;
}
li span {
font-size: 3.375rem;
}
}
Setelah selesai hitungan mundur Brij Brijpal Sharma adalah pengembang web dengan hasrat untuk menulis tutorial teknologi. Pelajari JavaScript dan teknologi pengembangan web lainnya Dalam tutorial ini kami akan menunjukkan kepada Anda solusi penghitung waktu mundur JavaScript jam menit detik, seperti yang kita tahu penghitung waktu mundur memperbarui hitungan mundur untuk waktu tertentu, di sini kami menampilkan jam, menit, dan detik dengan menggunakan objek tanggal dengan metode getHours() ini, getMinutes Itu akan diperbarui untuk setiap detik dengan menggunakan metode setInterval() Panduan Langkah Demi Langkah Pada Penghitung Waktu Mundur JavaScript Jam Menit Detik. -Seperti yang kita lihat di atas dengan bantuan metode tersebut kita mendapatkan hasil penghitung waktu mundur dalam jam, menit dan detik Metode setInterval() yang ditawarkan pada antarmuka jendela dan pekerja, berulang kali memanggil fungsi atau mengeksekusi cuplikan kode dengan penundaan waktu tetap di antara setiap panggilan Metode ini mengembalikan ID interval yang mengidentifikasi interval secara unik, sehingga Anda dapat menghapusnya nanti dengan memanggil metode clearInterval() Metode getHours(), getMinutes, dan getSeconds() digunakan untuk mengumpulkan waktu saat ini secara akurat <!DOCTYPE html>
<html>
<head>
<title>COUNTDOWN TIMER</title>
</head>
<body>
<H3>COUNTDOWN TIMER</H3>
<div id="demo"></div>
<button onclick="fun()">Start</button>
<script>
function fun(){
setInterval(function(){
date=new Date();
let hr=date.getHours();
let m=date.getMinutes();
let s=date.getSeconds();
document.getElementById('demo').innerHTML=hr+":"+m+":"+s;
},1000);
}
</script>
</body>
</html>
|
