js实现动态罗盘时钟

最新推荐文章于 2024-08-27 13:24:20 发布

AYJCSGM

最新推荐文章于 2024-08-27 13:24:20 发布

阅读量6.1k

点赞数 8

分类专栏： JavaScript 文章标签： JavaScript 动态时钟

本文链接：https://blog.csdn.net/weixin_43664418/article/details/103504465

版权

本文将介绍如何利用JavaScript来实现一个动态的罗盘时钟效果。通过HTML创建基本结构，CSS进行样式设置，JavaScript负责实时更新时钟指针的角度，实现时间的动态显示。这个项目结合了前端的基础知识和动态更新的逻辑，是提升JavaScript技能的好实践。

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

在这里插入图片描述

HTML:

 <script src="//code.jquery.com/jquery-3.3.1.js"></script>
 <script>
        var w_resize = function(){
            var w_fontsize = document.documentElement.clientWidth/750 * 100;
            if(w_fontsize > 100){w_fontsize = 100}
            document.documentElement.style.fontSize = w_fontsize+"px";
        }
        w_resize();
        window.onresize = w_resize;
    </script>
<div class="main" >
        <div class="year">2019年
            <div class="br"></div>
        </div>
        <div class="page mpage"></div>
        <div class="page dpage"></div>
        <div class="page hpage"></div>
        <div class="page minpage"></div>
        <div class="page spage"></div>
        
    </div>

CSS:

*{margin:0;padding:0}
        .main{
            width: 7.5rem;
            height: 7.5rem;
            background: #999;
            overflow: hidden;
            position: relative;
            font-size: 0.14rem;
            margin: auto;
        }
        .page{
            width: 7.5rem;
            height: 7.5rem;
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
            transition: all 0.3s linear;
        }
        .year{
            width: 4.03rem;
            height: 0.4rem;
            color: #fff;
            text-align: right;
            line-height: 0.4rem;
            margin-top: 3.55rem;
            position: relative;
            overflow: hidden;
        }
        .year::after{
            content:"";
            position: absolute;
            bottom: 0;
            height: 1px;
        }
        .month{
            width: 2rem;
            height: 0.4rem;
            top: 3.55rem;
            left: 2.75rem;
            line-height: 0.40rem;
            position: absolute;
            transition: all 1s linear;
        }
        .date{
            width: 3