'clock'에 해당되는 글 2건

  1. 2018.04.06 UML of Alarm clock
  2. 2016.10.25 Clock
Coding/Java 삽질기2018. 4. 6. 00:21

UML of Alarm clock


저작자표시

'Coding > Java 삽질기' 카테고리의 다른 글

Java Tetris (자바 테트리스 만들기 1)  (7) 2018.04.28
Android 화면 녹화 방법  (0) 2018.01.04
안드로이드 테트리스 만들기 ( Android Tetris 만들기 )  (33) 2018.01.03
Posted by chobocho
Coding/JavsScript 삽질기2016. 10. 25. 23:23

Clock



<html>

    <head>

        <title> My Clock </title>

        <script language="JavaScript">

          // 2016.10.10


          var cvs;

          var clockWidth = 200;

          

          function init() {

              var canvas = document.getElementById("canvas")

              cvs = canvas.getContext("2d");

              drawPanel();

              tick();

              setInterval(tick, 1000);

          }


          function drawPanel() {

              // Draw panel

              cvs.strokeStyle = "black";

              var width = clockWidth/2;

 

              for (var i = 0; i < 12; i++) {          

                  cvs.beginPath();

                  var r = Math.PI / 6 * i;

                  var size = 0.9;

                  cvs.moveTo(width + width * size * Math.sin(r), width + width * size * Math.cos(r));

                  cvs.lineTo(width + width * Math.sin(r), width + width * Math.cos(r));

                  cvs.closePath();

                  cvs.stroke();

              }

          }

          

          function drawClock() {

              var width = clockWidth/2;

              cvs.strokeStyle = "black";

              

              var currentTime = new Date();

              var h = currentTime.getHours() % 12;

              var m = currentTime.getMinutes();

              var s = currentTime.getSeconds();

 

              if ( s === 0 ) {

                  cvs.fillStyle = "white";

                  cvs.fillRect(0, 0, clockWidth, clockWidth);

                  drawPanel();

              }

 

              cvs.beginPath();

              var rh = Math.PI / 6 * h + Math.PI / 6 * ( m / 60 );

              var sizeh = 0.6;

              cvs.moveTo(width, width);

              cvs.lineTo(width + width * sizeh * Math.sin(rh), width - width * sizeh * Math.cos(rh));

              cvs.closePath();

              cvs.stroke();    


              cvs.beginPath();

              var rm = Math.PI / 30 *  m;

              var sizeM = 0.7;

              cvs.moveTo(width, width);

              cvs.lineTo(width + width * sizeM * Math.sin(rm), width - width * sizeM * Math.cos(rm));

              cvs.closePath();

              cvs.stroke();                 

             

              cvs.beginPath();

              var rs = Math.PI / 30 *  s;

              var sizeS = 0.9;

              var sizeS2 = 0.95;

              cvs.strokeStyle = "red";

              cvs.moveTo(width + width * sizeS * Math.sin(rs), width - width * sizeS * Math.cos(rs));

              cvs.lineTo(width + width * sizeS2 * Math.sin(rs), width - width * sizeS2 * Math.cos(rs));

              cvs.closePath();

              cvs.stroke();    

              

              document.getElementById("time").textContent = ((h < 10)  ? "0":"") + h + ":" + ((m < 10)  ? "0":"") + m + ":" + ((s < 10)  ? "0":"") + s;               

          }

                  

          function tick() {

              drawClock();

          }

        

        </script>

    </head>

    

    <body onload="init()">

         <table border="0" align="center">

             <tr>

                 <td>

                     <canvas id="canvas" width="200" height="200"> </canvas>

                 </td>

             </tr>

             <tr>

                 <td align="center">

                     <span id="time"></span>

                 </td>

             </tr>

         </table>

    </body>

</html>

저작자표시

'Coding > JavsScript 삽질기' 카테고리의 다른 글

Simple calculator  (0) 2016.10.28
Puzzle  (0) 2016.10.25
Timer  (0) 2016.09.29
Posted by chobocho

티스토리툴바