If you want to use JavaScript Make an analog clock , So this article will help you . We all know that there are two kinds of clocks , One is simulated , One is digital . Although digital clocks are widely used , But analog clocks are also loved by many people .

Use HTML、CSS and JavaScript Simple analog clock

As you can see in the picture above , Here I use the help of HTML、CSS and JavaScript Made a simple analog clock . Earlier I made more types of analog and digital watches . If you will , You can look at these designs .

Use HTML、CSS and JavaScript Make analog clock ( Beginner tutorial ) JavaScript To design a Neumorphism Style digital clock

as everyone knows , The analog clock case has three hands and slave 1 To 12 The number of . ad locum , I also used symbols in that place , Instead of using from 1 To 12 The number of . In this watch , I set the hour hand to the minimum , Then set minute hand and second hand respectively .

JavaScript Analog clock [ Live demonstration ]

If you want to know how this analog clock works , Then you can watch the following demonstration . ad locum , I provided the required source code , So that you can copy the code and use it in your own work .

demonstration ：https://haiyong.site/simple-javascript-analog-clock

The code download ：https://download.csdn.net/download/qq_44273429/21105858

If you want to use JavaScript Make an analog clock , So this article will help you . We all know that there are two kinds of watches , One is simulated , One is digital . Although digital watches are widely used , But analog watches are also used in many places .

Code acquisition ： Or pay attention to the official account 【 Hai Yong 】 reply 【 Code 】

Use HTML、CSS and JavaScript Simple analog clock

I hope you like this design . I share below a complete tutorial on how I do this design . I hope the following tutorial can help you .

So , First , You have to create a HTML and CSS file .

The first 1 Step ： Create the basic structure of the clock

This paragraph HTML The code is basically the basic structure of the analog clock . I used some CSS Code to design the background and shape of this watch . As you can see in the picture above , It adopts the form of new form design . ad locum , I use CSS Code to implement Neumorphism Design .

As you can see in the above demonstration , I used a border around this watch to make a code border ：7px solid #282828. I use box-shadow Make it clearer .border-radius 50% Make this watch round . I also used height and width 30 rem. If you want to make this watch bigger , You can increase its size .

<div class="clock">
       
</div>

 html {
  background: #282828;
  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: 2rem;
 
}

Demonstration effect ：

The first 2 Step ： Mark... On the clock 1 To 12

<div class="outer-clock-face">
 <div class="marking marking-one"></div>
 <div class="marking marking-two"></div>
 <div class="marking marking-three"></div>
 <div class="marking marking-four"></div>          
</div>

.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::before,
.outer-clock-face::after,
.outer-clock-face .marking{
  content: '';
  position: absolute;
  width: 5px;
  height: 100%;
  background: #1df52f;
  z-index: 0;
  left: 49%;
}

Demonstration effect ：

.outer-clock-face .marking {
  background: #bdbdcb;
  width: 3px;
}

.outer-clock-face .marking.marking-one {
  transform: rotate(30deg)
}

.outer-clock-face .marking.marking-two {
  transform: rotate(60deg)
}

.outer-clock-face .marking.marking-three {
  transform: rotate(120deg)
}

.outer-clock-face .marking.marking-four {
  transform: rotate(150deg)
}

Demonstration effect ： I use the following HTML and CSS The code makes a circle . result , The middle of the long line is covered , And it has a complete 1 To 12 Tag size .

HTML：

<div class="inner-clock-face">
         
 </div>

CSS

.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: 1;
}

.inner-clock-face::before {
  content: '';
  position: absolute;
  top: 50%;
  border-radius: 18px;
  margin-left: -9px;
  margin-top: -6px;
  left: 50%;
  width: 16px;
  height: 16px;
  background: #4d4b63;
  z-index: 11;
}

Demonstration effect ：

The first 3 Step ： Make three pointers to indicate the time

In this cell , I used three hands , They use the following HTML and CSS Code making .

HTML：

<div class="hand hour-hand"></div>
<div class="hand min-hand"></div>
<div class="hand second-hand"></div>

CSS：

.hand {
  width: 50%;
  right: 50%;
  height: 6px;
  background: #61afff;
  position: absolute;
  top: 50%;
  border-radius: 6px;
  transform-origin: 100%;
  transform: rotate(90deg);
  transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}

.hand.hour-hand {
  width: 30%;
  z-index: 3;
}

.hand.min-hand {
  height: 3px;
  z-index: 10;
  width: 40%;
}

.hand.second-hand {
  background: #ee791a;
  width: 45%;
  height: 2px;
}

Demonstration effect ：

The first 4 Step ： Use JavaScript The code activates the clock

We designed the whole watch , But this watch has no function . This means that the pointer of this watch has no function , There is no indication that ​​ Exact time . So , We need to use JavaScript Code .

Use the following JavaScript, I've given instructions on how to rotate these hands . If you know the basics JavaScript, You will understand it .

I have fully explained this paragraph below JavaScript How the code works .

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();   // second hand rotation
  const secondsDegrees = ((seconds / 60) * 360) + 90;   
  secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

  const mins = now.getMinutes();    // minutes hand rotation
  const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;  
  minsHand.style.transform = `rotate(${minsDegrees}deg)`;

  const hour = now.getHours();     // Hours hand rotation
  const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;   
  hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}

JavaScript Code details

About the second hand

const seconds = now.getSeconds();   // second hand rotation
const secondsDegrees = ((seconds / 60) * 360) + 90;   
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

I have stored how the second hand rotates in secondsDegrees in And then I use rotate (${secondsDegrees} deg) To spin the second hand 1 Minutes equal to 60 Seconds, so I divide by 60 The circle is 360 degree , So I multiplied by 360

About the minute hand

const mins = now.getMinutes();    // minutes hand rotation
const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;  
minsHand.style.transform = `rotate(${minsDegrees}deg)`;

I am here minsDegrees How to turn the minute pointer is stored in And then I use (${minsDegrees]deg) To rotate the minute hand 1 Hours equal to 60 Minutes, so I divide by 60 Added second hand position with minutes . Because the minute hand in the right position depends on the second

setInterval(setDate, 1000);

setDate();

wuhu ! take off !

I hope you know how I use... In this tutorial HTML、CSS and JavaScript To make this analog clock . You can use the download button below to download the required source code .

Download button

Or pay attention to the official account 【 Hai Yong 】 reply 【 Code 】

I used it before HTML、CSS and JavaScript Made more types of gadgets , If you will , You can view these designs .

Use HTML、CSS and JavaScript The random password generator Use HTML、CSS、JS and API Make a great weather Web Applications

I've been writing a technology blog for a long time , And mainly through CSDN publish , This is my article Web Applet tutorial . I like to share technology and happiness through articles . You can visit my blog ： https://haiyong.blog.csdn.net/ To learn more . I hope you will like ！

You are welcome to put forward your opinions and suggestions in the comment area ！

If you really learn something new from this article , Like it , Collect it and share it with your friends . Last , Don't forget or support .