Here's a simple HTML, CSS, and JavaScript code snippet for adding a digital clock to your Blogger site.
Steps to Add the Digital Clock:
- Open Blogger and go to the Layout section.
- Click on Add a Gadget and select HTML/JavaScript.
- Paste the following code and save it.
HTML, CSS & JavaScript Code for Digital Clock
Coding 1:
<div id="clock-container">
<div id="digital-clock"></div>
</div>
<style>
#clock-container {
text-align: center;
font-size: 24px;
font-family: Arial, sans-serif;
font-weight: bold;
background: black;
color: lime;
padding: 10px;
border-radius: 10px;
display: inline-block;
}
</style>
<script>
function updateClock() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var amPm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12 || 12; // Convert to 12-hour format
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
var timeString = hours + ":" + minutes + ":" + seconds + " " + amPm;
document.getElementById('digital-clock').innerHTML = timeString;
}
setInterval(updateClock, 1000);
updateClock();
</script>
Coding 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Digital Clock</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: white;
color: white;
font-family: Arial, sans-serif;
}
.clock {
font-size: 50px;
font-weight: bold;
padding: 20px;
border-radius: 10px;
background-color: #222;
box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.2);
}
</style>
</head>
<body>
<div class="clock" id="clock"></div>
<script>
function updateClock() {
let now = new Date();
let hours = now.getHours().toString().padStart(2, '0');
let minutes = now.getMinutes().toString().padStart(2, '0');
let seconds = now.getSeconds().toString().padStart(2, '0');
document.getElementById('clock').textContent = `${hours}:${minutes}:${seconds}`;
}
setInterval(updateClock, 1000);
updateClock();
</script>
</body>
</html>
Coding 3:
<script src="https://cdn.logwork.com/widget/digital.js"></script>
<a href="https://logwork.com/current-time-in-gingee-india-tamil-nadu" class="digital-clock" data-style="flip" data-size="344" data-timezone="Asia/Kolkata" data-language="en">Current time in Gingee, India</a>
Coding 4:
<script src="https://cdn.logwork.com/widget/text.js"></script>
<a href="https://logwork.com/current-time-in-villupuram-india-tamil-nadu" class="clock-widget-text" data-timezone="Asia/Kolkata" data-language="en">Villupuram, India</a>
Coding 5:
<script src="https://cdn.logwork.com/widget/clock.js"></script>
<a href="https://logwork.com/current-time-in-villupuram-india-tamil-nadu" class="clock-time" data-style="default-numeral" data-size="250" data-timezone="Asia/Kolkata">Current time in Villupuram, India</a>
Countdown Timer:
<script src="https://cdn.logwork.com/widget/countdown.js"></script>
<a href="https://logwork.com/countdown-timer" class="countdown-timer" data-timezone="Asia/Kolkata" data-date="2025-02-14 00:22">Countdown Timer</a>
<!doctype html>
<style>
.clock-btn-container {
display: flex;
justify-content: center;
align-items: center;
margin: 5px;
}
.clock-btn {
display: inline-flex;
justify-content: center;
align-items: center;
padding: 10px 15px;
background: linear-gradient(to right, #FF9900, #FF6600);
color:#rrr;
font-size: 19px;
font-weight: bold;
text-decoration: none;
border-radius: 5px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
cursor: pointer;
}
.clock-btn:hover {
background: linear-gradient(to right, #FF6600, #FF9900);
transform: translateY(-2px);
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
}
.clock-btn span {
margin-right: 6px;
}
.button-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 260px;
text-align: center;
}
</style>
<a href="https://www.nosrwebs.com/"><img src="https://bit.ly/img-scr" /></a>
<a href="https://zodiacpsycho-inc.blogspot.com/?m=1"><img src="https://bit.ly/img-scr" /></a>
<div class="clock-btn-container">
<div class="clock-btn">
<span id="clock-text"></span>
</div>
</div>
<script>
function updateClock() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
var clockText = hours + ':' + minutes + ':' + seconds + ' ' + ampm;
document.getElementById('clock-text').textContent = clockText;
}
setInterval(updateClock, 1000); // Update clock every second
</script>
</!doctype>
No comments:
Post a Comment