原生js组合模式实现时钟转动

最新推荐文章于 2023-12-08 18:53:08 发布

原创最新推荐文章于 2023-12-08 18:53:08 发布 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#js

JS 专栏收录该内容

26 篇文章

订阅专栏

这篇博客介绍了如何利用原生JavaScript的面向对象编程方式实现时钟转动的效果。作者通过分享代码展示了一种不同于传统面向过程的方法，提供了HTML、CSS和JavaScript的完整实现，并在文末给出了GitHub链接供读者查阅。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前用“面向过程”的方式写过一个转动时钟，今天突然想要用“面向对象”的方式试一试，写完啦！

js代码：

(function(document) {
    // 把document保存为局部变量
    var doc = document;
    // 所需元素,timer表示定时器
    var ele = {
        eleHour: doc.getElementsByClassName("hour")[0],
        eleMin: doc.getElementsByClassName("min")[0],
        eleSec: doc.getElementsByClassName("sec")[0],
        timer: null
    };
    // Time构造函数
    function Time(hour,min,sec) {
        this.hour = hour;
        this.min = min;
        this.sec = sec;
    }
    // 由于对Time原型重写，所以需要指定Time原型的constructor属性指向Time
    Object.defineProperty(Time.prototype,"constructor",{
        enumerable: false,
        value: Time
    })
    // Time原型，用于保存下列方法
    Time.prototype = {
        // 设置时针转动的度数
        setHourT: function() {
            return this.hour*30+0.5*this.min+0.5/60*this.sec;
        },
        // 设置分针转动的度数
        setMinT: function() {
            return this.min*6+0.1*this.sec;
        },
        // 设置秒针转动的度数
        setSecT: function() {
            return this.sec*6;
        }
    };
    // 每隔一秒钟重新获取一次时间
    ele.timer = setInterval(function() {
        var nowTime = new Date(),
            h = nowTime.getHours();
            m = nowTime.getMinutes();
            s = nowTime.getSeconds();
        var time = new Time(h,m,s);
        ele.eleSec.style.transform = "rotate("+ time.setSecT() + "deg)";
        ele.eleMin.style.transform = "rotate("+time.setMinT() + "deg)";
        ele.eleHour.style.transform = "rotate("+time.setHourT() + "deg)";
    },1000)
    // 清除定时器
    return function() {
        clearInterval(ele.timer);
    }
})(document);

// 顺便复习下
// var time = new Date();
// time.getFullYear();time.getYear();
// time.getMonth();
// time.getData();
// time.getHours();
// time.getMinutes();
// time.getSeconds();
// time.getMilliseconds();

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="time.css">
    <title>时钟</title>
</head>
<body>
    <div id="clock">
        <div class="hms">
            <!-- 时针 -->
            <div class="hour"></div>
            <!-- 分针 -->
            <div class="min"></div>
            <!-- 秒针 -->
            <div class="sec"></div>
        </div>
    </div> 
    <script src="time.js"></script>
</body>
</html>

css代码：

/* init */
html,body {
    width: 100%;
    height: 100%;
}
body,ul {
    margin: 0;
}
ul {
    padding: 0;
    list-style: none;
}
/* clock */
#clock {
    display: flex;  
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-align-items: center;
    -moz-align-items: center;
    align-items: center;
    width: 300px;
    height: 300px;
    margin: 60px auto;
    border-radius: 50%;
    box-shadow: 0 0 15px;
}
.hms {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: #333;
    border-radius: 50%;
}
.hms div {
    position: absolute;
    bottom: 50%;
    background-color: #333;
    transform-origin: center bottom;
}
.hms .hour {
    left: calc(50% - 10px/2);
    width: 10px;
    height: 80px;
}
.hms .hour::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 79px;   
    border-width: 14px 5px;
    border-style: solid;
    border-color: transparent transparent #333 transparent; 
}
.hms .min {
    left: calc(50% - 8px/2);
    width: 8px;
    height: 110px;    
    transform: rotate(15deg);
}
.hms .min::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 109px;
    border-width: 12px 4px;
    border-style: solid;
    border-color: transparent transparent #333 transparent; 
}
.hms .sec {
    left: calc(50% - 6px/2);
    width: 6px;
    height: 120px;
    transform: rotate(30deg);
}
.hms .sec::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 119px;
    border-width: 10px 3px;
    border-style: solid;
    border-color: transparent transparent #333 transparent; 
}

css总结：

// 1.box-shadow：IE8-不支持加兼容前缀没用
// 2.box-radius：IE8-不支持，加兼容前缀没用
// 3.flex弹性布局：IE完全不支持，加兼容前缀只能兼容到IE10
// 4.transform: IE8-不支持，加兼容前缀没用

github: https://github.com/COMINGLIU/skills.github.io