抖音炫酷时间罗盘，2D时间罗盘桌面（免费）用html，css和JavaScript实现

柒翼

已于 2022-07-27 22:33:50 修改

阅读量1.6k

点赞数

分类专栏： web前端文章标签：前端 javascript css html5

于 2022-07-27 22:20:55 首次发布

本文链接：https://blog.csdn.net/m0_61741706/article/details/126023924

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

先上图

背景可以随意更换成自己喜欢的壁纸桌面

注意：不用修改文件名，替换图片即可，图片一定要和css文件在同级目录。

源码文件在文末

这个css代码块

* {
    margin: 0;
    padding: 0;
}

body {
    font-size: 18px;
    color: #ffffff;
    font-weight: bold;
    font-family: 'Microsoft YaHei', 'Times New Roman', Times, serif;
    background: url(bg30.jpg) no-repeat;
    padding: 0;
    margin: 0;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover; 
}

.wrap {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 50%;
    top: 50%;
}

ul li {
    list-style: none;
    width: 64px;
    height: 64px;
    line-height: 64px;
    margin: 0;
    text-align: center;
    position: absolute;
    left: -32px;
    top: -32px;
}

/*元素被选中的样式*/
.elementActive {
    color: rgb(118, 7, 155);
    font-weight: bold;
}

下面是html的部分代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>时间罗盘</title>
        <link href="css/style.css" rel="stylesheet"/>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </head>

    <body>
        <div class="wrap">
            <div id="yearId">
                <ul>
                    <li class="elementActive">年</li>
                </ul>
            </div>
            <div id="monthId">
                <ul>
                    <li>01月</li>
                    <li>02月</li>
                    <li>03月</li>
                    <li>04月</li>
                    <li>05月</li>
                    <li>06月</li>
                    <li>07月</li>
                    <li>08月</li>
                    <li>09月</li>
                    <li>10月</li>
                    <li>11月</li>
                    <li>12月</li>
                </ul>
            </div>

$(function () {
    /**
     * 旋转元素
     * @param elementId 元素Id
     * @param currNumber 日期数值
     * @param translateNumber 元素距离中心点的距离
     */
    function rotateElement(elementId, currNumber, translateNumber) {
        const $id = $('#' + elementId + ' ul li');
        // 圆所包含的元素个数
        let circleSize = $id.size();
        // 计算平均每个角的弧度
        let circleDeg = 360 / circleSize;
        // 计算角的弧度偏差
        let offsetDeg = circleDeg * currNumber;
        // 对与当前时间匹配的元素添加样式并去除其它元素的样式
        $id.eq(currNumber).addClass('elementActive').siblings().removeClass('elementActive');
        // 渲染所有元素
        for (let i = 0; i < circleSize; ++i) {
            $id.eq(i).css({
                'transition': currNumber === 0 ? '' : '.8s transform',
                'transform': 'rotate(' + (circleDeg * i - offsetDeg) + 'deg) translate(' + translateNumber + 'px, 0px)'
            })
        }
    }

    function init(callback) {
        let date = new Date();
        $("#yearId ul li").text(date.getFullYear() + "年");
        rotateElement('secondId', date.getSeconds(), 305);
        rotateElement('minusId', date.getMinutes(), 255);
        rotateElement('hourId', date.getHours(), 205);
        rotateElement('weekId', date.getDay() - 1, 155);
        rotateElement('dayId', date.getDate() - 1, 115);
        rotateElement('monthId', date.getMonth(), 65);
        rotateElement('yearId', date.getFullYear(), 0);

        (callback instanceof Function) && callback();
    }

    // 先初始化
    init(function () {
        // 循环调度
        setInterval(function () {
            init();
        }, 1000);
    });

});

下期博客教大家如何更换成电脑桌面

一定要注意压缩包解压后的3个文件一定要在同一个文件夹下，下面时bai度wangpan

链接:https://pan.baidu.com/s/10TOfcUkxJxcNpsYPRItJUg?pwd=1245
提取码:1245