CLOCK ⏰ HTML 5 CODE
 |
| ⏰ CODE OUTPUT 👨💻 |
Clock code
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
const hourHand = document.querySelector('.hourHand');
const minuteHand = document.querySelector('.minuteHand');
const secondHand = document.querySelector('.secondHand');
const time = document.querySelector('.time');
const clock = document.querySelector('.clock');
const audio = document.querySelector('.audio');
function setDate(){
const today = new Date();
const second = today.getSeconds();
const secondDeg = ((second / 60) * 360) + 360;
secondHand.style.transform = `rotate(${secondDeg}deg)`;
audio.play();
const minute = today.getMinutes();
const minuteDeg = ((minute / 60) * 360);
minuteHand.style.transform = `rotate(${minuteDeg}deg)`;
const hour = today.getHours();
const hourDeg = ((hour / 12 ) * 360 );
hourHand.style.transform = `rotate(${hourDeg}deg)`;
time.innerHTML = '<span>' + '<strong>' + hour + '</strong>' + ' : ' + minute + ' : ' + '<small>' + second +'</small>'+ '</span>';
}
setInterval(setDate, 1000);
}
</script>
<style type="text/css">
body{
background-image:url("12.JPG");
background-size:100%150% ;
}
.clock{
width: 300px;
height: 300px;
border-radius: 50%;
background-color: antiquewhite;
margin: 100px auto 0px auto;
position: relative;
border:20px solid cornsilk;
}
.center{
background-color: #000;
position: absolute;
left: calc(50% - 10px);
top: calc(50% - 10px);
width: 20px;
height: 20px;
border-radius: 50%;
z-index: 20;
}
.hourHand{
width: 10px;
height: 75px;
background-color: #000;
transform-origin: bottom center;
border-radius: 4px;
position: absolute;
top: 75px;
left: 145px;
z-index: 10;
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
transform: rotate(360deg);
}
.minuteHand{
width: 5px;
height: 120px;
background-color: #000;
transform-origin: bottom center;
border-radius: 4px;
position: absolute;
top: 30px;
left: 147px;
z-index: 9;
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
transform: rotate(90deg);
}
.secondHand{
width: 2px;
height: 120px;
background-color:red;
transform-origin: bottom center;
border-radius: 4px;
position: absolute;
top: 30px;
left: 149px;
transition: all 0.06s;
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
z-index: 8;
transform: rotate(360deg);
}
.time{
position: absolute;
top: 45%;
left: 10%;
border: 1px solid #fff8dc;
background-color: #fff;
padding: 5px;
display: block;
box-shadow: inset 0px 2px 5px rgba(0,0,0,.4);
border-radius: 5px;
min-width: 70px;
height: 15px;
}
.time small{
color:red;
transition: all 0.05s;
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
.clock ul{
list-style: none;
padding: 0;
}
.clock ul li{
position: absolute;
width:20px;
height:20px;
text-align: center;
line-height: 20px;
font-size: 10px;
color:red;
}
.clock ul li:nth-child(1){
right: 22%;
top:6.5%;
}
.clock ul li:nth-child(2){
right: 6%;
top:25%;
}
.clock ul li:nth-child(3){
right: 1%;
top:calc(50% - 10px);
color:#000;
font-size: 20px;
font-weight: bold;
}
.clock ul li:nth-child(4){
right: 6%;
top:69%;
}
.clock ul li:nth-child(5){
right: 22%;
top:84%;
}
.clock ul li:nth-child(6){
right: calc(50% - 10px);
top:calc(99% - 20px);
color:#000;
font-size: 20px;
font-weight: bold;
}
.clock ul li:nth-child(7){
left: 22%;
top:84%;
}
.clock ul li:nth-child(8){
left: 6%;
top:69%;
}
.clock ul li:nth-child(9){
left: 1%;
top:calc(50% - 10px);
color:#000;
font-size: 20px;
font-weight: bold;
}
.clock ul li:nth-child(10){
left: 6%;
top:25%;
}
.clock ul li:nth-child(11){
left: 22%;
top:6.5%;
}
.clock ul li:nth-child(12){
right: calc(50% - 10px);
top:1%;
color:#000;
font-size: 20px;
font-weight: bold;
}
/* footer */
footer {
background-color: #222;
color: #fff;
font-size: 14px;
bottom: 0;
position: fixed;
left: 0;
right: 0;
text-align: center;
z-index: 999;
}
footer p {
margin: 10px 0;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
footer .fa-heart{
color: red;
}
footer .fa-dev{
color: #fff;
}
footer .fa-twitter-square{
color:#1da0f1;
}
footer .fa-instagram{
color: #f0007c;
}
fotter .fa-linkedin{
color:#0073b1;
}
footer .fa-codepen{
color:#fff
}
footer a {
color: #3c97bf;
text-decoration: none;
margin-right:5px;
}
.youtubeBtn{
position: fixed;
left: 50%;
transform:translatex(-50%);
bottom: 45px;
cursor: pointer;
transition: all .3s;
vertical-align: middle;
text-align: center;
display: inline-block;
}
.youtubeBtn i{
font-size:20px;
float:left;
}
.youtubeBtn a{
color:#ff0000;
animation: youtubeAnim 1000ms linear infinite;
float:right;
}
.youtubeBtn a:hover{
color:#c9110f;
transition:all .3s ease-in-out;
}
.youtubeBtn i:active{
transform:scale(.9);
transition:all .3s ease-in-out;
}
.youtubeBtn span{
font-family: 'Lato';
font-weight: bold;
color: #fff;
display: block;
font-size: 15px;
float: right;
line-height: 20px;
padding-left: 5px;
}
span:hover{color: red;}
@keyframes youtubeAnim{
0%,100%{
color:#c9110f;
}
50%{
color:#ff0000;
}
}
</style>
</head>
<body>
<div class="clock">
<div class="hourHand"></div>
<div class="minuteHand"></div>
<div class="secondHand"></div>
<div class="center"></div>
<div class="time"></div>
<ul>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span>6</span></li>
<li><span>7</span></li>
<li><span>8</span></li>
<li><span>9</span></li>
<li><span>10</span></li>
<li><span>11</span></li>
<li><span>12</span></li>
</ul>
</div>
<audio class="audio" ></audio>
<footer>
<p>
Created with <i class="fa fa-heart"></i> by
<a target="_blank" href="##">ABHISHEK</a>
</p>
</footer>
<div class="youtubeBtn">
<a target="_blank" href="https://www.youtube.com/channel/UCj507e5pE_DojfwrdB0KR4A/featured?sub_confirmation=1">
<span>Watch on YouTube</span>
<i class="fab fa-youtube"></i>
</a>
</div>
</body>
</html>
CODE 👨💻 FILE DOWNLOAD :-
W3 School website link 👉:-
YouTube channel link 👉:-
0 Comments