current position:Home>Simple analog clock using HTML, CSS, and JavaScript

Simple analog clock using HTML, CSS, and JavaScript

2021-08-23 03:24:24 Hai Yong

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

 Insert picture description here
Insert picture description here

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

JavaScript  Analog clock
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-size10px;
}

body {
  margin0;
  font-size2rem;
  display: flex;
  flex1;
  min-height100vh;
  align-items: center;
}

.clock {
  width30rem;
  height30rem;
  border7px 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-radius50%;
  margin50px auto;
  position: relative;
  padding2rem;
 
}

Demonstration effect :  Insert picture description here

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;
  width100%;
  height100%;
  border-radius100%;
  background#282828;
  
 
  overflow: hidden;
}

.outer-clock-face::after {
  -webkit-transformrotate(90deg);
  -moz-transformrotate(90deg);
  transformrotate(90deg)
}

.outer-clock-face::before,
.outer-clock-face::after,
.outer-clock-face .marking{
  content'';
  position: absolute;
  width5px;
  height100%;
  background#1df52f;
  z-index0;
  left49%;
}

Demonstration effect :  Insert picture description here

.outer-clock-face .marking {
  background#bdbdcb;
  width3px;
}

.outer-clock-face .marking.marking-one {
  transformrotate(30deg)
}

.outer-clock-face .marking.marking-two {
  transformrotate(60deg)
}

.outer-clock-face .marking.marking-three {
  transformrotate(120deg)
}

.outer-clock-face .marking.marking-four {
  transformrotate(150deg)
}

Demonstration effect :  Insert picture description here 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;
  top10%;
  left10%;
  width80%;
  height80%;
  background#282828;
  -webkit-border-radius100%;
  -moz-border-radius100%;
  border-radius100%;
  z-index1;
}

.inner-clock-face::before {
  content'';
  position: absolute;
  top50%;
  border-radius18px;
  margin-left: -9px;
  margin-top: -6px;
  left50%;
  width16px;
  height16px;
  background#4d4b63;
  z-index11;
}

Demonstration effect : Insert picture description here

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 {
  width50%;
  right50%;
  height6px;
  background#61afff;
  position: absolute;
  top50%;
  border-radius6px;
  transform-origin100%;
  transformrotate(90deg);
  transition-timing-functioncubic-bezier(0.12.70.581);
}

.hand.hour-hand {
  width30%;
  z-index3;
}

.hand.min-hand {
  height3px;
  z-index10;
  width40%;
}

.hand.second-hand {
  background#ee791a;
  width45%;
  height2px;
}

Demonstration effect :  Insert picture description here

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();
 Insert picture description here
Insert picture description here

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 .

copyright notice
author[Hai Yong],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210823032422337p.html

Random recommended