كود المثال html5 Canvas JS (الساعة الرقمية)

انسخ رمز الكود كما يلي:

<!نوع الوثيقة html>

<أتش تي أم أل>

<الرأس>

<title>قماش dClock</title>

</الرأس>

<الجسم>

<معرف القماش = "الساعة" العرض = "500 بكسل" الارتفاع = "200 بكسل">

متصفحك قديم جدًا، قم بترقيته!

</قماش>

<نوع البرنامج النصي = "نص/جافا سكريبت">

فار ساعة = document.getElementById("clock");

var cxt = Clock.getContext("2d");

// عرض الساعة الرقمية

وظيفة شوتايم (م، ن) {

cxt.clearRect(0, 0, 500, 500);

فار الآن = تاريخ جديد؛

فار ساعة = now.getHours();

var min = now.getMinutes();

var sec = now.getSeconds();

var msec = now.getMillithans();

ساعة = ساعة >= 10 ساعة : "0" + ساعة؛

دقيقة = دقيقة >= 10 ? دقيقة : "0" + دقيقة;

ثانية = ثانية >= 10 ثانية : "0" + ثانية؛

msec = (msec >= 10 && msec < 100) ? ("0" + msec) : (msec >= 0 && msec < 10) ?

bdigital(m, n,hour);

bdigital(m + 160, n, min);

bdigital(m + 320, n, sec);

//tdigital(m + 480, n, msec);

// عرض من ثلاثة أرقام

الدالة tdigital(x, y, num) {

فار ge = الأعداد % 10;

فار شي = (parseInt(num / 10)) % 10;

var bai = parseInt((parseInt(num / 10)) / 10) % 10;

رقمي (س، ص، باي)؛

رقمي (س + 70، ص، شي)؛

رقمي (x + 140، y، ge)؛

}

// عرض مكون من رقمين

وظيفة برقمية (س، ص، الأسطوانات) {

فار ge = الأعداد % 10;

فار شي = (parseInt(num / 10)) % 10;

رقمي (س، ص، شي)؛

رقمي (x + 70، y، ge)؛

}

//تلوين:

// بين الساعات والدقائق

cxt.lineWidth = 5;

cxt.strokeStyle = "#000";

cxt.fillStyle = "#000";

cxt.beginPath();

cxt.arc(m + 140, n + 80, 3, 0, 360, false);

cxt.fill();

cxt. ClosePath();

cxt.stroke();

cxt.lineWidth = 5;

cxt.strokeStyle = "#000";

cxt.fillStyle = "#000";

cxt.beginPath();

cxt.arc(m + 140, n + 100, 3, 0, 360, false);

cxt.fill();

cxt. ClosePath();

cxt.stroke();

// بين الدقائق والثواني

cxt.lineWidth = 5;

cxt.strokeStyle = "#000";

cxt.fillStyle = "#000";

cxt.beginPath();

cxt.arc(m + 300, n + 80, 3, 0, 360, false);

cxt.fill();

cxt. ClosePath();

cxt.stroke();

cxt.lineWidth = 5;

cxt.strokeStyle = "#000";

cxt.fillStyle = "#000";

cxt.beginPath();

cxt.arc(m + 300, n + 100, 3, 0, 360, false);

cxt.fill();

cxt. ClosePath();

cxt.stroke();

// واحد بين الثواني والميلي ثانية.

// cxt.lineWidth = 5;

// cxt.strokeStyle = "#000";

// cxt.fillStyle = "#000";

// cxt.beginPath();

// cxt.arc(m + 460, n + 100, 3, 0, 360, false);

// cxt.fill();

// cxt. ClosePath();

// cxt.stroke();

}

// عرض رقم واحد

وظيفة رقمية (س، ص، الأسطوانات) {

//تعيين النمط

cxt.lineWidth = 5;

cxt.strokeStyle = "#000";

//أ

وظيفة أ () {

cxt.beginPath();

cxt.moveTo(x, y);

cxt.lineTo(x + 50, y);

cxt. ClosePath();

cxt.stroke();

}

//ب

الدالة ب () {

cxt.beginPath();

cxt.moveTo(x + 55, y + 5);

cxt.lineTo(x + 55, y + 55);

cxt. ClosePath();

cxt.stroke();

}

//ج

وظيفة ج () {

cxt.beginPath();

cxt.moveTo(x + 55, y + 60);

cxt.lineTo(x + 55, y + 110);

cxt. ClosePath();

cxt.stroke();

}

//د

وظيفة د () {

cxt.beginPath();

cxt.moveTo(x + 50, y + 115);

cxt.lineTo(x, y + 115);

cxt. ClosePath();

cxt.stroke();

}

//ه

الدالة ه () {

cxt.beginPath();

cxt.moveTo(x - 5, y + 110);

cxt.lineTo(x - 5, y + 60);

cxt. ClosePath();

cxt.stroke();

}

//و

الدالة و() {

cxt.beginPath();

cxt.moveTo(x - 5, y + 55);

cxt.lineTo(x - 5, y + 5);

cxt. ClosePath();

cxt.stroke();

}

//ز

الدالة ز () {

cxt.beginPath();

cxt.moveTo(x, y + 57.5);

cxt.lineTo(x + 50, y + 57.5);

cxt. ClosePath();

cxt.stroke();

}

//0

الدالة صفر () {

أ(); ب(); د();

}

//1

الوظيفة الأولى () {

ب(); ج();

}

//2

الوظيفة الثانية () {

أ(); ب(); د();

}

//3

الوظيفة الثالثة () {

أ(); ب(); د();

}

//4

الوظيفة الرابعة () {

ب()؛ ج()؛ ز()؛

}

//5

الوظيفة الخامسة () {

أ(); د();

}

//6

الوظيفة السادسة () {

أ(); د();

}

//7

الوظيفة السابعة () {

أ(); ب();

}

//8

الوظيفة الثامنة () {

أ(); ب(); د();

}

//9

الوظيفة التاسعة () {

أ(); ب(); د();

}

//الرقم ن

رقم الوظيفة (ن) {

التبديل (ن) {

الحالة 0: صفر ()؛

الحالة 1: واحد ()؛ استراحة؛

الحالة 2: اثنان ()؛

الحالة 3: ثلاثة ()؛ استراحة؛

الحالة 4: أربعة ()؛ استراحة؛

الحالة 5: خمسة ()؛ استراحة؛

الحالة 6: ستة ()؛ استراحة؛

الحالة 7: سبعة ()؛ استراحة؛

الحالة 8: ثمانية ()؛ استراحة؛

الحالة 9: تسعة ()؛ استراحة؛

}

}

رقم (رقم)؛

}

showTime(1, 45);

setInterval("showTime(1,45)", 1000);

</script>

</الجسم>

</html>