css3利用transform打造2D时钟
2021年06月18日
627
css3利用transform打造2D时钟
案例知识点分析：
1、利用定位完成时钟的绘制。
2、背景使用了放射性渐变。
3、利用JavaScript完成刻度和时间数字的旋转。
4、利用Date()对象获取系统时间，并让时针指向对应的刻度。
5、利用定时器不断更新时间，完成时针的运动。
html:
<div id="clock-wrap"> <div id="clock"> <ul id="list"></ul> </div> <div id="num"> <ul> <li>12</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> </ul> </div> <div id="hour"></div> <div id="min"></div> <div id="sec"></div> <div id="circle"></div> </div>
css:
<style id="css">
body,ul{
margin: 0;
padding: 0;
}
body{
font: 1em 'microsoft Yahei';
color: #666;
background-color: #333;
}
h1{
text-align: center;
color: #eee;
font-size: 3rem;
}
li{
list-style: none;
}
p{
color: #ddd;
text-align: center;
position: relative;
top: 100px;
}
a{
color: #999;
text-decoration: none;
transition: 0.2s;
}
a:hover{
color: #ddd;
}
#clock-wrap{
width: 400px;
height: 400px;
border: 10px solid #fff;
border-radius: 50%;
margin: 80px auto 0;
box-shadow: 0 0 40px rgba(0,0,0,1);
position: relative;
}
#clock ul{
width: 400px;
height: 400px;
border-radius: 50%;
background: radial-gradient(circle at center, #667eea,#764ba2);
box-shadow: 0 0 50px rgba(0,0,0,0.5) inset;
}
#clock ul li{
width: 4px;
height: 10px;
background: rgba(255, 255, 255, 0.5);
position: absolute;
left: 50%;
top: 0;
margin-left: -2px;
/* li的旋转中心点在圆形中间 */
transform-origin: center 200px;
}
#clock li:nth-child(5n+1){
height: 18px;
}
#num{
width: 360px;
height: 360px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
#num li{
color: rgba(255,255,255,0.5);
font: 2em Arial,Helvetica,sans-serif;
position: absolute;
left: 50%;
top: 0;
margin-left: -10px;
transform-origin: center 180px;
}
</style>我们通过js实现 闹钟 刻度尺的设置：
window.onload = function(){
let oList = document.getElementById('list')
let oCSS = document.getElementById('css')
let aNums = document.getElementById('num').getElementsByTagName('li')
let oHour = document.getElementById('hour')
let oMin = document.getElementById('min')
let oSec = document.getElementById('sec')
let aLi = ''
let sCSS = ''
// 循环60次，产生刻度值
for(let i=0; i<60; i++){
aLi += '<li></li>'
// 注意这里 i+1 与 (i+1) 输出结果不同
sCSS += '#clock li:nth-child('+(i+1)+'){transform:rotate(+'+i*6+'deg);}'
}
for(let i=0; i<12; i++){
sCSS += '#num li:nth-child('+(i+1)+'){transform:rotate(+'+i*30+'deg);}'
}
// 把遍历出来的li放置到ul无序列表中
oList.innerHTML = aLi
// CSS追加到原来的css文档中（给li元素添加 各个css样式，追加到style标签中）
oCSS.innerHTML += sCSS
}预览：
时针的绘制，涉及到的css样式：
#hour{
width: 14px;
height: 100px;
border-radius: 3px;
margin-left: -7px;
margin-top: -100px;
}
#hour,#min,#sec{
background: #fff;
box-shadow: 0 0 6px rgba(0,0,0,0.5);
position: absolute;
left: 50%;
top: 50%;
/* 时针的旋转点在自己的底部 */
transform-origin: bottom;
}预览：
分钟的绘制，涉及到的css样式：
#min{
width: 10px;
height: 150px;
border-radius: 2px;
margin-left: -5px;
margin-top: -150px;
}预览：
秒针的绘制，涉及到的css样式：
#sec{
width: 4px;
height: 180px;
border-radius: 1px;
margin-left: -2px;
margin-top: -180px;
}预览：
中间圆点的绘制，涉及css样式：
#circle{
width: 40px;
height: 40px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
position: absolute;
left: 50%;
top: 50%;
margin-left: -20px;
margin-top: -20px;
}预览：
让 时针，分针，秒针 按照不同的旋转角度 进行旋转，js脚本设置如下所示：
// 初始化函数
myTime()
// 设置定时器，每隔1秒执行一次函数
setInterval(myTime, 1000)
function myTime(){
let oDate = new Date()
let iSec = oDate.getSeconds()
// 精确到秒数的分钟数
let iMin = oDate.getMinutes()+iSec/60
// 精确到分秒的小时数，可以在旋转的时候更精确
let iHour = oDate.getHours()+iMin/60
console.log(iSec)
console.log(oSec)
oSec.style.transform ='rotate('+iSec*6+'deg)';
oMin.style.transform = 'rotate('+iMin*6+'deg)';
oHour.style.transform = 'rotate('+iHour*30+'deg)';
}预览：
