JS+CSS to realize dynamic clock

JS+CSS to realize dynamic clock

This article example shares the specific code of JS+CSS to implement dynamic clock for your reference. The specific content is as follows

Summary of knowledge points:

The document.querySelector() method returns an element in the document that matches the specified CSS selector.

The setInterval() method calls a function or evaluates an expression at a specified period (in milliseconds).
The setInterval() method will call the function repeatedly until clearInterval() is called or the window is closed. The ID value returned by setInterval() can be used as a parameter to the clearInterval() method.

HTML+js part

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="shiying.css" >
 <title>Document</title>
</head>

<body>
 <div class="clock">
 <div class="hour">
 <div class="hr" id="hr"></div>
 </div>
 <div class="min">
 <div class="mn" id="mn"></div>
 </div>
 <div class="sec">
 <div class="sc" id="sc"></div>
 </div>
 </div>
 <script type="text/javascript">
 const deg = 6;
 const hr = document.querySelector('#hr');
 const mn = document.querySelector('#mn');
 const sc = document.querySelector('#sc');

 setInterval(() => {

 let day = new Date();
 let hh = day.getHours() * 30;
 let mm = day.getMinutes() * deg;
 let ss = day.getSeconds() * deg;

 hr.style.transform = `rotateZ(${(hh) + (mm / 12)}deg)`;
 mn.style.transform = `rotateZ(${mm}deg)`;
 sc.style.transform = `rotateZ(${ss}deg)`;
 })

 </script>
</body>

</html>

CSS Part

*{
 margin:0;
 padding:0;
 box-sizing: border-box;
}
body{
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
 background: #091921;
}
.clock{
 width: 350px;
 height: 350px;
 display:flex;
 justify-content: center;
 align-items: center;
 background: url(1613462007944.png);
 background-size: cover;
 border:4px solid #091921;
 border-radius: 50%;
 box-shadow: 0 -15px 15px rgba(255,255,255,0.05),
 inset 0 -15px 15px rgba(255,255,255, 0.05),
 0 -15px 15px rgba(0,0,0,0.05),
 inset 0 -15px 15px rgba(0,0,0, 0.05);
}
.clock:before
{
 content:"";
 position: absolute;
 width: 15px;
 height: 15px;
 background: #fff;
 border-radius: 50%;
 z-index:10000;

}
.clock .hour,
.clock .min,
.clock .sec
{
 position: absolute;

}
.clock .hour, .hr{
 width: 160px;
 height: 160px;
}
.clock .min, .mn{
 width: 190px;
 height: 190px;
}
.clock .sec, .sc{
 width: 230px;
 height: 230px;
}
.hr, .mn, .sc{
 display: flex;
 justify-content: center;
 position: absolute;
 border-radius: 50%;
}
.hr:before{
 content:"";
 position: absolute;
 width: 8px;
 height: 80px;
 background: #ff105e;
 z-index: 10;
 border-radius: 6px 6px 0 0;
}
.mn:before{
 content:"";
 position: absolute;
 width: 4px;
 height: 90px;
 background: #fff;
 z-index: 11;
 border-radius: 6px 6px 0 0;
}
.sc:before{
 content:"";
 position: absolute;
 width: 4px;
 height: 150px;
 background: #fff;
 z-index:12;
 border-radius: 6px 6px 0 0;
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • js realizes a simple digital clock effect
  • HTML5 canvas js (digital clock) example code
  • Five steps to easily implement JavaScript HTML clock effect
  • JavaScript to implement the compass clock of Tik Tok
  • JavaScript to implement a simple clock example code
  • Realizing dynamic clock effects based on javascript
  • A simple clock effect js implementation code
  • Javascript to achieve dynamic clock effect
  • Introduction to javascript: dynamic clock, some methods to display the complete clock, countdown to the New Year
  • Web page countdown digital clock effect implemented by JS

<<:  A detailed introduction to Tomcat directory structure

>>:  What to do if you forget your password in MySQL 5.7.17

Recommend

Vue defines private filters and basic usage

The methods and concepts of private filters and g...

Detailed explanation of how to install PHP curl extension under Linux

This article describes how to install the PHP cur...

HTML table tag tutorial (25): vertical alignment attribute VALIGN

In the vertical direction, you can set the row al...

Detailed steps to install MySQL 5.6 X64 version under Linux

environment: 1. CentOS6.5 X64 2.mysql-5.6.34-linu...

Usage and execution process of http module in node

What is the role of http in node The responsibili...

How to use docker to deploy front-end applications

Docker is becoming more and more popular. It can ...

MySQL learning database backup detailed explanation

Table of contents 1.DB,DBMS,SQL 2. Characteristic...

The vue project realizes drawing a watermark in a certain area

This article shares with you how to use Vue to dr...

The 6 Most Effective Ways to Write HTML and CSS

This article shares the 6 most effective methods,...

MySQL optimization: how to write high-quality SQL statements

Preface There are a lot of information and method...

Summary of Vue's cross-domain problem handling and solutions

When you send a network request, the following sa...

A graphic tutorial on how to install MySQL in Windows

Abstract: This article mainly explains how to ins...

Native JS music player

This article example shares the specific code of ...

Vue+element+springboot to implement file download progress bar display function example

Table of contents 1. Demand Background 2. Optimiz...

Implementation of Docker configuration modification of Alibaba Cloud image repository

The docker repository itself is very slow, but th...