ساعت دیجیتال با html و css و جاوااسکریپت
در این بخش از آموزش html از تاپ سایت 98 به سراغ ساخت ساعت دیجیتال با html و css و جاوااسکریپت می رویم. این کد تست شده می باشد. می توانید آن را در پروژه های خود استفاده نمایید. برای اجرای کد ساعت دیجیتال یک آن را در یک فایل HTML کپی کرده ، ذخیره و اجرا نمایید.
کد html ساعت دیجیتال
در بخش زیر کد html ساعت دیجیتال را مشاهده می کنید.
این کد را در یک فایل با پسوند html ذخیره نمایید سپس اجرا کنید.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>تاپ سایت 98</title>
</head>
<body>
<div>
<h1>TopSite98.com</h1>
</div>
<div id="MyClockDisplay" class="clock" onload="showTime()"></div>
</body>
</html>
کد css ساعت دیجیتال
در بخش زیر کد css ساعت دیجیتال را اضافه می کنیم تا ظاهر ساعت دیجیتال ما زیباتر شود.
این کد را در بخش head کپی نمایید.
body {
background: black;
}
.clock {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
color: #17D4FE;
font-size: 60px;
font-family: Orbitron;
letter-spacing: 7px;
}
</style>
کد جاوااسکریپت ساعت دیجیتال
کد جاوااسکریپت ساعت دیجیتال را در بخش زیر مشاهده می کنید.
کد جاوااسکریپت ساعت دیجیتال را قبل از تگ بسته body قرار دهید.
حال کد را اجرا نمایید. خروجی کد html,css و جاوااسکریپت ما یک ساعت دیجیتال زیبا خواهد بود.
این کد را می توانید تغییر داده و در پروژه های خود استفاده نمایید.
function showTime(){
var date = new Date();
var h = date.getHours(); // 0 - 23
var m = date.getMinutes(); // 0 - 59
var s = date.getSeconds(); // 0 - 59
var session = "AM";
if(h == 0){
h = 12;
}
if(h > 12){
h = h - 12;
session = "PM";
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
var time = h + ":" + m + ":" + s + " " + session;
document.getElementById("MyClockDisplay").innerText = time;
document.getElementById("MyClockDisplay").textContent = time;
setTimeout(showTime, 1000);
}
showTime();
</script>
خطا در اجرای کد
اگر ارور یا خطا در اجرای کد ساعت دیجیتال با html و css و جاوااسکریپت داشتید احتمالا پسوند فایل چیزی غیر از html است. بسیاری از افراد فایلی متنی باز کرده پسوند آن را html می کنند در صورتی که پسوند فایل txt است. با فعال کردن پسوند ویندوز این مشکل حل خواهد شد.
امیدواریم این آموزش برای شما مفید باشد.
برای مشاهده همه آموزش های HTML و CSS کلیک کنید : آموزش کامل CSS - آموزش کامل HTML
موفق باشید.
منبع: تاپ سایت 98
تگ: کد html و css
نظرات کاربران
از دیدگاه مرتبط با موضوع استفاده نمایید.
از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.
برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.
-
ناشناس
2022-02-28 12:37:42
سلام چطور میشه ساعت رو روی ایران تنظیم کرد؟
اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.
اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید