logo
logo
تبلیغ کلیکی تاپ سایت 98

ساعت دیجیتال با html و css و جاوااسکریپت

ساعت دیجیتال با html و css و جاوااسکریپت
هدایت عباسی آموزش HTML

در این بخش از آموزش html از تاپ سایت 98 به سراغ ساخت ساعت دیجیتال با html و css و جاوااسکریپت می رویم. این کد تست شده می باشد. می توانید آن را در پروژه های خود استفاده نمایید. برای اجرای کد ساعت دیجیتال یک آن را در یک فایل HTML کپی کرده ، ذخیره و اجرا نمایید.

کد html ساعت دیجیتال

در بخش زیر کد html ساعت دیجیتال را مشاهده می کنید.

این کد را در یک فایل با پسوند html ذخیره نمایید سپس اجرا کنید.

<!DOCTYPE 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 کپی نمایید.

<style>
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 و جاوااسکریپت ما یک ساعت دیجیتال زیبا خواهد بود.

این کد را می توانید تغییر داده و در پروژه های خود استفاده نمایید.

<script>
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 بپیوندند می توانند از طریق واتساپ با ما در ارتباط باشند. ما بهترین افراد را به تیم خود اضافه خواهیم کرد.

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید

دوره ارز دیجیتال تاپ سایت 98
دوره های آموزشی دوره های آموزشی

نظرات کاربران

از دیدگاه مرتبط با موضوع استفاده نمایید.

از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.

برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.

  • کامنت ناشناس

    2022-02-28 12:37:42

    سلام چطور میشه ساعت رو روی ایران تنظیم کرد؟