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'/>

Bài đăng Mới hơn Bài đăng Cũ hơn