JS+CSS实现动态时钟_js教程

JS+CSS实现动态时钟

2022-01-21 15:20易点都不懒 js教程

这篇文章主要为大家详细介绍了JS+CSS实现动态时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JS+CSS实现动态时钟的具体代码，供大家参考，具体内容如下

JS+CSS实现动态时钟

知识点总结：

document.querySelector（）方法返回文档中匹配指定 CSS 选择器的一个元素。

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

HTML+js部分

				?

									<!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部分

				?

									*{

									 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;

									}