前言

今天用js+css实现一个时钟(动态)，小伙伴们可以一块实现一下，夯实js、css基础。

知识点：

伪类选择器
多类名实现
border-radius 外边框圆角
transform: translate(-50%) 平移
transform-origin: center center 坐标起点
transform: rotateZ(90deg); 旋转
z-index: 1 层级越大优先级越高
new Date() 获取时间
new Date().getSeconds 获取秒 ...以此类推时很分也能获取

效果图

当然此处为静态图片。

分析过程：

HTML结构搭建过程：

用一个类名为clock的div盒子装两个小盒子（内表盘与外表盘），类名分别为：inner-clock-face和outer-clock-face。
在内表盘中需要时针、分针、秒针，即定义三个盒子，类名分别为："hand hour-hand"、"hand min-hand"、"hand second-hand"，此处采用了多类名命名的方式，旨在将共有的css代码合并，只用突出时针分针秒针的特色，减少代码量
在外表盘中需要6根棍子，这里我们先写4根，还剩下两根可以通过伪类选择器来实现。即定义4个类名分别为"marking marking-one"、"marking marking-two"、"marking marking-three"、"marking marking-four"的div盒子，同样才用多类名的方式实现
setInterval(function(), 1000) 定时器

<div class="clock">
        <div class="outer-clock-face">
            <div class="marking marking-one"></div>
            <div class="marking marking-two"></div>
            <div class="marking marking-three"></div>
            <div class="marking marking-four"></div>

            <div class="inner-clock-face">
                <div class="hand hour-hand"></div>
                <div class="hand min-hand"></div>
                <div class="hand second-hand"></div>
            </div>
        </div>
    </div>

CSS渲染过程：

钟表是圆的，因此大盒子设置：border-radius: 50%当大于等于百分之50时就是一个正圆了
外表盘直接继承大盒子的宽高：因此width和height属性为百分之百，定位方式为相对定位，供内表盘定位参考。
伪类选择器需要有content属性，此处用一个空字串就可以了
伪类选择器是生成行内元素，需要通过display:block的方式更改为块级元素
要让内表盘居中，通过绝对定位的方式距离父级元素左边百分之五十，但是此时是左边距移动了百分之五十，不是真正意义上的居中，因此需要通过向左平移自身的百分之五十实现居中
四根棍子通过绕着Z轴旋转的方式实现样式。

.clock {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 7px solid #ffebdb;
    background-image: url(./背景.jpeg);
    background-size: 110%;
    padding: 20px;
}

.outer-clock-face {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;

}

.outer-clock-face::before,
.outer-clock-face::after {
    content: '';
    width: 10px;
    height: 100%;
    background: #596235;
    display: block;
    border-radius: 8px;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}

.outer-clock-face::after {
    transform: rotateZ(90deg);
    transform-origin: center center;
}

.marking {
    width: 3px;
    height: 100%;
    background: #596235;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    transform-origin: center center;
}

.marking-one {
    transform: rotateZ(30deg);
}

.marking-two {
    transform: rotateZ(60deg);
}

.marking-three {
    transform: rotateZ(120deg);
}

.marking-four {
    transform: rotateZ(150deg);
}

.inner-clock-face {
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background-image: url(./背景.jpeg);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    background-size: 110%;
}

.hand {
    width: 50%;
    height: 6px;
    background: red;
    border-radius: 6px;
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translateY(-50%) rotateZ(90deg);
    transform-origin: 100% center;
}

.hour-hand {
    width: 30%;
}

.min-hand {
    width: 40%;
    height: 3px;
}

.second-hand {
    width: 45%;
    height: 2px;
    background: #b3b3b3;
}

js实现时时旋转

首先要获取到时针分针秒针元素才能做相应操作
获取到了时间，需要计算偏转角度秒针：当前(秒/60) *360 +90 因为开始旋转了90度所以需要把加回去。分针同理，时针会收到分针和秒针的影响，具体数学计算方式：var hoursDegress = hours * 30 + 90 + (mins / 60) * 30
这样刷新一次就变一次，还没有做到每过1s更新一次，实现动态效果，因此需要设置定时器，时间1000ms即1s

// 获取秒针
var secondHand = document.querySelector('.second-hand')
// 获取时针
var hourHand = document.querySelector('.hour-hand')
//获取分针
var minHand = document.querySelector('.min-hand')

function setTime() {
    var now = new Date();

    // 读取秒
    var seconds = now.getSeconds();
    var secondsDegress = (seconds / 60) * 360 + 90
    secondHand.style.transform = `rotate(${secondsDegress}deg)`
    // 读取分
    var mins = now.getMinutes();
    var minsDegress = mins * 6 + 90
    minHand.style.transform = `rotate(${minsDegress}deg)`
    //读取时
    var hours = now.getHours();
    console.log(hours);
    var hoursDegress = hours * 30 + 90 + (mins / 60) * 30
    hourHand.style.transform = `rotate(${hoursDegress}deg)`
}

// 设置秒针旋转的角度


setTime()
// 定时器
setInterval(setTime, 1000)

结语

至此一个精简时针就做好了，大家可以动手尝试一下，有了正确的构思就把他用代码实现吧！

用js+css做一个专属时钟，打好前端基础

前言

效果图

分析过程：

HTML结构搭建过程：

CSS渲染过程：

js实现时时旋转

结语