css3手把手 transform 小时钟

学习css3ing，正在学习transfomr，突发奇想用此做个小时钟，开始吧：

准备前期工作，把时钟的表盘，时分秒针，实时时间标签的大概样子做好，效果如图：

html代码如下：

<div class="main">
        <div id="timeLabel"></div>
        <div id="hour"></div>
        <div id="minute"></div>
        <div id="second"></div>
    </div>

css 代码如下：

 1  <style>
 2         * {
 3             margin: 0;
 4             padding: 0;
 5         }
 6         .main {
 7             position: relative;
 8             margin: 100px auto;
 9              300px;
10             height: 300px;
11             border-radius: 300px;
12             border: 1px solid #000;
13            box-shadow:2px 5px;
14         }
15         #timeLabel {
16             position: absolute;
17             background-color:pink;
18             100px;
19             height:30px;
20             left:100px;
21             top:180px;
22         }
23 
24         #hour {
25              100px;
26             height: 10px;
27             background-color: red;
28             position:absolute;
29             left:150px;
30             top:145px;
31         }
32         #minute {
33             120px;
34             height:8px;
35             background-color:blue;
36             position:absolute;
37             left:150px;
38             top:146px;
39         }
40         #second {
41              140px;
42             height: 4px;
43             background-color: green;
44             position: absolute;
45             left: 150px;
46             top: 148px;
47         }
48     </style>

　　2. 初始化默认时间，和表盘刻度，效果如下：

更改后的css代码：

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        .main {
            position: relative;
            margin: 100px auto;
            width: 300px;
            height: 300px;
            border-radius: 300px;
            border: 1px solid #000;
            box-shadow: 2px 5px #808080;
        }

        #timeLabel {
            position: absolute;
            background-color: pink;
            width: 80px;
            height: 25px;
            left: 110px;
            top: 180px;
            color: #fff;
            line-height: 25px;
            text-align: center;
        }

        #hour {
            width: 100px;
            height: 10px;
            background-color: red;
            position: absolute;
            left: 150px;
            top: 145px;
            transform-origin: 0 50%;
        }

        #minute {
            width: 120px;
            height: 8px;
            background-color: blue;
            position: absolute;
            left: 150px;
            top: 146px;
            transform-origin: 0 50%;
        }

        #second {
            width: 140px;
            height: 4px;
            background-color: green;
            position: absolute;
            left: 150px;
            top: 148px;
            transform-origin: 0 50%;
        }

        .hourPointer, .minuterPointer, .secondPointer {
            position: absolute;
            transform-origin: 0 50%;
        }
        .hourPointer {
            height: 10px;
            width: 12px;
            left: 150px;
            top: 145px;
            background-color: #f00;
            z-index:3;
        }
        .minuterPointer {
            height: 8px;
            width: 10px;
            left: 150px;
            top: 146px;
            background-color: #b6ff00;
            z-index: 2;
        }
        .secondPointer {
            height: 6px;
            width: 8px;
            left: 150px;
            top: 147px;
            background-color: #fa8;
            z-index: 1;
        }
    </style>

View Code

初始化 js代码：

window.onload = function () {
            initClock();
          
        }
        var timer = null;
        function $(id) {
            return document.getElementById(id)
        }
        function CreateKeDu(pElement, className, deg, translateWidth) {
            var Pointer = document.createElement("div");
            Pointer.className = className
            Pointer.style.transform = "rotate(" + deg + "deg)   translate(" + translateWidth + "px)";
            pElement.appendChild(Pointer);
        }
        function initClock() {
            var main = $("biaopan");
            var timeLabel = $("timeLabel");
            var hour = $("hour");
            var minute = $("minute");
            var second = $("second");

            var now = new Date();
            var nowHour = now.getHours();
            var nowMinute = now.getMinutes();
            var nowSecond = now.getSeconds();

            //初始化timeLabel
            timeLabel.innerHTML = nowHour + ":" + nowMinute + ":" + nowSecond;

            //初始化表盘
            for (var index = 0; index < 4; index++) {
                CreateKeDu(main, "hourPointer", index * 90, 138);
            }

            for (var index = 0; index < 12; index++) {
                CreateKeDu(main, "minuterPointer",index*30, 140);
            }
            for (var index = 0; index < 60; index++) {
                CreateKeDu(main, "secondPointer", index * 6, 142);
            }

            //初始化时分秒针
            second.style.transform = "rotate(" + (nowSecond * 6 - 90) + "deg)";
            minute.style.transform = "rotate(" + (nowMinute * 6 + 1 / 10 * nowSecond - 90) + "deg)";
            hour.style.transform = "rotate(" + (nowHour * 30 + 1 / 2 * nowMinute + 1 / 120 * nowSecond - 90) + "deg)";
        }

