web实例——时钟

一个大懒鬼

已于 2023-01-27 12:09:09 修改

阅读量1.1k

点赞数 2

分类专栏： web实例文章标签：前端 css html javascript

于 2023-01-26 15:08:45 首次发布

本文链接：https://blog.csdn.net/weixin_45975504/article/details/128765272

版权

web实例专栏收录该内容

4 篇文章 0 订阅

订阅专栏

实现如图时钟效果：

1.首先制作表盘

html：

<div id="container">
        <div id="clock_dial"></div>
    </div>

css：

*{
    margin: 0;
    padding: 0;
}
body{
    width: 100vm;
    height: 100vh;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}
#container{
    width: 400px;
    height: 400px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 10px #fff;
}
#container #clock_dial{
    width: 370px;
    height: 370px;
    background: #000;
    border-radius: 50%;
    box-shadow: inset 0 0 10px #fff;
}

当前效果：

2.在表盘中填入数字等部分

html：

<div id="container">
        <div id="clock_dial">
            <div class="num">3</div>
            <div class="num">6</div>
            <div class="num">9</div>
            <div class="num">12</div>
        </div>
</div>

css:(未经改动的代码这里不重复，下同)

#container #clock_dial{
    width: 370px;
    height: 370px;
    background: #000;
    border-radius: 50%;
    box-shadow: inset 0 0 10px #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
#container #clock_dial .num{
    color: #fff;
    font-size: 50px;
    font-weight: 800;
    position: absolute;
}
.num:nth-child(1){
    right: 10px;
}
.num:nth-child(2){
    bottom: 0px;
}
.num:nth-child(3){
    left: 10px;
}
.num:nth-child(4){
    top: 0px;
}
#container #clock_dial .lattice{
    width: 6px;
    height: 30px;
    background: #fff;
    position: absolute;
    top: 0px;
    transform-origin: center 185px;
}

JavaScript：

let clock = document.getElementById('clock_dial');

for (let i=1; i<9;i++){
    let la = document.createElement('div');
    la.className = 'lattice'
    if(i<3){
        la.style.transform = `rotate(${i*30}deg)`;
    }else if(i<5){
        la.style.transform = `rotate(${(i+1)*30}deg)`;
    }else if(i<7){
        la.style.transform = `rotate(${(i+2)*30}deg)`;
    }else{
        la.style.transform = `rotate(${(i+3)*30}deg)`;
    }
    clock.appendChild(la)
}

当前效果：

3.最后，实现指针部分

html：

<div id="container">
        <div id="clock_dial">
            <div class="num">3</div>
            <div class="num">6</div>
            <div class="num">9</div>
            <div class="num">12</div>
            <div id="circle"></div>
            <div id="hour"></div>
            <div id="min"></div>
            <div id="sec"></div>
        </div>
</div>

css：

#container #clock_dial #circle{
    width: 30px;
    height: 30px;
    background: #fff;
    border-radius: 50%;
}
#container #clock_dial #hour{
    position: absolute;
    width: 15px;
    height: 70px;
    background: #fff;
    transform: translateY(-35px);
    transform-origin: center bottom;
}
#container #clock_dial #min{
    position: absolute;
    width: 10px;
    height: 100px;
    background: #fff;
    transform: translateY(-50px);
    transform-origin: center bottom;
}
#container #clock_dial #sec{
    position: absolute;
    width: 5px;
    height: 120px;
    background: #fff;
    transform: translateY(-60px);
    transform-origin: center bottom;
}

JavaScript：

let hour = document.getElementById('hour');
let min = document.getElementById('min');
let sec = document.getElementById('sec');

let run = () => {
    let h = new Date().getHours();
    let m = new Date().getMinutes();
    let s = new Date().getSeconds();

    if (h > 12) {
        h = h - 12;
        hour.style.transform = `translateY(-35px) rotate(${h*30}deg)`;
    }else{
        hour.style.transform = `translateY(-35px) rotate(${h*30}deg)`;
    }
    min.style.transform = `translateY(-50px) rotate(${m*6}deg)`;
    sec.style.transform = `translateY(-60px) rotate(${s*6}deg)`;
}
run();
setInterval(run,1000);

当前效果：

4.完整代码

html主体部分：

<body>
    <div id="container">
        <div id="clock_dial">
            <div class="num">3</div>
            <div class="num">6</div>
            <div class="num">9</div>
            <div class="num">12</div>
            <div id="circle"></div>
            <div id="hour"></div>
            <div id="min"></div>
            <div id="sec"></div>
        </div>
    </div>
</body>

css：

*{
    margin: 0;
    padding: 0;
}
body{
    width: 100vm;
    height: 100vh;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}
#container{
    width: 400px;
    height: 400px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 10px #fff;
}
#container #clock_dial{
    width: 370px;
    height: 370px;
    background: #000;
    border-radius: 50%;
    box-shadow: inset 0 0 10px #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
#container #clock_dial .num{
    color: #fff;
    font-size: 50px;
    font-weight: 800;
    position: absolute;
}
.num:nth-child(1){
    right: 10px;
}
.num:nth-child(2){
    bottom: 0px;
}
.num:nth-child(3){
    left: 10px;
}
.num:nth-child(4){
    top: 0px;
}
#container #clock_dial .lattice{
    width: 6px;
    height: 30px;
    background: #fff;
    position: absolute;
    top: 0px;
    transform-origin: center 185px;
}
#container #clock_dial #circle{
    width: 30px;
    height: 30px;
    background: #fff;
    border-radius: 50%;
}
#container #clock_dial #hour{
    position: absolute;
    width: 15px;
    height: 70px;
    background: #fff;
    transform: translateY(-35px);
    transform-origin: center bottom;
}
#container #clock_dial #min{
    position: absolute;
    width: 10px;
    height: 100px;
    background: #fff;
    transform: translateY(-50px);
    transform-origin: center bottom;
}
#container #clock_dial #sec{
    position: absolute;
    width: 5px;
    height: 120px;
    background: #fff;
    transform: translateY(-60px);
    transform-origin: center bottom;
}

JavaScript：

let clock = document.getElementById('clock_dial');
let hour = document.getElementById('hour');
let min = document.getElementById('min');
let sec = document.getElementById('sec');

for (let i = 1; i < 9; i++) {
    let la = document.createElement('div');
    la.className = 'lattice'
    if (i < 3) {
        la.style.transform = `rotate(${i * 30}deg)`;
    } else if (i < 5) {
        la.style.transform = `rotate(${(i + 1) * 30}deg)`;
    } else if (i < 7) {
        la.style.transform = `rotate(${(i + 2) * 30}deg)`;
    } else {
        la.style.transform = `rotate(${(i + 3) * 30}deg)`;
    }
    clock.appendChild(la)
}

let run = () => {
    let h = new Date().getHours();
    let m = new Date().getMinutes();
    let s = new Date().getSeconds();

    if (h > 12) {
        h = h - 12;
        hour.style.transform = `translateY(-35px) rotate(${h*30}deg)`;
    }else{
        hour.style.transform = `translateY(-35px) rotate(${h*30}deg)`;
    }
    min.style.transform = `translateY(-50px) rotate(${m*6}deg)`;
    sec.style.transform = `translateY(-50px) rotate(${s*6}deg)`;
}
run();
setInterval(run,1000);