SHARE
TWEET

Clock.hta

a guest Apr 26th, 2019 80 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.    
  6.         <meta http-equiv="X-UA-Compatible" content="IE=9">
  7.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8.         <title>Clock by Stryk</title>
  9.  
  10.         <script>
  11.        
  12.             // PURE JS - NO LIBRARY REQUIRED
  13.            
  14.             window.resizeTo(680, 720);
  15.        
  16.             var clock = ( function(){
  17.  
  18.                 function createClock(size, top, left, police, colorpolice, colorborder, colorface, colorcenter, colorhour, colormin, colorsec){
  19.  
  20.                     var canvas = document.createElement('canvas');
  21.                     canvas.width = size;
  22.                     canvas.height = size;
  23.                     canvas.style.setProperty('position', 'absolute');
  24.                     canvas.style.setProperty('z-index', '9');
  25.                     canvas.style.setProperty('top', top+'px');
  26.                     canvas.style.setProperty('left', left+'px');
  27.                     document.body.appendChild(canvas);
  28.                     var clock = canvas.getContext("2d");
  29.                     var radius = canvas.height / 2;
  30.                     clock.translate(radius, radius);
  31.                     radius = radius * 0.90
  32.                     setInterval( function(){
  33.                    
  34.                         startClock(clock, radius, police, colorpolice, colorborder, colorface, colorcenter, colorhour, colormin, colorsec);
  35.                        
  36.                         }, 1000 ); // END SETINTERVAL
  37.                    
  38.                 } // END FUNCTION
  39.                  
  40.                 function startClock(clock, radius, police, colorpolice, colorborder, colorface, colorcenter, colorhour, colormin, colorsec){
  41.  
  42.                   drawFace(clock, radius, colorborder, colorface, colorcenter);
  43.                   drawNumbers(clock, radius, police, colorpolice);
  44.                   drawTime(clock, radius, colorhour, colormin, colorsec);
  45.                  
  46.                 } // END FUNCTION
  47.                  
  48.                 function drawFace(clock, radius, colorborder, colorface, colorcenter){
  49.  
  50.                     clock.beginPath();
  51.                     clock.arc(0, 0, radius, 0, 2*Math.PI);
  52.                     clock.fillStyle = colorface;
  53.                     clock.fill();
  54.  
  55.                     clock.lineWidth = radius*0.03;
  56.                     clock.strokeStyle = colorborder;
  57.                     clock.stroke();
  58.                     clock.beginPath();
  59.                     clock.arc(0, 0, radius*0.1, 0, 2*Math.PI);
  60.                     clock.fillStyle = colorcenter;
  61.                     clock.fill();
  62.                    
  63.                 } // END FUNCTION
  64.                  
  65.                 function drawNumbers(clock, radius, police, colorpolice){
  66.  
  67.                     var angle;
  68.                     var number;
  69.                     clock.font = radius*0.15 + "px " + police;
  70.                     clock.textBaseline="middle";
  71.                     clock.textAlign="center";
  72.                    
  73.                     for(number = 1; number < 13; number++){
  74.                    
  75.                         angle = number * Math.PI / 6;
  76.                         clock.rotate(angle);
  77.                         clock.translate(0, -radius*0.85);
  78.                         clock.rotate(-angle);
  79.                         clock.fillStyle = colorpolice;
  80.                         clock.fillText(number.toString(), 0, 0);
  81.                         clock.rotate(angle);
  82.                         clock.translate(0, radius*0.85);
  83.                         clock.rotate(-angle);
  84.                    
  85.                     } // END FOR
  86.                    
  87.                 } // END FUNCTION
  88.                  
  89.                 function drawTime(clock, radius, colorhour, colormin, colorsec){
  90.  
  91.                     var currentTime = new Date();
  92.                     var hour = currentTime.getHours();
  93.                     var minute = currentTime.getMinutes();
  94.                     var second = currentTime.getSeconds();
  95.                  
  96.                     hour = hour%12;
  97.                     hour = (hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60));
  98.                     drawHand(clock, hour, radius*0.5, radius*0.07, colorhour);
  99.                  
  100.                     minute = (minute*Math.PI/30)+(second*Math.PI/(30*60));
  101.                     drawHand(clock, minute, radius*0.8, radius*0.07, colormin);
  102.                  
  103.                     second = (second*Math.PI/30);
  104.                     drawHand(clock, second, radius*0.9, radius*0.02, colorsec);
  105.                    
  106.                 } // END FUNCTION
  107.  
  108.                 function drawHand(clock, position, length, width, color){
  109.  
  110.                     clock.beginPath();
  111.                     clock.lineWidth = width;
  112.                     clock.lineCap = "round";
  113.                     clock.moveTo(0,0);
  114.                     clock.rotate(position);
  115.                     clock.lineTo(0, -length);
  116.                     clock.strokeStyle = color;
  117.                     clock.stroke();
  118.                     clock.rotate(-position);
  119.                    
  120.                 } // END FUNCTION
  121.                
  122.                     return { create : createClock };
  123.  
  124.             })(); // END SCOPE
  125.        
  126.         </script>
  127.        
  128.         <HTA:APPLICATION
  129.             SINGLEINSTANCE = "Yes"
  130.             MAXIMIZEBUTTON = "No"
  131.             MINIMIZEBUTTON = "No"
  132.             SHOWINTASKBAR = "Yes"
  133.             ICON = "resmon.exe"
  134.             BORDER = "Thin"
  135.             BORDERSTYLE = "Complex"
  136.             SCROLL="No"
  137.         >
  138.    
  139.     </head>
  140.  
  141.     <body style="margin: 0px; padding: 0px;">
  142.    
  143.         <img src="http://img110.xooimage.com/files/9/4/c/fos1-55fce51.jpg"></img>
  144.        
  145.     </body>
  146.  
  147.     <script>
  148.    
  149.         clock.create(318, 180, 170, 'lucida', '#E1BA9D', '#13182E', '#132357', '#13182E', '#E1BA9D', '#E1BA9D', 'orange');
  150.    
  151.     </script>
  152.  
  153. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top