View Code

3.添加定时器：

js代码如下：

 //定时器
        function startMove() {
            clearInterval(timer);
            timer = setInterval(function () {
                var now = new Date();
                var nowSecond = now.getSeconds();
                var nowMinute = now.getMinutes();
                var nowHour = now.getHours();

                second.style.transform = "rotate(" + (nowSecond * 6 - 90) + "deg)";
                minute.style.transform = "rotate(" + (nowMinute * 6 + 1 / 10 * nowSecond - 90) + "deg)";
                hour.style.transform = "rotate(" + (nowHour * 30 + 1 / 2 * nowMinute + 1 / 120 * nowSecond - 90) + "deg)";
                timeLabel.innerHTML = nowHour + ":" + nowMinute + ":" + nowSecond;
            }, 1000);
        }

View Code

　　4.使用OOP方式更改：

修改后的js代码如下：

function Clock() {
            //定义属性
            this.main = this.$("biaopan");
            this.timeLabel = this.$("timeLabel");
            this.hour = this.$("hour");
            this.minute = this.$("minute");
            this.second = this.$("second");
            this.nowHour = null;
            this.nowMinute = null;
            this.nowSecond = null;
            this.timer = null;

            var _this = this;

            //初始化函数
            var init = function () {
                _this.getNowTime();
                _this.initClock();
                _this.InterVal();
            }
            init();
        }

        Clock.prototype.$ = function (id) {
            return document.getElementById(id)
        }

        Clock.prototype.CreateKeDu = function (className, deg, translateWidth) {
            var Pointer = document.createElement("div");
            Pointer.className = className
            Pointer.style.transform = "rotate(" + deg + "deg)   translate(" + translateWidth + "px)";
            this.main.appendChild(Pointer);
        }
        Clock.prototype.getNowTime = function () {
            var now = new Date();
            this.nowHour = now.getHours();
            this.nowMinute = now.getMinutes();
            this.nowSecond = now.getSeconds();
        }
        Clock.prototype.setPosition = function () {
            this.second.style.transform = "rotate(" + (this.nowSecond * 6 - 90) + "deg)";
            this.minute.style.transform = "rotate(" + (this.nowMinute * 6 + 1 / 10 * this.nowSecond - 90) + "deg)";
            this.hour.style.transform = "rotate(" + (this.nowHour * 30 + 1 / 2 * this.nowMinute + 1 / 120 * this.nowSecond - 90) + "deg)";
        }
        Clock.prototype.initClock = function () {
            //初始化timeLabel
            this.timeLabel.innerHTML = this.nowHour + ":" + this.nowMinute + ":" + this.nowSecond;

            //初始化表盘
            for (var index = 0; index < 4; index++) {
                this.CreateKeDu("hourPointer", index * 90, 138);
            }

            for (var index = 0; index < 12; index++) {
                this.CreateKeDu("minuterPointer", index * 30, 140);
            }
            for (var index = 0; index < 60; index++) {
                this.CreateKeDu("secondPointer", index * 6, 142);
            }

            this.setPosition();
        }
        Clock.prototype.InterVal = function () {
            clearInterval(this.timer);
            var _this = this;
            this.timer = setInterval(function () {
                _this.getNowTime();
                _this.second.style.transform = "rotate(" + (_this.nowSecond * 6 - 90) + "deg)";
                _this.minute.style.transform = "rotate(" + (_this.nowMinute * 6 + 1 / 10 * _this.nowSecond - 90) + "deg)";
                _this.hour.style.transform = "rotate(" + (_this.nowHour * 30 + 1 / 2 * _this.nowMinute + 1 / 120 * _this.nowSecond - 90) + "deg)";
                _this.timeLabel.innerHTML = _this.nowHour + ":" + _this.nowMinute + ":" + _this.nowSecond;
            }, 1000);
        }

View Code

最后调用如下：

window.onload = function () {
            new Clock();
        }

View Code

