Display a clock using Date object.
CODING:
<!DOCTYPE html>
<html>
<head>
<title>Create Digital Clock with Date using JavaScript by CodexWorld</title>
<style type="text/css">
.clockdate-wrapper {
background-color:rgb(150,150,150);
padding:25px;
max-width:350px;
width:100%;
text-align:center;
border-radius:50%;
margin-left:70%;
}
#clock{
background-color:black;
font-family:Letter Gothic Std;
font-size:60px;
text-shadow:0px 0px 1px black;
color:rgb(0,255,255);
}
#clock span {
color:white;
text-shadow:0px 0px 1px #333;
font-size:20px;
position:relative;
top:-27px;
left:-10px;
}
#date {
letter-spacing:10px;
font-size:14px;
font-family:Letter Gothic Std;
color:white;
}
</style>
</head>
<body onload="startTime()">
<script>
function startTime() {
var today = new Date();
var hr = today.getHours();
var min = today.getMinutes();
var sec = today.getSeconds();
ap = (hr < 12) ? "<span>AM</span>" : "<span>PM</span>";
hr = (hr == 0) ? 12 : hr;
hr = (hr > 12) ? hr - 12 : hr;
hr = checkTime(hr);
min = checkTime(min);
sec = checkTime(sec);
document.getElementById("clock").innerHTML = hr + ":" + min + ":" + sec + " " + ap;
var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
var curWeekDay = days[today.getDay()];
var curDay = today.getDate();
var curMonth = months[today.getMonth()];
var curYear = today.getFullYear();
var date = curWeekDay+", "+curDay+" "+curMonth+" "+curYear;
document.getElementById("date").innerHTML = date;
var time = setTimeout(function(){ startTime() }, 500);
}
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
</script>
<div>
<div class="clockdate-wrapper">
<div id="clock"></div>
<div id="date"></div>
</div>
</div>
</body>
</html>
CODING:
<!DOCTYPE html>
<html>
<head>
<title>Create Digital Clock with Date using JavaScript by CodexWorld</title>
<style type="text/css">
.clockdate-wrapper {
background-color:rgb(150,150,150);
padding:25px;
max-width:350px;
width:100%;
text-align:center;
border-radius:50%;
margin-left:70%;
}
#clock{
background-color:black;
font-family:Letter Gothic Std;
font-size:60px;
text-shadow:0px 0px 1px black;
color:rgb(0,255,255);
}
#clock span {
color:white;
text-shadow:0px 0px 1px #333;
font-size:20px;
position:relative;
top:-27px;
left:-10px;
}
#date {
letter-spacing:10px;
font-size:14px;
font-family:Letter Gothic Std;
color:white;
}
</style>
</head>
<body onload="startTime()">
<script>
function startTime() {
var today = new Date();
var hr = today.getHours();
var min = today.getMinutes();
var sec = today.getSeconds();
ap = (hr < 12) ? "<span>AM</span>" : "<span>PM</span>";
hr = (hr == 0) ? 12 : hr;
hr = (hr > 12) ? hr - 12 : hr;
hr = checkTime(hr);
min = checkTime(min);
sec = checkTime(sec);
document.getElementById("clock").innerHTML = hr + ":" + min + ":" + sec + " " + ap;
var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
var curWeekDay = days[today.getDay()];
var curDay = today.getDate();
var curMonth = months[today.getMonth()];
var curYear = today.getFullYear();
var date = curWeekDay+", "+curDay+" "+curMonth+" "+curYear;
document.getElementById("date").innerHTML = date;
var time = setTimeout(function(){ startTime() }, 500);
}
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
</script>
<div>
<div class="clockdate-wrapper">
<div id="clock"></div>
<div id="date"></div>
</div>
</div>
</body>
</html>
Comments
Post a Comment