Html+Css+javaScript实现的动态时钟
效果图
时钟根据系统日期进行相应变化
Html部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电子时钟</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--背景-->
<div class="background">
<!--中心红点-->
<div class="center_dot"></div>
<!--数字-->
<div class="num_box"></div>
<!--指针-->
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
<!--日期-->
<div class="date">2022年5月29日星期一</div>
<!--时间-->
<div class="time">
<div class="box">14</div>
<div class="box">10</div>
<div class="box">24</div>
</div>
<!--刻度在js里设置-->
</div>
<script type="text/javascript" src="setTime.js"></script>
</body>
</html>
Css部分:
.background {
margin: 50px auto;
width: 500px;
height: 500px;
border-radius: 50%;
border: 13px solid #8bf0f0;
box-shadow: 0px 0px 30px 6px #444 inset;
position: relative;
}
.center_dot {
margin: auto;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #ff0000;
position: absolute;
top: 50%;
left: 50%;
margin-top: -12px;
margin-left: -12px;
}
.num_box {
width: 460px;
height: 460px;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin-top: -230px;
margin-left: -230px;
}
.num {
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 26px;
position: absolute;
}
.hour {
width: 6px;
height: 110px;
background-color: #000;
position: absolute;
top: 140px;
left: 247px;
box-shadow: 1px -3px 8px 3px #ccc;
transform-origin: bottom center;
transform: rotate(90deg);
}
.minute {
width: 4px;
height: 150px;
background-color: #444;
position: absolute;
top: 100px;
left: 248px;
box-shadow: 1px -3px 8px 2px #ccc;
transform-origin: bottom center;
transform: rotate(230deg);
}
.second {
width: 2px;
height: 200px;
background-color: red;
position: absolute;
top: 50px;
left: 249px;
box-shadow: 1px -3px 8px 1px #ccc;
transform-origin: bottom center;
}
.date {
width: 200px;
height: 40px;
font-size: 16px;
font-weight: 700;
text-align: center;
line-height: 40px;
position: absolute;
top: 270px;
left: 150px;
}
.time {
width: 160px;
height: 50px;
position: absolute;
top: 320px;
left: 174px;
}
.time .box {
display: inline-block;
width: 50px;
height: 50px;
background-color: #333;
color: white;
font-size: 18px;
font-weight: 700;
text-align: center;
line-height: 50px;
}
.scale {
width: 2px;
height: 15px;
background-color: #444;
position: absolute;
transform-origin: top left;
}
.long_scale {
width: 4px;
height: 25px;
background-color: #222;
position: absolute;
transform-origin: top left;
}
js部分:
// 设置数字位置
var num_box = document.querySelector(".num_box");
var num_array = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
for (var i = 0; i < num_array.length; i++) {
var div = document.createElement('div');
var theta = 30 * i * Math.PI / 180;
var left_gap = Math.round(210 * (1 + Math.sin(theta)));
var top_gap = Math.round(210 * (1 - Math.cos(theta)));
div.setAttribute('style', 'left:' + left_gap + 'px;top:' + top_gap + 'px;');
div.setAttribute('class', 'num');
div.innerHTML = num_array[i];
num_box.appendChild(div);
}
// 设置刻度位置
var background = document.querySelector(".background");
for (var i = 0; i < 60; i++) {
var div = document.createElement('div');
var theta = 6 * i * Math.PI / 180;
var left_gap = Math.round(250 * (1 + Math.sin(theta)));
var top_gap = Math.round(250 * (1 - Math.cos(theta)));
div.setAttribute('style', 'left:' + left_gap + 'px;top:' + top_gap + 'px;transform: rotate(' + 6 * i + 'deg);');
if (i % 5 == 0) {
div.setAttribute('class', 'long_scale');
} else {
div.setAttribute('class', 'scale');
}
background.appendChild(div);
}
// 获取指针、三个box、日期信息
var second_line = document.querySelector(".second");
var minute_line = document.querySelector(".minute");
var hour_line = document.querySelector(".hour");
var time = document.querySelector(".time");
var time_boxes = time.children;
var date = document.querySelector('.date');
// 改变日期的函数
function changeDate() {
var cur_time = new Date();
var year = cur_time.getFullYear();
var month = cur_time.getMonth();
var day = cur_time.getDate();
var weekday = cur_time.getDay();
var num_weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
date.innerHTML = year + '年' + (month + 1) + '月' + day + '日' + num_weekday[weekday];
}
// 改变显示时间的函数
function changeTime() {
var cur_time = new Date();
var cur_time_info = [cur_time.getHours(), cur_time.getMinutes(), cur_time.getSeconds()]
if (cur_time_info[0] == 0 && cur_time_info[1] == 0 && cur_time_info[2] == 0) {
// 新的一天到了
changeDate();
}
var theta_second = cur_time_info[2] * 6;
var theta_minute = (cur_time_info[1] + cur_time_info[2] / 60) * 6;
var theta_hour = (cur_time_info[0] + cur_time_info[1] / 60 + cur_time_info[2] / 3600) * 30;
second_line.style.transform = "rotate(" + theta_second + "deg)";
minute_line.style.transform = "rotate(" + theta_minute + "deg)";
hour_line.style.transform = "rotate(" + theta_hour + "deg)";
for (var i = 0; i < 3; i++) {
if (cur_time_info[i] < 10) {
cur_time_info[i] = '0' + cur_time_info[i];
}
time_boxes[i].innerHTML = cur_time_info[i];
}
}
changeDate();
changeTime();
setInterval(changeTime, 1000);