canvas版简单时钟与css3版漂亮时钟
小练一下canvas版简单时钟与css3版漂亮时钟
无聊时候用canvas练了一下时钟，但感觉画面不是很舒服，可能canvas用的不是很精炼。
随后又用css3重写了下，还是蛮漂亮的，呵呵，先看效果图吧；
canvas版:
CSS3版：
在线浏览：http://runjs.cn/detail/a9lrocko
canvas版源代码:
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>canvas时钟</
title
>
<
style
>
body{background: -webkit-radial-gradient(center center,circle,#666,#000); margin: 0;}
div{margin: 0; padding: 0;}
.canvas_inner{ margin:0 auto; width:400px; padding-top: 100px;}
</
style
>
</
head
>
<
body
>
<
div
class
=
"canvas_inner"
>
<
canvas
id
=
"clock"
width
=
"400"
height
=
"400"
></
canvas
>
</
div
>
<
script
>
window.onload = function() {
var winHeight = document.documentElement.clientHeight;
document.getElementsByTagName('body')[0].style.height = winHeight+'px';
};
(function(doc){
var can = doc.getElementById('clock');
if(can.getContext){
var con=can.getContext("2d");
con.beginPath();
con.translate(200,200);
//绘制外圆
con.strokeStyle="#fff";
con.fillStyle = '#fff';
con.arc(0,0,199,0,Math.PI*2,false);
con.fill();
// 绘制内圆
con.beginPath();
con.fillStyle = '#ccc';
con.arc(0,0,195,0,Math.PI*2,false);
con.fill();
//绘制小时12
con.beginPath();
con.font = "bold 20px Arial";
con.textAlign="center";
con.textBaseline = "middle";
con.fillStyle = '#f00';
con.fillText("12",0,-170);
con.fillText("1",172,0);
con.fillText("3",172,0);
con.fillText("6",0,170);
con.fillText("9",-170,0);
// con.save();
var d=new Date(),time={};
time.H = d.getHours()%12;
time.M = d.getMinutes();
time.S = d.getSeconds();
function getTimeData(){
time.S++;
if(time.S>59){
time.S = 0;
time.M++;
if(time.M>59){
time.M = 0;
time.H++;
if(time.H>11){
time.H = 0;
}
}
}
canvasTimeLine();
}
function transNumberToDeg(num){
return ((num*6-90)*0.017453293);
}
function canvasLineMintus(){
//
var rec = 180
for(var i=0;i<
60
;i++){
con.beginPath();
if(i%5 == 0){
con.lineWidth
=
4
;
rec
=
180
;
}else{
con.lineWidth
=
1
;
rec
=
184
}
var
beginDeg
=
transNumberToDeg
(i),
beginPot
=
computePositionByLenAndDeg
(rec,beginDeg),
endPot
=
computePositionByLenAndDeg
(190,beginDeg);
con.moveTo(beginPot.x,beginPot.y);
con.lineTo(endPot.x,endPot.y);
con.stroke();
}
}
function computePositionByLenAndDeg(len,deg){
return {
x:len*Math.cos(deg),
y:len*Math.sin(deg)
}
}
function canvasTimeLine(){
var
sDeg
=
transNumberToDeg
(time.S),
mDeg
=
transNumberToDeg
(time.M),
hDeg
=
transNumberToDeg
(time.H*5+Math.floor(time.M/12)),
sPot
=
computePositionByLenAndDeg
(150,sDeg),
mPot
=
computePositionByLenAndDeg
(140,mDeg),
hPot
=
computePositionByLenAndDeg
(120,hDeg);
con.beginPath();
con.arc(0,0,156,0,Math.PI*2,false);
con.fillStyle
=
'#f4f4f4'
;
con.fill();
// 绘制针心
con.beginPath();
con.fillStyle
=
'#ddd'
;
con.arc(0,0,8,0,Math.PI*2,false);
con.fill();
// 绘制时针
con.beginPath();
con.moveTo(0,0);
con.lineTo(hPot.x,hPot.y);
con.lineWidth
=
6
;
con.strokeStyle
=
'#333'
;
con.stroke();
// 绘制分针
con.beginPath();
con.moveTo(0,0);
con.lineTo(mPot.x,mPot.y);
con.lineWidth
=
3
;
con.stroke();
// 绘制秒针
con.beginPath();
con.moveTo(0,0);
con.lineTo(sPot.x,sPot.y);
con.stroke();
// con.restore();
// con.save();
}
getTimeData();
setInterval(function(){
getTimeData();
},1000);
canvasLineMintus();
}
})(document);
</script></
body
>
</
html
>
|
CSS3版源代码:
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>css3+js打造漂亮时钟</
title
>
<
style
>
body{background: -webkit-radial-gradient(center center,circle,#666,#000); margin: 0;}
div{margin: 0; padding: 0;}
.box{padding-top: 100px; width:410px; margin: 0 auto;}
.clock{position: relative; width:400px; height: 400px; border: 5px solid #fff; border-radius: 200px; background:-webkit-radial-gradient(center center,circle,#fff,#bbb); box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.8); }
.clock .clock-xin{position: absolute; top: 50%; left: 50%; width:30px; height: 30px; border-radius: 15px; background: #eee;margin:-15px 0 0 -15px;}
.clock .clock-xin2{position: absolute; top: 50%; left: 50%; width:12px; height: 12px; border-radius: 6px; background: #f00; z-index: 100; margin:-6px 0 0 -6px;}
.clock .date{position: absolute; z-index: 3; top: 245px; left: 130px; font-size: 20px; color: #000; text-shadow: 1px 1px white; }
.clock .hour{position: absolute; z-index: 3; top: 50%; left: 50%; width:160px; height: 6px; border-radius:5px; background: #000; -webkit-transform-origin: 10px 50%; margin:-3px 0 0 -10px;}
.clock .min{position: absolute; z-index: 4;top: 50%; left: 50%; width:180px; height: 4px; border-radius:5px; background: #333; -webkit-transform-origin: 10px 50%; margin:-2px 0 0 -10px;}
.clock .sec{position: absolute; z-index: 5; top: 50%; left: 50%; width:210px; height: 2px; background: #f00; -webkit-transform-origin: 30px 50%; margin:-1px 0 0 -30px;}
.clock em{display: block; width: 2px; height: 5px; background: #000; position: absolute; top: 0; left: 0; -webkit-transform-origin: 50% 0; margin-left: -1px;}
.clock em.ishour{width: 6px; height: 10px; margin-left: -3px;}
.clock em.ishour i{font-size: 25px; color: #000; position: absolute; top: 12px; left: -7px;text-shadow: 1px 1px white; }
</
style
>
</
head
>
<
body
>
<
div
class
=
"box"
>
<
div
class
=
"clock"
id
=
"clock"
>
<
div
class
=
"clock-xin"
></
div
>
<
div
class
=
"clock-xin2"
></
div
>
<
div
id
=
"date"
class
=
"date"
></
div
>
<
div
id
=
"hour"
class
=
"hour"
></
div
>
<
div
id
=
"min"
class
=
"min"
></
div
>
<
div
id
=
"sec"
class
=
"sec"
></
div
>
</
div
>
</
div
>
<
script
>
window.onload = function() {
var winHeight = document.documentElement.clientHeight;
document.getElementsByTagName('body')[0].style.height = winHeight+'px';
var $clock = document.getElementById('clock'),
$date = document.getElementById('date'),
$hour = document.getElementById('hour'),
$min = document.getElementById('min'),
$sec = document.getElementById('sec'),
oSecs = document.createElement('em');
for (var i = 1; i <
61
; i++) {
var
tempSecs
=
oSecs
.cloneNode(),
pos
=
getSecPos
(i);
if(i%5==0){
tempSecs.className
=
'ishour'
;
tempSecs.innerHTML
=
'<i style="-webkit-transform:rotate('
+(-i*6)+'deg);">'+(i/5)+'</
i
>';
}
tempSecs.style.cssText='left:'+pos.x+'px; top:'+pos.y+'px; -webkit-transform:rotate('+i*6+'deg);';
$clock.appendChild(tempSecs);
}
// 圆弧上的坐标换算
function getSecPos(dep) {
var hudu = (2*Math.PI/360)*6*dep,
r = 200; //半径大小
return {
x: Math.floor(r + Math.sin(hudu)*r),
y: Math.floor(r - Math.cos(hudu)*r),
}
}
;(function() {
// 当前时间
var _now = new Date(),
_h = _now.getHours(),
_m = _now.getMinutes(),
_s = _now.getSeconds();
var _day = _now.getDay();
_day = (_day==0)?7:_day;
$date.innerHTML = _now.getFullYear()+'-'+(_now.getMonth()+1)+'-'+_now.getDate()+' 星期'+_day;
//绘制时钟
var gotime = function(){
var _h_dep = 0;
_s++;
if(_s>59){
_s=0;
_m++;
}
if(_m>59){
_m=0;
_h++;
}
if(_h>12){
_h = _h-12;
}
//时针偏移距离
_h_dep = Math.floor(_m/12)*6;
$hour.style.cssText = '-webkit-transform:rotate('+(_h*30-90+_h_dep)+'deg);';
$min.style.cssText = '-webkit-transform:rotate('+(_m*6-90)+'deg);';
$sec.style.cssText = '-webkit-transform:rotate('+(_s*6-90)+'deg);';
};
gotime();
setInterval(gotime, 1000);
})();
};
</
script
>
</
body
>
</
html
>
|
分类:
html5/css3,
javascript