学习css3ing，正在学习transfomr，突发奇想用此做个小时钟，开始吧：
准备前期工作，把时钟的表盘，时分秒针，实时时间标签 的大概样子做好，效果如图：
html代码如下：

css 代码如下：
1
2. 初始化默认时间，和表盘刻度 ，效果如下：
更改后的css代码：

初始化 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(); }
最终页面代码：

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