آموزش طراحی و ایجاد ساعت دیجیتال با جاوا اسکریپت به صورت ساده و کاربردی جهت استفاده در پروژه های وب سایت و وبلاگ ها.
قبل از هر چیز بگم که روش های مختلفی برای ایجاد ساعت دیجیتال با استفاده از جاوا اسکریپت هست و هر توسعه دهنده ممکنه یک روشی رو بهتر از سایر بپسنده اما مهم این هست که شما با هر سبک و روشی که راحت هستید اون رو انتخاب کنید و اپ یا پروژه خودتون رو باهاش پیش ببرید.
ساعت دیجیتال با جاوا اسکریپت
اپ ساعت دیجیتال جاوا اسکریپت شامل سه فایل می شود:
1) فایل” index.html” دربرگیرنده کدهای html می باشند و مهمترین آیتم آن تگ کلاس “clock” هست که ساعت مورد نظر در آن نمایش داده می شود.
2) فایل “app.js” که کدهای جاوا اسکریپت در آن قرار می گیرند و در واقع فایل اصلی و قلب پروژه ما هست.
3) فایل “style.css” شامل کدهای استایل دهی ساعت و صفحه می باشد که در صورت تسلط به css می تونید تغییر بدید، اگر هم با کدنویسی css آسنا نیستند از طریق آموزش کاربردی CSS خیلی سریع و راحت می تونید این مورد مهم را یاد بگیرید.
<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">
<link rel="stylesheet" href="style.css">
<title>Make a Digital Clock</title>
</head>
<body data-rsssl=1>
<div class="clock"></div>
<script src="app.js"></script>
</body>
</html>
const clock = document.querySelector('.clock');
const tik = () => {
const now = new Date();
const h = now.getHours();
const m = now.getMinutes();
const s = now.getSeconds();
const html = `
<span>${h}</span> :
<span>${m}</span> :
<span>${s}</span>
`;
clock.innerHTML = html;
};
setInterval(tik, 1000);
body {
background-color: #333;
}
.clock {
margin: 0 auto;
text-align: center;
margin-top: 50px;
font-size: 80px;
color: #CCC;
}
span {
background-color: #F7DF1E;
width: 100;
height: 100vh;
border-radius: 50%;
padding: 20px;
color: #000;
text-align: center;
}
