用JavaScript+CSS实现的超级简单的时钟

最新推荐文章于 2024-03-14 09:28:18 发布

Simple_IDE

最新推荐文章于 2024-03-14 09:28:18 发布

阅读量102

点赞数 1

分类专栏： HTML 文章标签： css javascript

本文链接：https://blog.csdn.net/simple5960/article/details/108645631

版权

HTML 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

<!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>
        *{
            padding: 0;
            margin: 0;
        }
        .clock
        {
            width: 300px;
            height: 300px;
            border: 10px solid #ccc;
            border-radius: 50%;
            margin: 100px auto;
            position: relative;
            
            
        }
        .line
        {
            position: absolute;
            width: 8px;
            background-color: #ccc;
            height: 300px;
            left: 50%;
            top: 0%;
            transform: translate(-50%,0%);
        }
        
        .line2
        {
            /* 因为tranform会覆盖掉以前的transform 所以要把以前的写上 */
            transform:translate(-50%,0%) rotate(30deg);
        }
        .line3
        {
            transform:translate(-50%,0%) rotate(60deg);
        }
        .line4
        {
            transform:translate(-50%,0%) rotate(90deg);
        }
        .line5
        {
            transform:translate(-50%,0%) rotate(120deg);
        }
        .line6
        {
            transform:translate(-50%,0%) rotate(150deg);
        }
        .cover{
            width: 250px;
            height: 250px;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background-color: #ffffff;
        }
        .hour{
            width: 6px;
            height: 80px;
            background-color: red;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-100%);
            transform-origin: center bottom;
            /*animation: myClock 43200s linear infinite;*/
        }
        .second{
            width: 2px;
            height: 100px;
            background-color: aqua;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-100%);
            /* 匀速转 */
           /* animation: myClock 60s linear infinite;
             转60次 
            animation-timing-function: steps(60);*/
            transform-origin: center bottom;
            
            
        }
        .minute{
            width: 4px;
            height: 90px;
            background-color: green;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-100%);
           
            transform-origin: center bottom;
           /* animation: myClock 3600s linear infinite;*/

        }
        .center{
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: #cccccc;
            border-radius: 50%;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
        @keyframes myClock{
            0%{
                transform: translate(-50%,-100%) rotate(0deg);
            }
            100%{
                transform: translate(-50%,-100%) rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="clock">
        <div class="line line1"></div>
        <div class="line line2"></div>
        <div class="line line3"></div>
        <div class="line line4"></div>
        <div class="line line5"></div>
        <div class="line line6"></div>
        <div class="cover"></div>
        <div class="hour"></div>
        <div class="minute"></div>
        <div class="second"></div>
        <div class="center"></div>
    </div>
</body>
<script>
    var hour=document.querySelector(".hour")
    var minute=document.querySelector(".minute")
    var second=document.querySelector(".second")
    function setTime(){
        var nowdate = new Date();
        //获取年月日时分秒
        var year = nowdate.getFullYear(),
            month = nowdate.getMonth()+1,
            day = nowdate.getDay(),
            hours = nowdate.getHours(),
            minutes = nowdate.getMinutes(),
            seconds = nowdate.getSeconds(),
            date = nowdate.getDate();
            console.log(hours);
            console.log(minutes);
            console.log(seconds);
        var hour_rotate=0
        if(hours>=12)
        {
            hour_rotate=(hours-12)*30+Math.floor(minutes/2)
        }
        else
        {
            hour_rotate=hours*30+Math.floor(minutes/2)
        }
        hour.style.transform = 'translate(-50%,-100%) rotate(' + hour_rotate + 'deg)';
        minute.style.transform = 'translate(-50%,-100%)  rotate(' + (minutes*6 ) + 'deg)';
        second.style.transform = 'translate(-50%,-100%)  rotate(' + (seconds*6)+'deg)';
        
    }
    setInterval(setTime, 1000);
    
    

</script>
</html>

Simple_IDE

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用JavaScript+CSS实现的超级简单的时钟

<!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> *{ pad
复制链接

扫一扫