转载:https://blog.csdn.net/qq_16687863/article/details/100942101
每周要坚持练习2~3个前端的小练习,首先从朽木自雕xmzd的专栏练习开始。
文章目录
前端实战小案例–时钟动画
知识点;
1、transform的用法
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
2、圆形的css样式:border-radius
width: 220px;
height: 220px;
border-radius: 50%;
3、transform-origin
是指旋转时的圆心位置
4、js:style.transform的用法
document.getElementById("sec");
sec_pointer.style.transform = "translate(-50%,20px) rotate("+(sec)*6 + "deg"+")";
5、setTimeout的用法
setTimeout(“方法名”,1000/60);
效果图:
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>时钟动画</title>
<style>
/* 初始化样式 */
html,body,ul{
margin: 0;
padding: 0;
}
/* position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
该样式用于设置水平垂直居中
*/
.clock{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 252px;
height: 252px;
background-color: #000000;
border-radius: 50px;
}
.dial{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 220px;
height: 220px;
border-radius: 50%;
background-color: #fff;
}
.clock .num{
list-style: none;
width: 26px;
position: absolute;
left: 50%;
margin-left: -13px;
font-weight: 800;
text-align: center;
transform-origin: 13px 110px;
}
/* 这里必须加inline-block或block
* 因为transform不适用于inline元素.
*/
.num span{
display: inline-block;
}
#point{
width: 20px;
height: 20px;
border-radius: 50%;
background: #000000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
#hour{
width: 4px;
height: 70px;
background: #000000;
position: absolute;
top: 40px;
left: 50%;
transform: translate(-50%,0) rotate(10deg);
transform-origin: 2px 70px;
border-radius: 2px;
}
#min{
width: 4px;
height: 80px;
background: #000000;
position: absolute;
top: 30px;
left: 50%;
transform-origin: 2px 80px;
border-radius: 2px;
}
#sec{
width: 2px;
height: 120px;
background: #FF8900;
position: absolute;
top: -10px;
left: 50%;
transform-origin: 1px 100px;
border-radius: 1px;
}
</style>
<script>
window.onload = function(){
// 下面两个循环为设置每个数字的旋转角度并将其摆正
li_list = document.getElementsByClassName('num');
for(let i=0;i<li_list.length;i++){
li_list[i].style.transform = "rotate("+(i+1)*30 + "deg"+")";
}
span_list = document.getElementsByTagName('span');
for(let i=0;i<span_list.length;i++){
span_list[i].style.transform = "rotate(-"+(i+1)*30 + "deg"+")";
}
//调用更新指针的函数
update_pointer();
//获取当前时间并让时钟的指针每隔一段时间旋转对应的角度
function update_pointer(){
var date = new Date();
var hour = date.getHours();
var min = date.getMinutes();
// sec为精确到毫秒的秒数,如52.753
var sec = date.getSeconds() + date.getMilliseconds()/1000;
var hour_pointer = document.getElementById("hour");
var min_pointer = document.getElementById("min");
var sec_pointer = document.getElementById("sec");
sec_pointer.style.transform = "translate(-50%,20px) rotate("+(sec)*6 + "deg"+")";
min_pointer.style.transform = "translateX(-50%) rotate("+(min+sec/60)*6 + "deg"+")";
hour_pointer.style.transform = "translateX(-50%) rotate("+(hour-12)*30 + "deg"+")";
console.log("当前时间",date);
// 设置1000/60毫秒后执行操作,此处是一个递归,也可以使用setInterval()
setTimeout(update_pointer,1000/60);
}
}
</script>
</head>
<body>
<div class="clock">
<ul class="dial">
<li class="num"><span>1</span></li>
<li class="num"><span>2</span></li>
<li class="num"><span>3</span></li>
<li class="num"><span>4</span></li>
<li class="num"><span>5</span></li>
<li class="num"><span>6</span></li>
<li class="num"><span>7</span></li>
<li class="num"><span>8</span></li>
<li class="num"><span>9</span></li>
<li class="num"><span>10</span></li>
<li class="num"><span>11</span></li>
<li class="num"><span>12</span></li>
<div id="point"></div>
<div id="hour"></div>
<div id="min"></div>
<div id="sec"></div>
</ul>
</div>
</body>
</html>