پروژه ساعت دیجیتالی + تاریخ دقیق و روز های هفته
0
سلام و ضمن تشکر از استاد دادخواه.
بنده پروژه ساعت دیجیتالی را با اضافه کردن تاریخ روز درست کردم و کدها و فایل های آن را در پایین قرار می دهم.
کد HTML
<!DOCTYPE html>
<html>
<head>
<title>Clock</title>
<link rel="shortcut icon" href="./img/clock-icon.jpg" />
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="clock" id="My_clock"></div>
<div class="calender" id="My_Date"></div>
<script src="./js/Clock.js"></script>
</body>
</html>
کد CSS
body {
text-align: center;
padding: 15% 0;
background: lightblue;
color: blue;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.clock {
font-size: 90px;
font-weight: bold;
margin: 0 0 25px 0;
}
.calender {
font-size: 25px;
font-weight: 500;
}
@media only screen and (max-width: 768px) {
body {
padding: 50% 0;
}
}
کد JS
var Month_Table = [
"Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
]
var Week_Days_Table = [
"Sunday", "Monday", "Tuesday", "Wednesday",
"Thursday", "Friday ", "Saturday"
]
function time() {
var time_now = new Date();
var year = time_now.getFullYear();
var month = Month_Table[time_now.getMonth()];
var date = time_now.getDate();
var day = Week_Days_Table[time_now.getDay()];
var hours = time_now.getHours();
var minutes = time_now.getMinutes();
var seconds = time_now.getSeconds();
var AM = "AM";
if (hours > 12) {
AM = "PM";
hours -= 12;
}
if (hours < 10) {
hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
document.getElementById("My_clock").textContent =
hours + ":" + minutes + ":" + seconds + " " + AM;
document.getElementById("My_Date").textContent =
date + " / " + month + " / " + year + " - (" + day + ")";
setTimeout(time, 1000);
}
time();
برای پاسخ دادن به این سوال شما باید در دوره عضو باشید .