<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
minimum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <link rel="stylesheet" href="./css/normalize.css"> -->
<!-- <link rel="stylesheet" href="./css/lee_index.css"> -->
<title>Document</title>
<style>
</style>
</head>
<body>
<div class="witch">
<div>
<div class="dot"></div>
<div class="sz"></div>
<div class="fz"></div>
<div class="mz"></div>
<!-- 表盘刻度 -->
<span class="kedu"></span>
<span class="kedu"></span>
<span class="kedu"></span>
<span class="kedu"></span>
<span class="kedu"></span>
<span class="kedu"></span>
<span class="kedu"></span>
<span class="kedu"></span>
<span class="kedu"></span>
<span class="kedu"></span>
<span class="kedu"></span>
<span class="kedu"></span>
</div>
</div>
<div class="box">
<div class="num_witch">
<input type="text" value="00" id="hour">:
<input type="text" value="00" id="min">:
<input type="text" value="00" id="sec">
</div>
</div>
<script>
var sz = document.querySelector(".sz");
var fz = document.querySelector(".fz");
var mz = document.querySelector(".mz");
var hour = document.querySelector("#hour");
var min = document.querySelector("#min");
var sec = document.querySelector("#sec");
// 获取刻度
var kedu = document.querySelectorAll(".kedu");
// 旋转刻度
for (let i = 0; i < kedu.length; i++) {
kedu[i].style.transform = "rotate(" + i * 30 + "deg)";
}
function gettTime() {
var date = new Date();
var hours = date.getHours();
var mins = date.getMinutes();
var seconds = date.getSeconds();
if (seconds % 60 == 0) {
mz.style.transform = "rotate(-90deg)";
}
if (mins % 60 == 0) {
fz.style.transform = "rotate(-90deg)";
}
if (hours % 12 == 0) {
sz.style.transform = "rotate(-90deg)";
}
sz.style.transform = "rotate(" + (30 * (hours % 12) - 90 + (1 / 12) * mins) + "deg)";
fz.style.transform = "rotate(" + (6 * mins - 90 + 0.1 * seconds) + "deg)";
mz.style.transform = "rotate(" + (6 * seconds - 90) + "deg)";
if (hours < 10) {
hours = "0" + hours;
}
if (mins < 10) {
mins = "0" + mins;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
hour.setAttribute("value", hours);
min.setAttribute("value", mins);
sec.setAttribute("value", seconds);
}
setInterval(gettTime, 1000);
</script>
</body>
<style>
body {
background-color: (255, 255, 255);
}
.witch {
position: relative;
width: 200px;
height: 200px;
border: 10px solid #000;
border-radius: 50%;
background-color: transparent;
margin: 0 auto;
}
.witch div:nth-child(1) {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 190px;
height: 190px;
border-radius: 50%;
margin: auto auto;
background-color: #fff;
/* background-color: transparent; */
box-shadow: 0 0 20px rgba(115, 115, 115, 0.387);
}
.dot {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 20px;
/* height: 20px; */
height: 20px;
border-radius: 50%;
background-color: #000;
}
.sz {
position: absolute;
left: 100px;
top: 96px;
width: 40px;
height: 6px;
background-color: #000;
transform-origin: 0 3px;
transform: rotate(-90deg);
/* transition: transform 1s linear; */
/* transform: ra */
}
.fz {
position: absolute;
left: 100px;
top: 97px;
width: 55px;
height: 4px;
background-color: #000;
transform-origin: 0 2px;
transform: rotate(-90deg);
/* transition: transform 1s linear; */
}
.mz {
position: absolute;
left: 100px;
top: 98px;
width: 70px;
height:2px;
background-color: #000;
transform-origin: 0 1px;
transform: rotate(-90deg);
/* transition: transform 1s linear; */
}
.kedu {
position: absolute;
display: block;
top: 0;
left: 50%;
transform: translateX(-50%);
transform-origin: 0 100px;
transform: rotate(0);
width: 2px;
height: 16px;
background-color: #000;
}
/* 数字时间 */
.box {
margin-top: 10px;
}
.num_witch {
display: flex;
justify-content: space-around;
width: 100px;
height: 30px;
margin: 0 auto;
color: #000;
}
.num_witch input {
width: 20px;
text-align: center;
}
</style>
</html> |
|
收藏
淘帖
踩
