In this tutorial, we'll be creating a real-time clock using JavaScript. We'll be using the Date object to access the current time and updating the clock display on the screen using JavaScript's built-in methods. This clock can be easily integrated into any web page, and can be customized to match the design of your website. Whether you're a beginner or an experienced developer, this tutorial will show you how to create a functional and visually appealing real-time clock using JavaScript.
index.html
<html>
<head>
<title>Realtime Clock</title>
<script src="js/script.js"></script>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Oswald|Roboto:100" rel="stylesheet">
</head>
<body onload="realtimeClock()">
<div class="main-container">
<h1>REAL TIME CLOCK</h1>
<div id="clock"></div>
<img class="img-background" src="image/image.jpg">
</div>
</body>
</html>
style.css
html, body{ margin: 0; width: 100%; } .main-container{ width: 100%; height: 1080px; position: relative; } .img-background{ width: 100%; height: auto; } h1{ width: 100%; margin-top: 15%; position: absolute; font-size: 8vw; font-weight: bold; text-align: center; color: white; font-family: 'Oswald', sans-serif; letter-spacing: 5px; } #clock{ width: 100%; position: absolute; font-size: 9vw; color: white; text-align: center; font-family: 'Roboto', sans-serif; margin-top: 25%; }
script.js
function realtimeClock() { var rtClock = new Date(); var hours = rtClock.getHours(); var minutes = rtClock.getMinutes(); var seconds = rtClock.getSeconds(); var amPm = ( hours < 12 ) ? "AM" : "PM"; hours = (hours > 12) ? hours - 12 : hours; hours = ("0" + hours).slice(-2); minutes = ("0" + minutes).slice(-2); seconds = ("0" + seconds).slice(-2); document.getElementById('clock').innerHTML = hours + " : " + minutes + " : " + seconds + " " + amPm; var t = setTimeout(realtimeClock, 500); }
Watch Full Video Here
Comments
Post a Comment