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
المشاهدات
364
x32x01
x32x01
x32x01
الردود
0
المشاهدات
640
x32x01
x32x01
x32x01
الردود
0
المشاهدات
468
x32x01
x32x01
x32x01
الردود
0
المشاهدات
420
x32x01
x32x01
x32x01
الردود
0
المشاهدات
454
x32x01
x32x01
الوسوم : الوسوم
html javascript برمجة ساعة برمجة ساعة رقمية ساعة رقمية
الدخول أو التسجيل السريع
نسيت كلمة مرورك؟
إحصائيات المنتدى
المواضيع
1,665
المشاركات
1,869
أعضاء أكتب كود
372
أخر عضو
برعي المغربي
عودة
أعلى