คัดลอกรหัสรหัสดังต่อไปนี้:
<!doctype html>
<html>
<หัว>
<title>ผ้าใบ dClock</title>
</หัว>
<ร่างกาย>
<canvas id = "นาฬิกา" width = "500px" height = "200px">
เบราว์เซอร์ของคุณเก่าเกินไป อัปเกรดเลย!
</ผืนผ้าใบ>
<ประเภทสคริปต์ = "ข้อความ/จาวาสคริปต์">
นาฬิกา var = document.getElementById("นาฬิกา");
var cxt = clock.getContext("2d");
//แสดงนาฬิกาดิจิตอล
ฟังก์ชั่น showTime (m, n) {
cxt.clearRect(0, 0, 500, 500);
var now = วันที่ใหม่;
var hour = now.getHours();
var min = now.getMinutes();
var วินาที = now.getSeconds();
var msec = now.getMilliseconds();
ชั่วโมง = ชั่วโมง >= 10 ? ชั่วโมง : "0" + ชั่วโมง;
นาที = นาที >= 10 ? นาที : "0" + นาที;
วินาที = วินาที >= 10 ? วินาที : "0" + วินาที;
msec = (มิลลิวินาที >= 10 && มิลลิวินาที < 100) ? ("0" + มิลลิวินาที) : (มิลลิวินาที >= 0 && มิลลิวินาที < 10) ? ("00" + มิลลิวินาที) : มิลลิวินาที;
bdigital(m, n, ชั่วโมง);
bdigital(m + 160, n, นาที);
bdigital(m + 320, n, วินาที);
//tdigital(m + 480, n, มิลลิวินาที);
//จอแสดงผลสามหลัก
ฟังก์ชั่น tdigital(x, y, num) {
var ge = จำนวน % 10;
var shi = (parseInt(หมายเลข / 10)) % 10;
var bai = parseInt((parseInt(หมายเลข / 10)) / 10) % 10;
ดิจิตอล(x, y, ไป๋);
ดิจิตอล(x + 70, y, ชิ);
ดิจิตอล(x + 140, y, ge);
-
//จอแสดงผลสองหลัก
ฟังก์ชั่น bdigital(x, y, num) {
var ge = จำนวน % 10;
var shi = (parseInt(หมายเลข / 10)) % 10;
ดิจิตอล(x, y, ชิ);
ดิจิตอล(x + 70, y, ge);
-
//จิตรกรรม:
//ระหว่างชั่วโมงกับนาที
cxt.lineWidth = 5;
cxt. strokeStyle = "#000";
cxt.fillStyle = "#000";
cxt.beginPath();
cxt.arc(m + 140, n + 80, 3, 0, 360, เท็จ);
cxt.เติม();
cxt.closePath();
cxt.โรคหลอดเลือดสมอง();
cxt.lineWidth = 5;
cxt. strokeStyle = "#000";
cxt.fillStyle = "#000";
cxt.beginPath();
cxt.arc(m + 140, n + 100, 3, 0, 360, เท็จ);
cxt.เติม();
cxt.closePath();
cxt.โรคหลอดเลือดสมอง();
//ระหว่างนาทีและวินาที
cxt.lineWidth = 5;
cxt. strokeStyle = "#000";
cxt.fillStyle = "#000";
cxt.beginPath();
cxt.arc(m + 300, n + 80, 3, 0, 360, เท็จ);
cxt.เติม();
cxt.closePath();
cxt.โรคหลอดเลือดสมอง();
cxt.lineWidth = 5;
cxt. strokeStyle = "#000";
cxt.fillStyle = "#000";
cxt.beginPath();
cxt.arc(m + 300, n + 100, 3, 0, 360, เท็จ);
cxt.เติม();
cxt.closePath();
cxt.โรคหลอดเลือดสมอง();
// หนึ่งระหว่างวินาทีถึงมิลลิวินาที
// cxt.lineWidth = 5;
// cxt. strokeStyle = "#000";
// cxt.fillStyle = "#000";
// cxt.beginPath();
// cxt.arc(m + 460, n + 100, 3, 0, 360, เท็จ);
// cxt.fill();
// cxt.closePath();
// cxt.จังหวะ();
-
//แสดงหนึ่งหลัก
ฟังก์ชั่นดิจิตอล (x, y, num) {
//กำหนดสไตล์
cxt.lineWidth = 5;
cxt. strokeStyle = "#000";
//ก
ฟังก์ชัน ก() {
cxt.beginPath();
cxt.moveTo(x, y);
cxt.lineTo(x + 50, y);
cxt.closePath();
cxt.โรคหลอดเลือดสมอง();
-
//ข
ฟังก์ชัน ข() {
cxt.beginPath();
cxt.moveTo(x + 55, y + 5);
cxt.lineTo(x + 55, y + 55);
cxt.closePath();
cxt.โรคหลอดเลือดสมอง();
-
//ค
ฟังก์ชันค() {
cxt.beginPath();
cxt.moveTo(x + 55, y + 60);
cxt.lineTo(x + 55, y + 110);
cxt.closePath();
cxt.โรคหลอดเลือดสมอง();
-
//ง
ฟังก์ชั่น d() {
cxt.beginPath();
cxt.moveTo(x + 50, y + 115);
cxt.lineTo(x, y + 115);
cxt.closePath();
cxt.โรคหลอดเลือดสมอง();
-
//จ
ฟังก์ชัน อี() {
cxt.beginPath();
cxt.moveTo(x - 5, y + 110);
cxt.lineTo(x - 5, y + 60);
cxt.closePath();
cxt.โรคหลอดเลือดสมอง();
-
//ฉ
ฟังก์ชัน ฉ() {
cxt.beginPath();
cxt.moveTo(x - 5, y + 55);
cxt.lineTo(x - 5, y + 5);
cxt.closePath();
cxt.โรคหลอดเลือดสมอง();
-
//ก
ฟังก์ชั่น g() {
cxt.beginPath();
cxt.moveTo(x, y + 57.5);
cxt.lineTo(x + 50, y + 57.5);
cxt.closePath();
cxt.โรคหลอดเลือดสมอง();
-
//0
ฟังก์ชั่นศูนย์() {
ก(); b(); ค();
-
//1
ฟังก์ชันหนึ่ง() {
ข(); ค();
-
//2
ฟังก์ชันที่สอง() {
ก(); ข(); ง();
-
//3
ฟังก์ชันสาม() {
ก(); b(); ค();
-
//4
ฟังก์ชันสี่() {
ข(); ค(); ฉ();
-
//5
ฟังก์ชันห้า() {
ก(); ค(); ง();
-
//6
ฟังก์ชันหก() {
ก(); ค(); ง();
-
//7
ฟังก์ชันเจ็ด() {
ก(); ข(); ค();
-
//8
ฟังก์ชันแปด() {
ก(); b(); c(); d();
-
//9
ฟังก์ชันเก้า() {
ก(); b(); c(); d();
-
//หมายเลข n
หมายเลขฟังก์ชัน (n) {
สวิตช์ (n) {
กรณีที่ 0: ศูนย์ ();
กรณีที่ 1: หนึ่ง ();
กรณีที่ 2: สอง ();
กรณีที่ 3: สาม (); แตก;
กรณีที่ 4: สี่ ();
กรณีที่ 5: ห้า ();
กรณีที่ 6: หก ();
กรณีที่ 7: เจ็ด ();
กรณีที่ 8: แปด ();
กรณีที่ 9: เก้า ();
-
-
หมายเลข(หมายเลข);
-
เวลาแสดง (1, 45);
setInterval("showTime(1,45)", 1,000);
</สคริปต์>
</ร่างกาย>
</html>