html通过js和css实现一个表(带图片)

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通过js和css实现一个表(带图片)
设置完html部分和css部分之后的界面如图所示

html通过js和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>
上一篇:HTML、CSS卡片悬停交互效果实现


下一篇:Spark记录