پروژه ساعت دیجیتالی + تاریخ دقیق و روز های هفته

پرسیده شده
فعالیت 832 روز پیش
دیده شده 490 بار
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();

 

فایل پیوست
Clock Project.zip
125.38 KB