Hướng dẫn cách tạo đồng hồ (clock) với javasrcipt cho Blog

Xin chào các bạn, đã đến với blog của mình hôm nay ở bài viết này mình xin chia sẻ code đồng hồ thời gian.

CÁCH LÀM

Bước 1: Truy cập Blog ==> Thêm code bên dưới vào trước </body>

<script type='text/javascript'>
//<![CDATA[
var _0x86c1=["\x63\x61\x6E\x76\x61\x73","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x32\x64","\x67\x65\x74\x43\x6F\x6E\x74\x65\x78\x74","\x68\x65\x69\x67\x68\x74","\x74\x72\x61\x6E\x73\x6C\x61\x74\x65","\x62\x65\x67\x69\x6E\x50\x61\x74\x68","\x50\x49","\x61\x72\x63","\x66\x69\x6C\x6C\x53\x74\x79\x6C\x65","\x77\x68\x69\x74\x65","\x66\x69\x6C\x6C","\x63\x72\x65\x61\x74\x65\x52\x61\x64\x69\x61\x6C\x47\x72\x61\x64\x69\x65\x6E\x74","\x23\x33\x33\x33","\x61\x64\x64\x43\x6F\x6C\x6F\x72\x53\x74\x6F\x70","\x73\x74\x72\x6F\x6B\x65\x53\x74\x79\x6C\x65","\x6C\x69\x6E\x65\x57\x69\x64\x74\x68","\x73\x74\x72\x6F\x6B\x65","\x66\x6F\x6E\x74","\x70\x78\x20\x61\x72\x69\x61\x6C","\x74\x65\x78\x74\x42\x61\x73\x65\x6C\x69\x6E\x65","\x6D\x69\x64\x64\x6C\x65","\x74\x65\x78\x74\x41\x6C\x69\x67\x6E","\x63\x65\x6E\x74\x65\x72","\x72\x6F\x74\x61\x74\x65","\x66\x69\x6C\x6C\x54\x65\x78\x74","\x67\x65\x74\x48\x6F\x75\x72\x73","\x67\x65\x74\x4D\x69\x6E\x75\x74\x65\x73","\x67\x65\x74\x53\x65\x63\x6F\x6E\x64\x73","\x6C\x69\x6E\x65\x43\x61\x70","\x72\x6F\x75\x6E\x64","\x6D\x6F\x76\x65\x54\x6F","\x6C\x69\x6E\x65\x54\x6F"];var canvas=document[_0x86c1[1]](_0x86c1[0]);var ctx=canvas[_0x86c1[3]](_0x86c1[2]);var radius=canvas[_0x86c1[4]]/ 2;ctx[_0x86c1[5]](radius,radius);radius= radius* 0.90;setInterval(drawClock,1000);function drawClock(){drawFace(ctx,radius);drawNumbers(ctx,radius);drawTime(ctx,radius)}function drawFace(ctx,radius){var _0xaedcx6;ctx[_0x86c1[6]]();ctx[_0x86c1[8]](0,0,radius,0,2* Math[_0x86c1[7]]);ctx[_0x86c1[9]]= _0x86c1[10];ctx[_0x86c1[11]]();_0xaedcx6= ctx[_0x86c1[12]](0,0,radius* 0.95,0,0,radius* 1.05);_0xaedcx6[_0x86c1[14]](0,_0x86c1[13]);_0xaedcx6[_0x86c1[14]](0.5,_0x86c1[10]);_0xaedcx6[_0x86c1[14]](1,_0x86c1[13]);ctx[_0x86c1[15]]= _0xaedcx6;ctx[_0x86c1[16]]= radius* 0.1;ctx[_0x86c1[17]]();ctx[_0x86c1[6]]();ctx[_0x86c1[8]](0,0,radius* 0.1,0,2* Math[_0x86c1[7]]);ctx[_0x86c1[9]]= _0x86c1[13];ctx[_0x86c1[11]]()}function drawNumbers(ctx,radius){var _0xaedcx8;var _0xaedcx9;ctx[_0x86c1[18]]= radius* 0.15+ _0x86c1[19];ctx[_0x86c1[20]]= _0x86c1[21];ctx[_0x86c1[22]]= _0x86c1[23];for(_0xaedcx9= 1;_0xaedcx9< 13;_0xaedcx9++){_0xaedcx8= _0xaedcx9* Math[_0x86c1[7]]/ 6;ctx[_0x86c1[24]](_0xaedcx8);ctx[_0x86c1[5]](0,-radius* 0.85);ctx[_0x86c1[24]](-_0xaedcx8);ctx[_0x86c1[25]](_0xaedcx9.toString(),0,0);ctx[_0x86c1[24]](_0xaedcx8);ctx[_0x86c1[5]](0,radius* 0.85);ctx[_0x86c1[24]](-_0xaedcx8)}}function drawTime(ctx,radius){var _0xaedcxb= new Date();var _0xaedcxc=_0xaedcxb[_0x86c1[26]]();var _0xaedcxd=_0xaedcxb[_0x86c1[27]]();var _0xaedcxe=_0xaedcxb[_0x86c1[28]]();_0xaedcxc= _0xaedcxc% 12;_0xaedcxc= (_0xaedcxc* Math[_0x86c1[7]]/ 6)+ (_0xaedcxd* Math[_0x86c1[7]]/ (6* 60))+ (_0xaedcxe* Math[_0x86c1[7]]/ (360* 60));drawHand(ctx,_0xaedcxc,radius* 0.5,radius* 0.07);_0xaedcxd= (_0xaedcxd* Math[_0x86c1[7]]/ 30)+ (_0xaedcxe* Math[_0x86c1[7]]/ (30* 60));drawHand(ctx,_0xaedcxd,radius* 0.8,radius* 0.07);_0xaedcxe= (_0xaedcxe* Math[_0x86c1[7]]/ 30);drawHand(ctx,_0xaedcxe,radius* 0.9,radius* 0.02)}function drawHand(ctx,_0xaedcx10,_0xaedcx11,_0xaedcx12){ctx[_0x86c1[6]]();ctx[_0x86c1[16]]= _0xaedcx12;ctx[_0x86c1[29]]= _0x86c1[30];ctx[_0x86c1[31]](0,0);ctx[_0x86c1[24]](_0xaedcx10);ctx[_0x86c1[32]](0,-_0xaedcx11);ctx[_0x86c1[17]]();ctx[_0x86c1[24]](-_0xaedcx10)}
//]]>
</script>

Bước 2: Thêm đoạn code bên dưới vào nơi bạn muốn hiển thị.

<canvas id='canvas'/>

N

5

Chia sẻ

• Nhận liên kết

Nguyễn Phú Cường

Cuộc sống đôi lúc không như chúng ta mong muốn nhưng đừng buồn, đừng suy nghĩ nhiều quá mà hãy tiếp tục đứng lên và chiến đấu tiếp vì tương lai của chính mình nhé!