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

Detailed configuration steps for installing Linux (CentOS) under VMware virtual machine

Download CentOS7 The image I downloaded is CentOS...

MariaDB under Linux starts with the root user (recommended)

Recently, due to the need to test security produc...

React tsx generates random verification code

React tsx generates a random verification code fo...

JS implements array filtering from simple to multi-condition filtering

Table of contents Single condition single data fi...

MySQL 5.7 decompressed version installation, uninstallation and garbled code problem graphic solution

1. Installation of the decompressed version (1). ...

Various types of MySQL indexes

What is an index? An index is a data structure th...

CSS3 uses animation attributes to achieve cool effects (recommended)

animation-name animation name, can have multiple ...

Installation steps of mysql under linux

1. Download the mysql tar file: https://dev.mysql...

IDEA reports an error when connecting to MySQL! Server returns invalid timezone. Go to tab and set serverTimezone property

The road ahead is always so difficult and full of...

Detailed explanation of MLSQL compile-time permission control example

Preface The simple understanding of MySQL permiss...

SQL GROUP BY detailed explanation and simple example

The GROUP BY statement is used in conjunction wit...

JavaScript to achieve lottery effect

This article shares the specific code of JavaScri...

Analyze the compilation and burning of Linux kernel and device tree

Table of contents 1. Prepare materials 2. Downloa...

Achieve 3D flip effect with pure CSS3 in a few simple steps

As a required course for front-end developers, CS...

Reasons and solutions for failure of dynamically added routing pages in Vue when refreshing

Table of contents Problem Description Scenario In...