css3实现钟表

最新推荐文章于 2022-11-21 15:46:40 发布

一李

最新推荐文章于 2022-11-21 15:46:40 发布

阅读量284

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43641432/article/details/108308617

版权

前端专栏收录该内容

102 篇文章 1 订阅

订阅专栏

时钟：

在js中循环出li，作为刻度
使用定时器和transition使得元素动起来
主要锻炼了transition和transfrom的相关属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style id="css">
        *{
            margin: 0;
            padding: 0;
        }
        #wrap{
            position: absolute;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            border: 1px solid;
            left: 50%;
            top: 50%;
            margin-left:-100px ;
            margin-top:-100px ;
            
        }
        ul>li{
            position: absolute;

            list-style:none;

            left: 99px;
            top: 0;
            width: 2px;
            height: 10px;
            background: black;
            transform-origin:center 100px ;
        }
        ul>li:nth-child(5n+1){
           height: 15px;
        }
       
        .hour{
            position: absolute;
            left: 97px;
            top: 70px;
            width: 6px;
            height: 30px;
            background: black;
            transform-origin:center bottom;
        }
        .minute{
            position: absolute;
            left: 97px;
            top: 50px;
            width: 4px;
            height: 50px;
            background: gray;
            transform-origin:center bottom;
        }
        .second{
            position: absolute;
            left: 99px;
            top: 30px;
            width: 2px;
            height: 60px;
            background: red;
            transform-origin:center bottom;
        }
        .bottom{
            position: absolute;
            left: 90px;
            top: 90px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="wrap">
        
        <ul>
            
        </ul>
        
        
        
        <div class="hour"> </div>
        <div class="minute"> </div>
        <div class="second"> </div>
        <div class="bottom"> </div>
    </div>
</body>
<script>
    window.onload = function(){
        var hourNode = document.querySelector(".hour")
        var minNode = document.querySelector(".minute")
        var secNode = document.querySelector(".second")
        var urlNode = document.querySelector("#wrap>ul")
        var styleNode = document.createElement("style")
        var htmlLI = ""
        var cssText = ""
        for(var i = 0;i<60;i++){
            htmlLI+="<li></li>"
            cssText+="ul > li:nth-child("+(i+1)+"){transform: rotate("+(i*6)+"deg);}"
        }
        urlNode.innerHTML = htmlLI
        styleNode.innerHTML = cssText
        document.head.appendChild(styleNode)
        move()
        setInterval(move,1000)

        function move(){
            var date = new Date()
            
            
            var s = date.getSeconds()
            var m = date.getMinutes()+s/60
            var h = date.getHours()+m/60
            hourNode.style.transform = "rotate("+(30*h)+"deg)"
            minNode.style.transform = "rotate("+(6*m)+"deg)"
            secNode.style.transform = "rotate("+(6*s)+"deg)"
        }
    }
</script>
</html>

一李

关注

0
点赞
踩
0

收藏

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

时钟：在js中循环出li，作为刻度使用定时器和transition使得元素动起来主要锻炼了transition和transfrom的相关属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &.
复制链接

扫一扫