css3时钟简单实现

最新推荐文章于 2023-06-04 23:19:55 发布

Fish10_01

最新推荐文章于 2023-06-04 23:19:55 发布

阅读量395

点赞数 1

文章标签： css3 javascript es6

本文链接：https://blog.csdn.net/qq_42390357/article/details/106950863

版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .clock{
            position: relative;
            margin: 100px auto;
            width: 400px;
            height: 400px;
            border: 2px solid blue;
            border-radius: 50%;
        }
        .clock>.hour{
            position: absolute;
            right: 195px;
            top: 100px;
            width: 10px;
            height: 100px;
            background-color: hotpink;
            transform-origin: center bottom;
            /*transition: .5s;*/
        }
        .clock>.minute{
            position: absolute;
            right: 197px;
            top: 60px;
            width: 6px;
            height: 140px;
            background-color: mediumspringgreen;
            transform-origin: center bottom;
            /*transition: .5s;*/
        }
        .clock>.second{
            position: absolute;
            right: 199px;
            top: 20px;
            width: 4px;
            height: 180px;
            background-color: red;
            transform-origin: center bottom;
            /*transition: .5s;*/
        }
        .clock>.icon{
            position: absolute;
            right: 175px;
            top:175px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: darkkhaki;
        }
        .clock>.scale>li{
            position: absolute;
            right: 198px;
            width: 4px;
            height: 12px;
            background-color: purple;
            transform-origin: center 200px;
        }
    </style>
</head>
<body>
    <section class="clock">
        <div class="hour"></div>
        <div class="minute"></div>
        <div class="second"></div>
        <div class="icon"></div>
        <ul class="scale"></ul>
    </section>
<script>
    window.onload=function () {
        let scale = document.querySelector('.scale');
        let hour = document.querySelector('.hour');
        let minute = document.querySelector('.minute');
        let second = document.querySelector('.second');
        let lis = '';
        let sumMinutes = 0;
    //开始刻画刻度
        for (let i = 0 ; i < 60 ; i++ ){
            if (i%5==0){
                lis += `<li style="transform: rotate(${6*i}deg); height:20px"></li>`
            }else {
                lis += `<li style="transform: rotate(${6*i}deg)"></li>`
            }
        }
        scale.innerHTML=lis;
        //刻度刻画结束

        move();
        setInterval(function () {
            move();
        },1000);

        // 时钟移动函数
        function move() {
            let date = new Date();
            let s = date.getSeconds();
            let m = date.getMinutes()+s/60;
            let h = date.getHours()+m/60;
            if (s===59){
                second.style.transition = '0s';
            }else {
                second.style.transition = '.5s';
                second.style.transform = `rotate(${6*s}deg)`;
            }
            second.style.transform = `rotate(${6*s}deg)`;
            minute.style.transform = `rotate(${6*m}deg)`;
            hour.style.transform = `rotate(${30*h}deg)`;
        }
    }
</script>
</body>
</html>

Fish10_01

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3时钟简单实现

目前未能实现59刻度到0刻度的过渡，望大神指点<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; list-style: non
复制链接

扫一扫