vscode时钟效果图

wangsrc

已于 2023-11-27 23:59:21 修改

阅读量230

点赞数 1

文章标签： html css 前端

于 2023-05-12 13:28:10 首次发布

本文链接：https://blog.csdn.net/wangsrc/article/details/130640184

版权

这篇文章展示了一个新手通过HTML、CSS和JavaScript创建的动态时钟项目。作者不熟悉JavaScript，但经过努力成功实现了分针和时针的动态转动效果。代码包括HTML结构、CSS样式和JS逻辑，用于实时更新时钟显示。

摘要由CSDN通过智能技术生成

动态时钟效果（ps:js使用不熟练，捣鼓了好久才出现分针和动态）

哈哈哈，看效果图~~~

代码实现

HTML部分

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>彩带时钟</title>

    <link rel="stylesheet" href="style.css">

</head>



<body>

    <div class="clocks-wrap">

        <div class="ribbon"></div>

        <div class="dark"></div>

        <div class="lid"></div>

        <div class="line-wrap">

            <div class="line big"></div>

            <div class="line"></div>

            <div class="line"></div>

            <div class="line big"></div>

            <div class="line"></div>

            <div class="line"></div>

        </div>

        <!-- 时针 -->

        <div class="hour"></div>

        <!-- 分针 -->

        <div class="minute"></div>

        <!-- 秒针 -->

        <div class="second"></div>

    </div>

    <script src="script.js"></script>

</body>
</html>

=========================================================================

CSS部分

      * {

            margin: 0;

            padding: 0;

            list-style: none;

            box-sizing: border-box;

        }



        body {

            background-color: #181f4b;

        }



        .clocks-wrap {

            position: absolute;

            top: 0;

            bottom: 0;

            left: 0;

            right: 0;

            margin: auto;

            width: 300px;

            height: 300px;

        }



        .ribbon {

            content: "";

            display: block;

            width: 50%;

            height: 100%;

            border-radius: 300px 0 0 300px;

            background-image: linear-gradient(#ff1efe, #5547fd, #3a4b99, #181f4b);

            transform-origin: right center;

            z-index: -1;

        }



        .dark {

            position: absolute;

            top: 0;

            bottom: 0;

            left: 0;

            right: 0;

            margin: auto;

            content: "";

            display: block;

            width: 96%;

            height: 96%;

            border-radius: 50%;

            background-color: #181f4b;

        }



        .lid {

            position: absolute;

            top: 0;

            bottom: 0;

            left: 0;

            right: 0;

            margin: auto;

            width: 10px;

            height: 10px;

            border-radius: 50%;

            background-color: #ffffff;

            z-index: 1;

        }





        .line {

            position: absolute;

            top: 0;

            bottom: 0;

            left: 0;

            right: 0;

            margin: auto;

            width: 1px;

            height: 101%;

            /* background-color: red; */

        }



        .line::after {

            content: "";

            display: block;

            width: 100%;

            height: 20px;

            background-color: #5c799c;

        }



        .line::before {

            position: absolute;

            bottom: 0;

            content: "";

            display: block;

            width: 100%;

            height: 20px;

            background-color: #5c799c;

        }




        .line:nth-child(2) {

            transform: rotate(30deg);

        }



        .line:nth-child(3) {

            transform: rotate(60deg);

        }



        .line:nth-child(4) {

            transform: rotate(90deg);

        }



        .line:nth-child(5) {

            transform: rotate(120deg);

        }



        .line:nth-child(6) {

            transform: rotate(150deg);

        }



        .line.big {

            width: 3px;

        }



        .line.big::after {

            background-color: #5953f2;

        }



        .line.big::before {

            background-color: #5953f2;

        }




        .hour {

            position: absolute;

            left: 0;

            right: 0;

            top: 40px;

            width: 4px;

            height: calc(50% - 40px);

            margin: auto;

            background-color: #8c8ca5;

            transform-origin: bottom;

        }



        .minute {

            position: absolute;

            left: 0;

            right: 0;

            top: 0;

            width: 4px;

            height: 50%;

            margin: auto;

            background-color: #8c8ca5;

            transform-origin: bottom;

        }




        .second {

            position: absolute;

            left: 0;

            right: 0;

            top: 0;

            width: 3px;

            height: 50%;

            margin: auto;

            background-color: #8c8ca5;

            transform-origin: center bottom;

        }



        .second::after {

            position: absolute;

            top: 0;

            left: 0;

            right: 0;

            margin: auto;

            width: 2px;

            height: 2%;

            background-color: #fff4ff;

            border-radius: 50%;

            box-shadow: 0 0 12px 11px #fff4ff;

            content: "";

            display: block;

        }

=========================================================================

JS部分

/* script.js */



let hl = document.querySelector(".hour");



let ml = document.querySelector(".minute");



let sl = document.querySelector(".second");



let bg = document.querySelector(".ribbon");





function time() {



    let date = new Date();



    let second = date.getSeconds();



    let minute = date.getMinutes() + second / 60;



    let hour = date.getHours() + minute / 60;





    bg.style.transform = `rotate(${second * 6}deg)`;



    sl.style.transform = `rotate(${second * 6}deg)`;



    ml.style.transform = `rotate(${minute * 6}deg)`;



    hl.style.transform = `rotate(${hour * 30}deg)`;



}



setInterval(time, 1000);

结语

刚开始学习JS，觉得这个小项目有趣，虽然没有学精，但还是想试试看，其间有不少问题，费脑子，不过总算做出来了，满满的成就感。嘿嘿嘿!