إنشاء ساعة رقمية بأستخدام أكواد HTML & JavaScript كود HTML & JavaScript كود: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/segment7" type="text/css"/> <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/futura-renner" type="text/css"/> <title>Digital Clock</title> </head> <style> * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } body { background: #000 } #myClock { width: 240px; height: 200px; margin: 100px auto; background: #191970; border: 4px outset #000; border-radius: 30px; color: rgb(4, 226, 226); } #time { width: 100%; height: 90px; font-family: 'Segment7Standard'; } #time #hrs-mins { float: left; width: 80%; height: auto; font-size: 64px; padding: 20px 0 0 30px; } #time #secs { float: left; width: 20%; height: auto; font-size: 25px; padding-top: 30px; color:black; } #date { width: 100%; height: 60px; padding: 10px 20px; font-size: 18px; font-family: 'FuturaRennerRegular'; } #date #d-m-y { float: white; width: 60%; padding: 5px 10px; } #date #day { float: right; width: 40%; } #date #day p { margin: 0; border: 1px solid rgb(0, 255, 255); padding: 4px 0; text-align: center } footer { text-align: center; font-family: sans-serif; } footer a { font-weight: bold; color: #C0C0C0; text-decoration: none; } </style> <body> <div id="myClock"> <div id="time"> <div id="hrs-mins"></div> <div id="secs"></div> </div> <div id="date"> <div id="d-m-y"></div> <div id="day"><p id="day-paragraph"></p></div> </div> </div> <footer> <a href=""></a> </footer> <script type="text/javascript"> window.onload = function() { loadClock(); // alert("Thanks for 50 upvotes!"); } function loadClock() { var hrAndMin = document.getElementById("hrs-mins"), sec = document.getElementById("secs"), monthDateYear = document.getElementById("d-m-y"), weekDay = document.getElementById("day-paragraph"), //===================== time = new Date(), hours = time.getHours(), minutes = time.getMinutes(), seconds = time.getSeconds(), month = time.getMonth(), date = time.getDate(), year = time.getFullYear(), day = time.getDay(); function lessThanTen() { function isLessThanTen() { if (hours < 10) { hours = "0" + hours; } if (minutes < 10) { minutes = "0" + minutes; } if (seconds < 10) { seconds = "0" + seconds; } } isLessThanTen(); hrAndMin.innerHTML = hours + ":" + minutes; sec.innerHTML = seconds; } function whichMonth() { var monthsOfTheYear = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; var currentMonth = monthsOfTheYear[month]; monthDateYear.innerHTML = currentMonth + " " + date + " " + year; } function whichDay() { daysOfTheWeek = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]; var currentDay = daysOfTheWeek[day]; weekDay.innerHTML = currentDay; } lessThanTen(); whichMonth(); whichDay(); } setInterval(loadClock, 1000); </script> </body> <body> <h4 style="color:white">iTabCode For Computer Science</br> iTabCode.Net </h4> </body> </html>
