css3-手把手 transform 小时钟_html/css_WEB-ITnose

学习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>

初始化 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)";        }

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);        }

　　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);        }

　　

最后调用如下：

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

最终页面代码：

                <script>        function Clock() {            //定义属性            this.main = this.$(&quot;biaopan&quot;);            this.timeLabel = this.$(&quot;timeLabel&quot;);            this.hour = this.$(&quot;hour&quot;);            this.minute = this.$(&quot;minute&quot;);            this.second = this.$(&quot;second&quot;);            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(&quot;div&quot;);            Pointer.className = className            Pointer.style.transform = &quot;rotate(&quot; + deg + &quot;deg)   translate(&quot; + translateWidth + &quot;px)&quot;;            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 = &quot;rotate(&quot; + (this.nowSecond * 6 - 90) + &quot;deg)&quot;;            this.minute.style.transform = &quot;rotate(&quot; + (this.nowMinute * 6 + 1 / 10 * this.nowSecond - 90) + &quot;deg)&quot;;            this.hour.style.transform = &quot;rotate(&quot; + (this.nowHour * 30 + 1 / 2 * this.nowMinute + 1 / 120 * this.nowSecond - 90) + &quot;deg)&quot;;        }        Clock.prototype.initClock = function () {            //初始化timeLabel            this.timeLabel.innerHTML = this.nowHour + &quot;:&quot; + this.nowMinute + &quot;:&quot; + this.nowSecond;            //初始化表盘            for (var index = 0; index &lt; 4; index++) {                this.CreateKeDu(&quot;hourPointer&quot;, index * 90, 138);            }            for (var index = 0; index &lt; 12; index++) {                this.CreateKeDu(&quot;minuterPointer&quot;, index * 30, 140);            }            for (var index = 0; index &lt; 60; index++) {                this.CreateKeDu(&quot;secondPointer&quot;, 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 = &quot;rotate(&quot; + (_this.nowSecond * 6 - 90) + &quot;deg)&quot;;                _this.minute.style.transform = &quot;rotate(&quot; + (_this.nowMinute * 6 + 1 / 10 * _this.nowSecond - 90) + &quot;deg)&quot;;                _this.hour.style.transform = &quot;rotate(&quot; + (_this.nowHour * 30 + 1 / 2 * _this.nowMinute + 1 / 120 * _this.nowSecond - 90) + &quot;deg)&quot;;                _this.timeLabel.innerHTML = _this.nowHour + &quot;:&quot; + _this.nowMinute + &quot;:&quot; + _this.nowSecond;            }, 1000);        }        window.onload = function () {            new Clock();        }    </script>    
        
        
        
        
    

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