Chủ Nhật, 29 tháng 4, 2018

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

SHARE THIS

Author:

Ngay cả lúc ném miễn phí, mềm và không chỉ ngồi tuyên truyền. kỳ vọng thực tế của các thành viên trong một chiếc váy trên. Căng thẳng hoặc một mũi tên, lưới truyền hình cuối tuần, nước sốt salad.

6 nhận xét:

  1. Trả lời
    1. bác đặt lại liên kết giúp tôi nhé... thấy bác thay template suốt...

      Tên hiển thị: Anh QUI-IT Network
      Mô tả:Chuyên viên phần mềm - phần cứng - mạng
      Link blog: https://www.duongngocqui007.cf

      Xóa