最终页面代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .main {
            position: relative;
            margin: 100px auto;
            width: 300px;
            height: 300px;
            border-radius: 300px;
            border: 1px solid #000;
            box-shadow: 2px 5px #808080;
        }

        #timeLabel {
            position: absolute;
            background-color: pink;
            width: 80px;
            height: 25px;
            left: 110px;
            top: 180px;
            color: #fff;
            line-height: 25px;
            text-align: center;
        }

        #hour {
            width: 100px;
            height: 10px;
            background-color: red;
            position: absolute;
            left: 150px;
            top: 145px;
            transform-origin: 0 50%;
        }

        #minute {
            width: 120px;
            height: 8px;
            background-color: blue;
            position: absolute;
            left: 150px;
            top: 146px;
            transform-origin: 0 50%;
        }

        #second {
            width: 140px;
            height: 4px;
            background-color: green;
            position: absolute;
            left: 150px;
            top: 148px;
            transform-origin: 0 50%;
        }

        .hourPointer, .minuterPointer, .secondPointer {
            position: absolute;
            transform-origin: 0 50%;
        }

        .hourPointer {
            height: 10px;
            width: 12px;
            left: 150px;
            top: 145px;
            background-color: #f00;
            z-index: 3;
        }

        .minuterPointer {
            height: 8px;
            width: 10px;
            left: 150px;
            top: 146px;
            background-color: #b6ff00;
            z-index: 2;
        }

        .secondPointer {
            height: 6px;
            width: 8px;
            left: 150px;
            top: 147px;
            background-color: #fa8;
            z-index: 1;
        }
    </style>
    <script>
        function Clock() {
            //定义属性
            this.main = this.$("biaopan");
            this.timeLabel = this.$("timeLabel");
            this.hour = this.$("hour");
            this.minute = this.$("minute");
            this.second = this.$("second");
            this.nowHour = null;
            this.nowMinute = null;
            this.nowSecond = null;
            this.timer = null;

            var _this = this;

            //初始化函数
            var init = function () {
                _this.getNowTime();
                _this.initClock();
                _this.InterVal();
            }
            init();
        }

        Clock.prototype.$ = function (id) {
            return document.getElementById(id)
        }

        Clock.prototype.CreateKeDu = function (className, deg, translateWidth) {
            var Pointer = document.createElement("div");
            Pointer.className = className
            Pointer.style.transform = "rotate(" + deg + "deg)   translate(" + translateWidth + "px)";
            this.main.appendChild(Pointer);
        }
        Clock.prototype.getNowTime = function () {
            var now = new Date();
            this.nowHour = now.getHours();
            this.nowMinute = now.getMinutes();
            this.nowSecond = now.getSeconds();
        }
        Clock.prototype.setPosition = function () {
            this.second.style.transform = "rotate(" + (this.nowSecond * 6 - 90) + "deg)";
            this.minute.style.transform = "rotate(" + (this.nowMinute * 6 + 1 / 10 * this.nowSecond - 90) + "deg)";
            this.hour.style.transform = "rotate(" + (this.nowHour * 30 + 1 / 2 * this.nowMinute + 1 / 120 * this.nowSecond - 90) + "deg)";
        }
        Clock.prototype.initClock = function () {
            //初始化timeLabel
            this.timeLabel.innerHTML = this.nowHour + ":" + this.nowMinute + ":" + this.nowSecond;

            //初始化表盘
            for (var index = 0; index < 4; index++) {
                this.CreateKeDu("hourPointer", index * 90, 138);
            }

            for (var index = 0; index < 12; index++) {
                this.CreateKeDu("minuterPointer", index * 30, 140);
            }
            for (var index = 0; index < 60; index++) {
                this.CreateKeDu("secondPointer", index * 6, 142);
            }

            this.setPosition();
        }
        Clock.prototype.InterVal = function () {
            clearInterval(this.timer);
            var _this = this;
            this.timer = setInterval(function () {
                _this.getNowTime();
                _this.second.style.transform = "rotate(" + (_this.nowSecond * 6 - 90) + "deg)";
                _this.minute.style.transform = "rotate(" + (_this.nowMinute * 6 + 1 / 10 * _this.nowSecond - 90) + "deg)";
                _this.hour.style.transform = "rotate(" + (_this.nowHour * 30 + 1 / 2 * _this.nowMinute + 1 / 120 * _this.nowSecond - 90) + "deg)";
                _this.timeLabel.innerHTML = _this.nowHour + ":" + _this.nowMinute + ":" + _this.nowSecond;
            }, 1000);
        }

        window.onload = function () {
            new Clock();
        }
    </script>
</head>
<body>
    <div class="main" id="biaopan">
        <div id="timeLabel"></div>
        <div id="hour"></div>
        <div id="minute"></div>
        <div id="second"></div>
    </div>
</body>
</html>

View Code

总结：本例中使用了css3 的transform属性中的 rotate的旋转效果和translate的位移效果，关于transform的使用请参考 http://www.w3school.com.cn/cssref/pr_transform.asp

相关阅读:
如何对一台服务器进行免密操作
 MySQL 中的自增主键
 mysql 添加多版本数据库
 Group by 优化
 join 查询优化
 CCF2020-09-Python题解
 CCF2019-09-Python题解
 CCF2019-12-Python题解
 CCF202006-Python题解
 差分约束
原文地址：https://www.cnblogs.com/CharlieLau/p/4341438.html