Ticker

10/recent/ticker-posts

Ad Code

Responsive Advertisement

Source Code : STOPWATCH Online[ JavaScript ]

H4nk Juni 10, 2013

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?
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.
pada artikel ini kita membahas sejarah STOPWATCH online atau siapa penemu STOPWATCH online, tapi membuat STOPWATCH Online. yah di sini menggunakan javascript
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>
H4nk

Diposting oleh H4nk

Posting Komentar

0 Komentar

Berikan Komentar yang bermanfaat dan sehat.