CSS3-手把手 transform 小时钟

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

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

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             width: 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             width:100px;19             height:30px;20             left:100px;21             top:180px;22         }23 24         #hour {25             width: 100px;26             height: 10px;27             background-color: red;28             position:absolute;29             left:150px;30             top:145px;31         }32         #minute {33             width:120px;34             height:8px;35             background-color:blue;36             position:absolute;37             left:150px;38             top:146px;39         }40         #second {41             width: 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() {            //定