您的位置：首页 > Web前端 > CSS

css3时钟简单实现

2020-06-24 20:52 246 查看

目前未能实现59刻度到0刻度的过渡，望大神指点

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.clock{
position: relative;
margin: 100px auto;
width: 400px;
height: 400px;
border: 2px solid blue;
border-radius: 50%;
}
.clock>.hour{
position: absolute;
right: 195px;
top: 100px;
width: 10px;
height: 100px;
background-color: hotpink;
transform-origin: center bottom;
/*transition: .5s;*/
}
.clock>.minute{
position: absolute;
right: 197px;
top: 60px;
width: 6px;
height: 140px;
background-color: mediumspringgreen;
transform-origin: center bottom;
/*transition: .5s;*/
}
.clock>.second{
position: absolute;
right: 199px;
top: 20px;
width: 4px;
height: 180px;
background-color: red;
transform-origin: center bottom;
/*transition: .5s;*/
}
.clock>.icon{
position: absolute;
right: 175px;
top:175px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: darkkhaki;
}
.clock>.scale>li{
position: absolute;
right: 198px;
width: 4px;
height: 12px;
background-color: purple;
transform-origin: center 200px;
}
</style>
</head>
<body>
<section class="clock">
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
<div class="icon"></div>
<ul class="scale"></ul>
</section>
<script>
window.onload=function () {
let scale = document.querySelector('.scale');
let hour = document.querySelector('.hour');
let minute = document.querySelector('.minute');
let second = document.querySelector('.second');
let lis = '';
let sumMinutes = 0;
//开始刻画刻度
for (let i = 0 ; i < 60 ; i++ ){
if (i%5==0){
lis += `<li style="transform: rotate(${6*i}deg); height:20px"></li>`
}else {
lis += `<li style="transform: rotate(${6*i}deg)"></li>`
}
}
scale.innerHTML=lis;
//刻度刻画结束

move();
setInterval(function () {
move();
},1000);

// 时钟移动函数
function move() {
let date = new Date();
let s = date.getSeconds();
let m = date.getMinutes()+s/60;
let h = date.getHours()+m/60;
if (s===59){
second.style.transition = '0s';
}else {
second.style.transition = '.5s';
second.style.transform = `rotate(${6*s}deg)`;
}
second.style.transform = `rotate(${6*s}deg)`;
minute.style.transform = `rotate(${6*m}deg)`;
hour.style.transform = `rotate(${30*h}deg)`;
}
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航