Data hosted with ♥ by Pastebin.com - Download Raw - See Original
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>นาฬิกา</title>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.         <style>
  7.             div
  8.             {
  9.                 width: 600px;
  10.                 height: 300px;
  11.                 margin: 0 auto;                                            
  12.             }
  13.             h1
  14.             {
  15.                 font-family: fantasy;
  16.                 font-size: 20px;
  17.                 text-align: center;
  18.             }
  19.             #clock
  20.             {
  21.                 display: block;
  22.                 width: 500px;
  23.                 height: 200px;
  24.                 margin: 0 auto;
  25.                 background: #E3F2E1;
  26.                 border: 2px solid #FA8072;
  27.             }
  28.         </style>
  29.     </head>
  30.     <body>
  31.         <div>
  32.             <h1>นาฬิกา</h1>
  33.             <canvas id="clock"></canvas>
  34.             <script>
  35.                 var context;
  36.                 var d;
  37.                 var str;
  38.                 function getClock()
  39.                 {
  40.                     d = new Date();
  41.                     str = prefixZero(d.getHours(), d.getMinutes(), d.getSeconds());
  42.                     //Get the Context 2D or 3D
  43.                     context = clock.getContext("2d");
  44.                     context.clearRect(0, 0, 500, 200);
  45.                     context.font = "60px Arial";
  46.                     context.fillStyle = "green";
  47.                     context.fillText(str, 35, 90);
  48.                 }
  49.                 function prefixZero(hour, min, sec)
  50.                 {
  51.                      var curTime;
  52.                      if(hour < 10)
  53.                         curTime = "0"+hour.toString();
  54.                      else
  55.                         curTime = hour.toString();
  56.                      if(min < 10)
  57.                         curTime += ":0"+min.toString();                          
  58.                      else
  59.                         curTime += ":"+min.toString();
  60.                      if(sec < 10)
  61.                         curTime += ":0"+sec.toString();                          
  62.                      else
  63.                         curTime += ":"+sec.toString();
  64.                     return curTime;
  65.                 }
  66.                 setInterval(getClock, 1000);
  67.             </script>
  68.         </div>
  69.     </body>
  70. </html>