CSS3+js实现简单的时钟特效

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

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

html代码如下：

复制代码

代码如下:

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

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;
}
#timelabel {
position: absolute;
background-color:pink;
width:100px;
height:30px;
left:100px;
top:180px;
}
#hour {
width: 100px;
height: 10px;
background-color: red;
position:absolute;
left:150px;
top:145px;
}
#minute {
width:120px;
height:8px;
background-color:blue;
position:absolute;
left:150px;
top:146px;
}
#second {
width: 140px;
height: 4px;
background-color: green;
position: absolute;
left: 150px;
top: 148px;
}
</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();
}

最终页面代码：

复制代码

代码如下:

<!doctype html>
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<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>

 总结：本例中使用了css3 的transform属性中的 rotate的旋转效果和translate的位移效果。

以上所述就是本文的全部内容了，希望本文能够对大家学习css3有所帮助。