Creating a dynamic and visually appealing Javascript Digital Clock With Date is a great way to enhance any web page. This tutorial will guide you through the process of building your own digital clock that displays the current time and date, providing a useful and stylish element for your website or application.
Project Setup
This section will guide you on how to get started with creating your Javascript Digital Clock With Date.
HTML Structure
First, you need to create the basic HTML structure for the clock and date display. This involves setting up the necessary div elements to hold the time and date information. Use the following code:
<html>
<body onload="startTime()">
<div id="clockdate">
<div class="clockdate-wrapper">
<div id="clock"></div>
<div id="date"></div>
</div>
</div>
CSS Styling
Next, we’ll style the clock and date elements using CSS to make them visually appealing. The CSS code below defines the appearance of the clock, date, and their container, including the font, colors, and layout.
.clockdate-wrapper {
background-color: #333;
padding:25px;
max-width:350px;
width:100%;
text-align:center;
border-radius:5px;
margin:0 auto;
}
#clock{
background-color:#333;
font-family: sans-serif;
font-size:60px;
text-shadow:0px 0px 1px #fff;
color:#fff;
}
#clock span {
color:#888;
text-shadow:0px 0px 1px #333;
font-size:50px;
position:relative;
top:-5px;
left:10px;
}
#date {
letter-spacing:3px;
font-size:14px;
font-family:arial,sans-serif;
color:#fff;
}
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;
//Add a zero in front of numbers<10
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;
}
