We are providing you timer html code
We are providing you timer html code, which you copy and paste in html of your page. In this way you can put clock in your blog post and also learn to make timer.
Example
<html><body><canvas height="400" id="canvas" style="background-color: #333333;" width="400"></canvas><script>var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");var radius = canvas.height / 2;ctx.translate(radius, radius);radius = radius * 0.90setInterval(drawClock, 1000);function drawClock() {drawFace(ctx, radius);drawNumbers(ctx, radius);drawTime(ctx, radius);}function drawFace(ctx, radius) {var grad;ctx.beginPath();ctx.arc(0, 0, radius, 0, 2*Math.PI);ctx.fillStyle = 'white';ctx.fill();grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);grad.addColorStop(0, '#333');grad.addColorStop(0.5, 'white');grad.addColorStop(1, '#333');ctx.strokeStyle = grad;ctx.lineWidth = radius*0.1;ctx.stroke();ctx.beginPath();ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);ctx.fillStyle = '#333';ctx.fill();}function drawNumbers(ctx, radius) {var ang;var num;ctx.font = radius*0.15 + "px arial";ctx.textBaseline="middle";ctx.textAlign="center";for(num = 1; num < 13; num++){ang = num * Math.PI / 6;ctx.rotate(ang);ctx.translate(0, -radius*0.85);ctx.rotate(-ang);ctx.fillText(num.toString(), 0, 0);ctx.rotate(ang);ctx.translate(0, radius*0.85);ctx.rotate(-ang);}}function drawTime(ctx, radius){var now = new Date();var hour = now.getHours();var minute = now.getMinutes();var second = now.getSeconds();//hourhour=hour%12;hour=(hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60));drawHand(ctx, hour, radius*0.5, radius*0.07);//minuteminute=(minute*Math.PI/30)+(second*Math.PI/(30*60));drawHand(ctx, minute, radius*0.8, radius*0.07);// secondsecond=(second*Math.PI/30);drawHand(ctx, second, radius*0.9, radius*0.02);}function drawHand(ctx, pos, length, width) {ctx.beginPath();ctx.lineWidth = width;ctx.lineCap = "round";ctx.moveTo(0,0);ctx.rotate(pos);ctx.lineTo(0, -length);ctx.stroke();ctx.rotate(-pos);}</script></body></html>
How to Setup Clock html code.
steup 1 :- visit sonuindia .com and search create a clock html code . First of all copy ( ctrl +c )the html code of the clock.
steup 2 :- open your html view और paste (ctrl +v ) source code .
steup 3 :-save /update page And watch your clock.
More html code:-
0 Comments
Write Your Comment
Emoji