STOPWATCH online tentu semuanya sudah mengenalnya bukan, kalau yang belum tahu ini adalah pengertian STOPWATCH online menurut versi wikipedia :
Jam sukat atau jam randek (bahasa Inggris: stopwatch) adalah alat yang digunakan untuk mengukur lamanya waktu yang diperlukan dalam kegiatan, misalnya: berapa lama sebuah mobil dapat mencapai jarak 60 km, atau berapa waktu yang dibutuhkan seorang pelari yang dapat mencapai jarak 100 meter?pada artikel ini kita membahas sejarah STOPWATCH online atau siapa penemu STOPWATCH online, tapi membuat STOPWATCH Online. yah di sini menggunakan javascript
Jam sukat ada dua macam yaitu jam sukat analog dan jam sukat digital/bergana.jam sukat analog memiliki batas ketelitian 0,1sekonsedangkan jam sukat digital memiliki batas ketelitian hingga 0,01
Cara menggunakan jam sukat dengan memulai menekan tombol di atas dan berhenti sehingga suatu waktu detik ditampilkan sebagai waktu yang berlalu. Kemudian dengan menekan tombol yang kedua pengguna dapat menyetel ulang jam sukat kembali ke nol. Tombol yang kedua juga digunakan sebagai perekam waktu.
to the point aja langsung saja cekidot demonya dulu.
penampakannya adalah sebagai berikut :
berikut adalah source codenya :
3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 | <html> <head> <title>Online Stopwatch</title> <script type='text/javascript'> // http://h4nk.blogspot.com var t=[0, 0, 0, 0, 0, 0, 0, 1]; function ss() { t[t[2]]=(new Date()).valueOf(); t[2]=1-t[2]; if (0==t[2]) { clearInterval(t[4]); t[3]+=t[1]-t[0]; var row=document.createElement('tr'); var td=document.createElement('td'); td.innerHTML=(t[7]++); row.appendChild(td); td=document.createElement('td'); td.innerHTML=format(t[1]-t[0]); row.appendChild(td); td=document.createElement('td'); td.innerHTML=format(t[3]); row.appendChild(td); document.getElementById('lap').appendChild(row); t[4]=t[1]=t[0]=0; disp(); } else { t[4]=setInterval(disp, 43); } } function r() { if (t[2]) ss(); t[4]=t[3]=t[2]=t[1]=t[0]=0; disp(); document.getElementById('lap').innerHTML=''; t[7]=1; } function disp() { if (t[2]) t[1]=(new Date()).valueOf(); t[6].value=format(t[3]+t[1]-t[0]); } function format(ms) { var d=new Date(ms+t[5]).toString() .replace(/.*([0-9][0-9]:[0-9][0-9]:[0-9][0-9]).*/, '$1'); var x=String(ms%1000); while (x.length<3) x='0'+x; d+='.'+x; return d; } function load() { t[5]=new Date(1970, 1, 1, 0, 0, 0, 0).valueOf(); t[6]=document.getElementById('disp'); disp(); if (!window.opener && window==window.top) { document.getElementById('remote').style.visibility='visible'; } } function remote() { window.open( document.location, '_blank', 'width=700,height=350' ); return false; } </script> <style type='text/css'> #main button, #disp { width: 8em; vertical-align: middle; } #main button { padding: 0.4em; font-size: 1.1em; } #disp { background-color: white; font-size: 2em; width: 7.25em; font-family: "Courier New"; } #main { text-align: center; white-space: nowrap; } #remote { position: absolute; top: 1px; right: 1px; visibility: hidden; } #lap { margin-top: 0.5em; } </style> </head> <body onload='load();'> <button onclick='remote();' id='remote'>Remote</button> <div id='main'> <button type='button' onclick='ss()' onfocus='this.blur()'>Start / Stop</button> <input type='text' id='disp' /> <button type='button' onclick='r()' onfocus='this.blur()'>Reset</button> </div> <table border='1'> <tr><th>Lap #</th><th>This Lap</th><th>Running Total</th></tr> <tbody id='lap'></tbody> </table> </body> </html> |