html通过js和css实现一个表

• 1.html部分讲解
• 2.css部分讲解
• 3.js部分讲解

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>

标签：transform,js,html,background,shi,css
来源： https://blog.csdn.net/weixin_52249641/article/details/121456527