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

MySQL Series Database Design Three Paradigm Tutorial Examples

Table of contents 1. Knowledge description of the...

Implementation of waterfall layout + dynamic rendering

Table of contents Typical waterfall website Water...

MySQL 8.x msi version installation tutorial with pictures and text

1. Download MySQL Official website download addre...

How to set remote access permissions in MySQL 8.0

The previous article explained how to reset the M...

Basic knowledge of load balancing and a simple example of load balancing using nginx

Nginx can generally be used for seven-layer load ...

How to implement CSS to display ellipsis when single-line or multi-line text overflows

1. Single row overflow 1. If a single line overfl...

Complete steps for vue dynamic binding icons

0 Differences between icons and images Icons are ...

Example analysis of the search function of MySQL regular expressions (regexp and rlike)

This article uses examples to illustrate the sear...

After Webpack-cli is successfully installed, check the webpack -v error case for details

Table of contents question 1. Install webpack web...

Detailed discussion on the issue of mysqldump data export

1. An error (1064) is reported when using mysqldu...

How to use VLAN tagged Ethernet card in CentOS/RHEL system

In some scenarios, we want to assign multiple IPs...

Sharing tips on using Frameset to center the widescreen

Copy code The code is as follows: <frameset co...

Sharing of SVN service backup operation steps

SVN service backup steps 1. Prepare the source se...

General Guide to Linux/CentOS Server Security Configuration

Linux is an open system. Many ready-made programs...

A brief analysis of how to access Windows 10 host folders from CentOS 8 virtual machines

After installing VMware Tools, ① text can be copi...