إنشاء ساعة رقمية بأستخدام أكواد HTML & JavaScript

x32x01 · 15 نوفمبر 2023

كود HTML & JavaScript

HTML:

<!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">TabCode For Computer Science</br>
TabCode.Net
</h4>
</body>
</html>

إنشاء ساعة رقمية بأستخدام أكواد HTML & JavaScript

المواضيع ذات الصلة

آخر المشاركات

أحدث المنتجات