学习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 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.$("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>
登入後複製
总结：本例中使用了css3 的transform属性中的 rotate的旋转效果和translate的位移效果，关于transform的使用 请参考 http://www.w3school.com.cn/cssref/pr_transform.asp
