Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="X-UA-Compatible" content="IE=9">
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>Clock by Stryk</title>
- <script>
- // PURE JS - NO LIBRARY REQUIRED
- window.resizeTo(680, 720);
- var clock = ( function(){
- function createClock(size, top, left, police, colorpolice, colorborder, colorface, colorcenter, colorhour, colormin, colorsec){
- var canvas = document.createElement('canvas');
- canvas.width = size;
- canvas.height = size;
- canvas.style.setProperty('position', 'absolute');
- canvas.style.setProperty('z-index', '9');
- canvas.style.setProperty('top', top+'px');
- canvas.style.setProperty('left', left+'px');
- document.body.appendChild(canvas);
- var clock = canvas.getContext("2d");
- var radius = canvas.height / 2;
- clock.translate(radius, radius);
- radius = radius * 0.90
- setInterval( function(){
- startClock(clock, radius, police, colorpolice, colorborder, colorface, colorcenter, colorhour, colormin, colorsec);
- }, 1000 ); // END SETINTERVAL
- } // END FUNCTION
- function startClock(clock, radius, police, colorpolice, colorborder, colorface, colorcenter, colorhour, colormin, colorsec){
- drawFace(clock, radius, colorborder, colorface, colorcenter);
- drawNumbers(clock, radius, police, colorpolice);
- drawTime(clock, radius, colorhour, colormin, colorsec);
- } // END FUNCTION
- function drawFace(clock, radius, colorborder, colorface, colorcenter){
- clock.beginPath();
- clock.arc(0, 0, radius, 0, 2*Math.PI);
- clock.fillStyle = colorface;
- clock.fill();
- clock.lineWidth = radius*0.03;
- clock.strokeStyle = colorborder;
- clock.stroke();
- clock.beginPath();
- clock.arc(0, 0, radius*0.1, 0, 2*Math.PI);
- clock.fillStyle = colorcenter;
- clock.fill();
- } // END FUNCTION
- function drawNumbers(clock, radius, police, colorpolice){
- var angle;
- var number;
- clock.font = radius*0.15 + "px " + police;
- clock.textBaseline="middle";
- clock.textAlign="center";
- for(number = 1; number < 13; number++){
- angle = number * Math.PI / 6;
- clock.rotate(angle);
- clock.translate(0, -radius*0.85);
- clock.rotate(-angle);
- clock.fillStyle = colorpolice;
- clock.fillText(number.toString(), 0, 0);
- clock.rotate(angle);
- clock.translate(0, radius*0.85);
- clock.rotate(-angle);
- } // END FOR
- } // END FUNCTION
- function drawTime(clock, radius, colorhour, colormin, colorsec){
- var currentTime = new Date();
- var hour = currentTime.getHours();
- var minute = currentTime.getMinutes();
- var second = currentTime.getSeconds();
- hour = hour%12;
- hour = (hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60));
- drawHand(clock, hour, radius*0.5, radius*0.07, colorhour);
- minute = (minute*Math.PI/30)+(second*Math.PI/(30*60));
- drawHand(clock, minute, radius*0.8, radius*0.07, colormin);
- second = (second*Math.PI/30);
- drawHand(clock, second, radius*0.9, radius*0.02, colorsec);
- } // END FUNCTION
- function drawHand(clock, position, length, width, color){
- clock.beginPath();
- clock.lineWidth = width;
- clock.lineCap = "round";
- clock.moveTo(0,0);
- clock.rotate(position);
- clock.lineTo(0, -length);
- clock.strokeStyle = color;
- clock.stroke();
- clock.rotate(-position);
- } // END FUNCTION
- return { create : createClock };
- })(); // END SCOPE
- </script>
- <HTA:APPLICATION
- SINGLEINSTANCE = "Yes"
- MAXIMIZEBUTTON = "No"
- MINIMIZEBUTTON = "No"
- SHOWINTASKBAR = "Yes"
- ICON = "resmon.exe"
- BORDER = "Thin"
- BORDERSTYLE = "Complex"
- SCROLL="No"
- >
- </head>
- <body style="margin: 0px; padding: 0px;">
- <img src="http://img110.xooimage.com/files/9/4/c/fos1-55fce51.jpg"></img>
- </body>
- <script>
- clock.create(318, 180, 170, 'lucida', '#E1BA9D', '#13182E', '#132357', '#13182E', '#E1BA9D', '#E1BA9D', 'orange');
- </script>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement