新人学习,制作html页面时钟表盘,实现调用时间,
CSS部分代码如下
html,
body{
background-color: #000000;
}
.fix-center{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
/* 风暴烈酒习作 */
.clock-wrapper{
width: 680px;
height: 680px;
background-color: #aa55ff;
border-radius: 50%;
}
.time-wrap{
color: #005500;
font-size: 54px;
font-weight: bold;
}
.dial-time{
position: absolute;
}
.dial-time:nth-child(1){
top: 15px;
left: 50%;
margin-left: -15px;
}
.dial-time:nth-child(2){
right: 40px;
top: 50%;
margin-left: -15px;
}
.dial-time:nth-child(3){
bottom: 15px;
left: 50%;
margin-left: -15px;
}
.dial-time:nth-child(4){
left: 40px;
top: 50%;
margin-left: -15px;
}
.line-wrap{
width: 440px;
height: 27.5rem;
border-radius: 50%;
box-shadow: 0 0 10px 4px #efefef;
}
.dial-line{
position: absolute;
left: 53%;
}
.hour-line{
width:15px;
height: 200px;
margin-top: 80px;
margin-left: -7px;
background-color: #353535;
transform-origin: 50% 75%;
}
.minute-line{
width:10px;
height: 300px;
margin-top: -20px;
margin-left: -5px;
background-color: #353535;
transform-origin: 50% 83%;
}
.second-line{
width:5px;
height: 260px;
margin-top: 20px;
margin-left: -2px;
background-color: red;
transform-origin: 50% 80%;
}
.line-wrap::after{
position: absolute;
top: 1.25rem;
right: 0;
bottom: 0;
left: 27px;
width: 40px;
height: 40px;
margin: auto;
background-color: #ff0000;
border-radius: 50%;
content: '';
}
javascript部分代码如下:
/* 表盘指针 */
let hourLine = document.querySelector('.hour-line'),
minuteLine = document.querySelector('.minute-line'),
secondLine = document.querySelector('.second-line');
function setTime(){
const date = new Date();
let s = date.getSeconds(),
m = date.getMinutes() + s / 60,
h = date.getHours() + m / 60;
/* 风暴烈酒习作 */
hourLine.style.transform = `rotate(${h*30}deg)`;
minuteLine.style.transform = `rotate(${m*6}deg)`;
secondLine.style.transform = `rotate(${s*6}deg)`;
}
setTime();
setInterval(setTime,1000);
HMTL部分代码如下:
<!DOCTYPE html>
<html lang="en">
<!-- 陈.风暴烈酒学习制作 -->
<head>
<meta charset="utf-8" />
<meta http-equiv='X-UA-Compatible' content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0" >
<title>document</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="clock-wrapper fix-center">
<!-- 表盘数字 -->
<div class="time-wrap">
<div class="dial-time">12</div>
<div class="dial-time">3</div>
<div class="dial-time">6</div>
<div class="dial-time">9</div>
</div>
</div>
<!-- 表盘指针 -->
<div class="line-wrap fix-center">
<div class="dial-line hour-line"></div>
<div class="dial-line minute-line"></div>
<div class="dial-line second-line"></div>
</div>
<script src='js/index1.js' type="text/javascript" charset="utf-8"></script>
</body>
</html>