html通过js和css实现一个表
1.html部分讲解
将钟表拆解成两部分,表盘和指针。表盘是大盒子box,指针是小盒子shi,fen,miao,dian
<div id="box">
<div id="shi"></div>
<div id="fen"></div>
<div id="miao"></div>
<div id="dian"></div>
</div>
2.css部分讲解
根据html部分的盒子,我们在css中对其属性进行一个设置。时针短一些,粗一些。分针长一些,细一些。秒针最长,最细,且为红色。
除了对html部分进行设置以外,也要对接下来js部分做好铺垫,css中
transform-origin:属性用来设置当指针开始旋转的时候指针围绕哪一个点进行旋转。
#box{ width: 225px;
height: 225px;
background: url("./img/biao.jpg")no-repeat;
position: relative;
margin: 100px auto 0;
background-position: -33px -8px;
border-radius: 50%}
#dian{width: 2px;
height: 2px;
background: green;
position: absolute;
top: 112px;
left: 112px}
#shi{width: 6px;
height: 60px;
background: #000;
position: absolute;
left: 110px;
top: 70px;
transform-origin: 50% 72%}
#fen{width: 4px;
height: 80px;
position: absolute;
left: 111px;
top: 50px;
background: #000;
transform-origin: 50% 79%}
#miao{width: 2px;
height: 100px;
position: absolute;
left: 112px;
top:40px;
background: red;
transform-origin: 50% 73%;}
biao.jpg
设置完html部分和css部分之后的界面如图所示
3.js部分讲解
要想让指针动起来,就需要用到灵魂js了,具体解析我放在代码中
<script>
var shi=document.getElementById('shi'),
fen=document.getElementById('fen'),
miao=document.getElementById('miao')
//选中盒子的id
function clock() {
var time=new Date(),
s=time.getSeconds(),
m=time.getMinutes(),
h=time.getHours()
//将这些方法赋值给一些变量达到简化代码的目的
miao.style.transform='rotate('+s*6+'deg)'
//每过一秒钟,秒针旋转一个单位,秒的单位是一个小格,一个小格是6°
fen.style.transform='rotate('+(m+s/60)*6+'deg)'
//每过一分钟,分针旋转一个单位,分的单位也是一个小格,一个小格是6°
shi.style.transform='rotate('+(h+m/60+s/3600)*30+'deg)'
/*每过一小时,时针旋转一个单位,小时的单位是5个小格,即一个大格,
一个大格是30°。*/
/*我们还要注意一点,我们希望每隔一秒让指针全部动一下,
而不是每隔一分钟时针动一下。因为真实场景下所有指针都在动,
我们暂且将现实中的表看做每隔一秒动一下,所以我们将单位同意设置成
s, fen.style.transform='rotate('+(m+s/60)*6+'deg)'
shi.style.transform='rotate('+(h+m/60+s/3600)*30+'deg)'*/
}
clock();
setInterval(clock,1000);
</script>