- 技术
- 制作一个12小时时钟
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<meta name
="viewport" content
="width=device-width, initial-scale=1.0">
<title
>Document
</title
>
<style
>
* {
margin
: 0;
padding
: 0;
}
#c1
{
background
: #
FFF;
}
#wrap
{
width
: 400px
;
height
: 210px
;
background
: #
999;
text
-align
: center
;
}
.text
{
width
: 400px
;
height
: 70px
;
font
-size
: 40px
;
}
</style
>
<script
>
function timeCount() {
var aText
= document
.getElementsByClassName('text');
var oDate
= new Date();
var oYear
= oDate
.getFullYear();
var oMonth
= checkNum(oDate
.getMonth() + 1);
var oDay
= checkNum(oDate
.getDate());
aText
[0].innerHTML
= oYear
+ "年" + oMonth
+ "月" + oDay
+ "日";
var oWeek
= oDate
.getDay();
var weekday
= ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
aText
[1].innerHTML
= weekday
[oWeek
];
var oHour
= checkNum(oDate
.getHours());
var oMin
= checkNum(oDate
.getMinutes());
var oSec
= checkNum(oDate
.getSeconds());
var noon
;
if (oHour
> 12) {
noon
= 'PM';
oHour
= oHour
- 12;
} else {
noon
= 'AM';
}
aText
[2].innerHTML
= oHour
+ ":" + oMin
+ ":" + oSec
+ " " + noon
;
setTimeout(timeCount
, 1000);
}
function checkNum(num
) {
if (num
< 10) {
num
= '0' + num
;
}
return num
;
}
function toDraw() {
var oC
= document
.getElementById('c1');
var oGC
= oC
.getContext('2d');
oGC
.clearRect(0, 0, oC
.width
, oC
.height
);
var x
= 200;
var y
= 200;
var r
= 150;
var oDate
= new Date();
var oHour
= oDate
.getHours();
var oMin
= oDate
.getMinutes();
var oSec
= oDate
.getSeconds();
var oHourValue
= (-90 + oHour
* 30 + (oMin
* 6 + oSec
/ 10) / 12) * Math
.PI / 180;
var oMinValue
= (-90 + oMin
* 6 + oSec
/ 10) * Math
.PI / 180;
var oSecValue
= (-90 + oSec
* 6) * Math
.PI / 180;
oGC
.beginPath();
for (var i
= 0; i
< 60; i
++) {
oGC
.moveTo(x
, y
);
oGC
.arc(x
, y
, r
, 6 * i
* Math
.PI / 180, 6 * (i
+ 1) * Math
.PI / 180, 0)
}
oGC
.closePath();
oGC
.stroke();
oGC
.fillStyle
= 'white';
oGC
.beginPath();
oGC
.moveTo(x
, y
);
oGC
.arc(x
, y
, r
* 19 / 20, 0, 360 * (i
+ 1) * Math
.PI / 180, 0)
oGC
.closePath();
oGC
.fill();
oGC
.lineWidth
= '3';
oGC
.beginPath();
for (var i
= 0; i
< 12; i
++) {
oGC
.moveTo(x
, y
);
oGC
.arc(x
, y
, r
, 30 * i
* Math
.PI / 180, 30 * (i
+ 1) * Math
.PI / 180, 0)
}
oGC
.closePath();
oGC
.stroke();
oGC
.fillStyle
= 'white';
oGC
.beginPath();
oGC
.moveTo(x
, y
);
oGC
.arc(x
, y
, r
* 18 / 20, 0, 360 * (i
+ 1) * Math
.PI / 180, 0)
oGC
.closePath();
oGC
.fill();
oGC
.lineWidth
= '5';
oGC
.beginPath();
oGC
.moveTo(x
, y
);
oGC
.arc(x
, y
, r
* 14 / 20, oHourValue
, oHourValue
, 0)
oGC
.closePath();
oGC
.stroke();
oGC
.lineWidth
= '3';
oGC
.beginPath();
oGC
.moveTo(x
, y
);
oGC
.arc(x
, y
, r
* 16 / 20, oMinValue
, oMinValue
, 0)
oGC
.closePath();
oGC
.stroke();
oGC
.lineWidth
= '1';
oGC
.beginPath();
oGC
.moveTo(x
, y
);
oGC
.arc(x
, y
, r
* 19 / 20, oSecValue
, oSecValue
, 0)
oGC
.closePath();
oGC
.stroke();
setTimeout(toDraw
, 1000);
}
window
.onload = function () {
timeCount();
toDraw();
}
</script
>
</head
>
<body
>
<div id
="wrap">
<p
class="text"></p
>
<p
class="text"></p
>
<p
class="text"></p
>
</div
>
<canvas id
="c1" width
="400" height
="400"></canvas
>
</body
>
</html
>
Processed:
0.014, SQL:
9
