ساعت دیجیتال با استفاده از جاوا اسکریپت
در این مقاله به شما نشان خواهیم داد نحوه ایجاد ساعت دیجیتال با استفاده از جاوا اسکریپت در این مقاله، من شما را در فرآیند ساخت یک ساعت دیجیتال ساده که می تواند زمان فعلی را در صفحه وب شما نمایش دهد، راهنمایی می کنم.
ما با ایجاد یک پایه شروع خواهیم کرد HTML سند و اضافه کردن مقداری CSS برای مدل دادن به ساعت سپس، استفاده خواهیم کرد جاوا اسکریپت برای دریافت زمان فعلی و به روز رسانی ساعت در هر ثانیه.
در طول مقاله، من از مفاهیم و توابع کلیدی جاوا اسکریپت، مانند شیء Date و setInterval() روش. در پایان این وبلاگ، شما یک وبلاگ کاملاً کاربردی خواهید داشت ساعت دیجیتال که می توانید در وب سایت خود استفاده کنید.
این که آیا شما یک مبتدی یا یک با تجربه توسعه دهنده، این مقاله برای هر کسی که می خواهد در مورد جاوا اسکریپت بیشتر بیاموزد و یک عنصر تعاملی برای وب سایت خود ایجاد کند عالی است. بنابراین، ویرایشگر کد مورد علاقه خود را بگیرید و بیایید شروع کنیم!
نکات قابل بحث
پیش نمایش
آموزش یوتیوب
کد HTML
کد CSS
کد جاوا اسکریپت
منابع
پیش نمایش :
نسخه ی نمایشی زنده این وب سایت را می توانید با کلیک بر روی اینجا مشاهده کنید.
آموزش یوتیوب:
کد HTML:
index.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>JavaScript Digital Clock</title>
<link rel="stylesheet" href="style.css">
<!-- Bootstrap CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<!-- My JavaScript -->
<script src="script.js"></script>
</head>
<body>
<div class="container my-5 py-4 bg-warning">
<div class="jumbotron">
<h1 class="display-4">Current Time : <span id="time"></span></h1>
<hr size=5px;>
<h1 class="display-5">Current Date : <span id="date"></span></h1>
</div>
</div>
<div class="text-center">
<h1>DIGITAL CLOCK USING JavaScript</h1>
</div>
<footer>
<p id="footer" class= "text-center">
© 2023 Designed By : <a href="https://rutikkpatel.github.io/Portfolio1/" target="_block">Rutik Patel</a>
</footer>
<!-- Bootstrap Bundle Script CDN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"></script>
</body>
</html>
کد CSS:
style.css
* {
margin: 0;
padding: 0;
}
body {
background: rgba(162, 155, 254, 0.5) !important;
}
.container {
border-radius: 15px;
}
#footer a {
text-decoration: none;
line-height: 34px;
color: #000000;
}
#footer a:hover {
color: red;
font-weight: bold;
text-decoration: underline;
}
کد جاوا اسکریپت:
script.js
let a;
let time;
let date;
const options = {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
}
setInterval(() => {
a = new Date();
// Concate Hours, minutes and seconds
time = a.getHours() + ":" + a.getMinutes() + ":" + a.getSeconds();
document.getElementById('time').innerText = time;
// For Current Date
// 14-02-2023 Date Format
// date = a.toLocaleDateString();
// Display month day in string format - Wednesday, 20 December 2000
date = a.toLocaleDateString(undefined, options)
document.getElementById('date').innerText = date;
})
منابع :
مخزن GitHub: https://github.com/rutikkpatel/JavaScript_Programs/tree/main/JS_Digital_Clock
