Orange pi zero, Orange pi pc 2, sbc android programming, programming, GNU/Linux and *BSD: Cara membuat jam analog

Januari 03, 2012

Cara membuat jam analog

saya akan berbagi mengenai percobaan saya membuat jam analog menggunakan
html dan javascript, berikut cara singkatnya heheheehehehehhe
buat kritik kirim ke yujimaarif.ym@gmail.com
pertama buka notepad
dan tulis kode ini:

<html> <head> <title>jam analog</title> <br />
</head> <br />
<body> <br />
<script>
var dt=new Date()
var day = dt.getDate()
var month = ['January','February','March','April','May','June','July','August','September','October','November','December'];
var month=dt.getMonth();
month++;
var year = dt.getFullYear();
document.write(day+"/");
document.write(month+"/");
document.write(year+"<br />");
</script><br />
<canvas id="jam" width="100" height="100"left="200"top="200"></canvas> <br />
<script type="text/javascript"> 
window.onload = function() 
{ 
function gambar() 
{ 
var ctx = document.getElementById('jam').getContext('2d'); 
ctx.strokeStyle = "(1, 2, 3,4,5,6,7,8,9,10,11,12)"
ctx.clearRect(0, 0, 100, 100); 
ctx.beginPath(); 
ctx.lineWidth = 4; 
ctx.arc(360, 270, 90, 180, Math.PI * 8, true) 
ctx.stroke();
var i; for(i=0; i < 360; i+=5) 
{ 
ctx.lineWidth = ((i % 30)==0)?6:1; 
ctx.strokeStyle = ((i % 60)==0)?"rgb(200,11,20)":"rgb(4,5,4)"; 
var q = i * Math.PI / 180; 
ctx.beginPath(); 
ctx.moveTo(50+(180 * Math.sin(q)), 90+(180 * Math.cos(q))); 
ctx.lineTo(50+((((i % 270)==0)?40:40) * Math.sin(q)),
 50+((((i % 90)==0)?40:40) * Math.cos(q))); 
ctx.closePath(); 
ctx.stroke();
} 
ctx.strokeStyle = "rgba(32, 34, 33, 6.9)"; 
// jam
 var h = new Date(); 
 var j = (h.getHours() % 12) + (h.getMinutes() / 60); 
 ctx.lineWidth = 4; 
 ctx.beginPath(); 
 ctx.moveTo(50+(25 * Math.sin(j * 30 * Math.PI / 180)), 
 50+(-25 * Math.cos(j * 30 * Math.PI / 180))); 
 ctx.lineTo(50+(5 * Math.sin((j+6) * 30 * Math.PI / 180)), 
 50+(-5 * Math.cos((j+6) * 30 * Math.PI / 180))); 
 ctx.closePath(); ctx.stroke(); 
 //minute 
 var m = h.getMinutes() + (h.getSeconds() / 60); 
 ctx.strokeStyle = "rgba(32, 32, 62, 1.8)"; 
 ctx.lineWidth = 2; 
 ctx.beginPath(); 
 ctx.moveTo(50+(29 * Math.sin(m * 6 * Math.PI / 180)),
 50+(-29 * Math.cos(m * 6 * Math.PI / 180))); 
 ctx.lineTo(50+(3 * Math.sin((m+30) * 6 * Math.PI / 180)),
 50+(-3 * Math.cos((m+30) * 6 * Math.PI / 180))); 
 ctx.closePath(); 
 ctx.stroke(); 
 //detik
 var d = h.getSeconds()+ (h.getMilliseconds() / 1000);
 ctx.strokeStyle = "rgba(43, 55, 1, 0.7)";
 ctx.lineWidth = 1; 
 ctx.beginPath(); 
 ctx.moveTo(50+(30 * Math.sin(d * 6 * Math.PI / 180)), 
 50+(-30 * Math.cos(d * 6 * Math.PI / 180))); 
 ctx.lineTo(50+(10 * Math.sin((d+30) * 6 * Math.PI / 180)), 
 50+(-10 * Math.cos((d+30) * 6 * Math.PI / 180)));
 ctx.closePath(); ctx.stroke(); } setInterval(gambar, 2000); } 
 </script> 
<footer>
<p>
copyright © 2011 bocahjenius.</p>
</footer>
</body> 
</html>

lalu save pilih all files beri nama jam_Analog.html tekan simpan/save jadi dech jam analog ngga percaya liat aja di browser.