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

كود 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>
 
المواضيع ذات الصلة
x32x01
الردود
0
المشاهدات
557
x32x01
x32x01
x32x01
الردود
0
المشاهدات
434
x32x01
x32x01
x32x01
الردود
0
المشاهدات
438
x32x01
x32x01
x32x01
  • x32x01
الردود
0
المشاهدات
538
x32x01
x32x01
x32x01
  • x32x01
الردود
0
المشاهدات
575
x32x01
x32x01
الوسوم : الوسوم
html javascript برمجة ساعة برمجة ساعة رقمية ساعة رقمية
الدخول أو التسجيل السريع
نسيت كلمة مرورك؟
إحصائيات المنتدى
المواضيع
1,662
المشاركات
1,866
أعضاء أكتب كود
370
أخر عضو
Ahmedmo95
عودة
أعلى