Skip to content

Instantly share code, notes, and snippets.

@shiftenterdev

shiftenterdev/clock.html

Created July 5, 2023 11:12
Show Gist options
  • Save shiftenterdev/471b175fe10fd9918fb648726ed15972 to your computer and use it in GitHub Desktop.
Save shiftenterdev/471b175fe10fd9918fb648726ed15972 to your computer and use it in GitHub Desktop.
Download ZIP
Analog javaScript clock
Raw
clock.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NStime</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html {
background: #fff;
text-align: center;
font-size: 10px;
}
body {
margin: 0;
font-size: 2rem;
display: flex;
flex: 1;
min-height: 100vh;
align-items: center;
}
.clock {
width: 30rem;
height: 30rem;
border: 7px solid #282828;
box-shadow: -4px -4px 10px rgba(67, 67, 67, 0.5),
inset 4px 4px 10px rgba(0, 0, 0, 0.5),
inset -4px -4px 10px rgba(67, 67, 67, 0.5),
4px 4px 10px rgba(0, 0, 0, 0.3);
border-radius: 50%;
margin: 50px auto;
position: relative;
padding: 1.6rem;
background: #282828;
}
.outer-clock-face {
position: relative;
width: 100%;
height: 100%;
border-radius: 100%;
background: #282828;
overflow: hidden;
}
.outer-clock-face::after {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg)
}
.outer-clock-face .marking {
content: '';
position: absolute;
width: 6px;
height: 100%;
background: #eeeeee;
z-index: 1;
left: 49%;
}
.outer-clock-face .marking {
background: #eeeeee;
width: 6px;
}
.outer-clock-face .marking.marking-one:nth-last-of-type(6n+1) {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg)
}
.outer-clock-face .marking.marking-one:nth-last-of-type(6n+2) {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
transform: rotate(60deg)
}
.outer-clock-face .marking.marking-one:nth-last-of-type(6n+3) {
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
transform: rotate(120deg)
}
.outer-clock-face .marking.marking-one:nth-last-of-type(6n+4) {
-webkit-transform: rotate(150deg);
-moz-transform: rotate(150deg);
transform: rotate(150deg)
}
.outer-clock-face .marking.marking-one:nth-last-of-type(6n+5) {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg)
}
.outer-clock-face .marking.marking-one:nth-last-of-type(6n) {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg)
}
.outer-clock-face .minute-mark {
width: 3px;
}
.outer-clock-face .minute-mark:nth-last-of-type(24n+1) {
transform: rotate(6deg)
}
.outer-clock-face .minute-mark:nth-last-of-type(24n+2) {
transform: rotate(12deg)
}
.outer-clock-face .minute-mark:nth-last-of-type(24n+3) {
transform: rotate(18deg)
}
.outer-clock-face .minute-mark:nth-last-of-type(24n+4) {
transform: rotate(24deg)
}
.outer-clock-face .minute-mark:nth-last-of-type(24n+5) {
transform: rotate(36deg)
}
.outer-clock-face .minute-mark:nth-last-of-type(24n+6) {
transform: rotate(42deg)
}
.outer-clock-face .minute-mark:nth-last-of-type(24n+7) {
transform: rotate(48deg)
}
.outer-clock-face .minute-mark:nth-last-of-type(24n+8) {
transform: rotate(54deg)
}
.outer-clock-face .minute-mark:nth-last-of-type(24n+9) {
transform: rotate(66deg)
}
.outer-clock-face .minute-mark:nth-last-of-type(24n+10) {
transform: rotate(72deg)
}
.outer-clock-face .minute-mark:nth-last-of-type(24n+11) {
transform: rotate(78deg)
}
.outer-clock-face .minute-mark:nth-last-of-type(24n+12) {
transform: rotate(84deg)
}
.outer-clock-face .minute-mark:nth-last-of-type(24n+13) {
transform: rotate(96deg)
}
.outer-clock-face .minute-mark:nth-last-of-type(24n+14) {
transform: rotate(102deg)
}
.outer-clock-face .minute-mark:nth-last-of-type(24n+15) {
transform: rotate(108deg)
}
.outer-clock-face .minute-mark:nth-last-of-type(24n+16) {
transform: rotate(114deg)
}
.outer-clock-face .minute-mark:nth-last-of-type(24n+17) {
transform: rotate(126deg)
}
.outer-clock-face .minute-mark:nth-last-of-type(24n+18) {
transform: rotate(132deg)
}
.outer-clock-face .minute-mark:nth-last-of-type(24n+19) {
transform: rotate(138deg)
}
.outer-clock-face .minute-mark:nth-last-of-type(24n+20) {
transform: rotate(144deg)
}
.outer-clock-face .minute-mark:nth-last-of-type(24n+21) {
transform: rotate(156deg)
}
.outer-clock-face .minute-mark:nth-last-of-type(24n+22) {
transform: rotate(162deg)
}
.outer-clock-face .minute-mark:nth-last-of-type(24n+23) {
transform: rotate(168deg)
}
.outer-clock-face .minute-mark:nth-last-of-type(24n+24) {
transform: rotate(174deg)
}
.inner-clock-face-min {
position: absolute;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
background: #282828;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
z-index: 1;
}
.inner-clock-face {
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
background: #282828;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
z-index: 2;
}
.inner-clock-face::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 16px;
border-radius: 18px;
margin-left: -8px;
margin-top: -7px;
background: #4d4b63;
z-index: 11;
}
.inner-clock-face-2 {
position: absolute;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
background: #282828;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
z-index: 1;
}
.inner-clock-face-2::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 16px;
border-radius: 18px;
margin-left: -9px;
margin-top: -7px;
background: #4d4b63;
z-index: 11;
}
.hand {
width: 50%;
right: 50%;
height: 8px;
background: #aeaeae;
position: absolute;
top: 49%;
transform-origin: 100%;
transform: rotate(90deg);
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
.hand.hour-hand {
width: 40%;
z-index: 3;
top: 49%;
}
.hand.min-hand {
height: 6px;
z-index: 10;
width: 55%;
top: 49%;
}
.hand.second-hand {
background: red;
width: 45%;
height: 2px;
top: 50%;
}
.hand.second-hand:after {
content: '';
background: red;
left: -5px;
width: 10px;
height: 10px;
position: absolute;
border-radius: 50%;
top: -4px;
}
</style>
</head>
<body>
<div class="clock">
<div class="outer-clock-face">
<div class="marking minute-mark"></div>
<div class="marking minute-mark"></div>
<div class="marking minute-mark"></div>
<div class="marking minute-mark"></div>
<div class="marking minute-mark"></div>
<div class="marking minute-mark"></div>
<div class="marking minute-mark"></div>
<div class="marking minute-mark"></div>
<div class="marking minute-mark"></div>
<div class="marking minute-mark"></div>
<div class="marking minute-mark"></div>
<div class="marking minute-mark"></div>
<div class="marking minute-mark"></div>
<div class="marking minute-mark"></div>
<div class="marking minute-mark"></div>
<div class="marking minute-mark"></div>
<div class="marking minute-mark"></div>
<div class="marking minute-mark"></div>
<div class="marking minute-mark"></div>
<div class="marking minute-mark"></div>
<div class="marking minute-mark"></div>
<div class="marking minute-mark"></div>
<div class="marking minute-mark"></div>
<div class="marking minute-mark"></div>
<div class="inner-clock-face-min"></div>
<div class="marking marking-one"></div>
<div class="marking marking-one"></div>
<div class="marking marking-one"></div>
<div class="marking marking-one"></div>
<div class="marking marking-one"></div>
<div class="marking marking-one"></div>
<div class="inner-clock-face">
<div class="hand hour-hand"></div>
<div class="hand min-hand"></div>
<div class="hand second-hand"></div>
</div>
</div>
</div>
<script>
const secondHand = document.querySelector('.second-hand');
const minsHand = document.querySelector('.min-hand');
const hourHand = document.querySelector('.hour-hand');
function setDate() {
const now = new Date();
const seconds = now.getSeconds();
const secondsDegrees = ((seconds / 60) * 360) + 90;
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
const mins = now.getMinutes();
const minsDegrees = ((mins / 60) * 360) + 90;
minsHand.style.transform = `rotate(${minsDegrees}deg)`;
const hour = now.getHours();
const hourDegrees = ((hour / 12) * 360) + ((mins / 60) * 30) + 90;
hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}
setInterval(setDate, 1000);
setDate();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment