Friday, April 12, 2019

Membuat Stopwatch dengan JavaScript di Laravel

Kali ini kita akan mencoba membuat stopwatch dengan javascript yang mana akan kita gunakan untuk mencatat waktu tertentu.



Membuat Stopwatch dengan JavaScript di Laravel

Skrip yang disajikan dalam halaman ini adalah kronometer / stopwatch sederhana , dengan opsi Mulai, Berhenti, dan Atur Ulang. Ini menampilkan sepersepuluh detik, detik, dan menit, dan dapat diatur untuk berhenti dan menjalankan fungsi ketika waktu kronometer mencapai nilai tertentu.
- Untuk lebih jelasnya, lihat instruksi di bawah, dan komentar dalam kode.

Untuk menguji skrip ini, klik tombol Mulai. Dalam contoh ini, kronometer diatur untuk berhenti secara otomatis dan menampilkan jendela peringatan setelah 3 detik dan 8/10 detik.

- Fungsi startChr () memulai kronometer.
- Untuk menghentikan stopwatch, panggil fungsi stopChr () .
- Untuk mengatur ulang kronometer, panggil fungsi resetChr () .

<div class="form-group">
<label class="control-label col-md-1 text-bold">Durasi</label>
<div class="col-md-4">
 <input id="durasi" type="text" name="duration" required class="form-control">
</div>

</div>

<div id="showtm" style="font-size:21px; font-weight:800;">0:0</div>
<a onclick="startChr()" class="btn btn-primary">Start</a>
<a onclick="stopChr()" class="btn btn-danger">Stop</a>
<a onclick="resetChr()" class="btn btn-info">Reset</a><br><br><br>

Script functionnya...
<script type="text/javascript"><!--
// chronometer / stopwatch JS script - coursesweb.net

// Here set the minutes, seconds, and tenths-of-second when you want the chronometer to stop
// If all these values are set to 0, the chronometer not stop automatically
var stmints = 0;
var stseconds = 0;
var stzecsec = 0;

// function to be executed when the chronometer stops
function toAutoStop() {
  alert('Your life goes on');
}

// the initial tenths-of-second, seconds, and minutes
var zecsec = 0;
var seconds = 0;
var mints = 0;

var startchron = 0;

function chronometer() {
  if(startchron == 1) {
    zecsec += 1;       // set tenths of a second

    // set seconds
    if(zecsec > 9) {
      zecsec = 0;
      seconds += 1;
    }

    // set minutes
    if(seconds > 59) {
      seconds = 0;
      mints += 1;
    }

    // adds data in #showtm
    document.getElementById('showtm').innerHTML = mints+ ' : '+ seconds+ '<sub>'+ zecsec+ '</sub>';

    // if the chronometer reaches to the values for stop, calls whenChrStop(), else, auto-calls chronometer()
    if(zecsec == stzecsec && seconds == stseconds && mints == stmints) toAutoStop();
    else setTimeout("chronometer()", 100);
  }
}

function startChr() { startchron = 1; chronometer(); }      // starts the chronometer
function stopChr() { startchron = 0;

if(mints === 0)
{
document.getElementById('durasi').value = seconds +' Detik ' ;
}
else{
document.getElementById('durasi').value = mints+ ' Menit '+ seconds +' Detik ' ;
}

 }                      // stops the chronometer
function resetChr() {
  zecsec = 0;  seconds = 0; mints = 0; startchron = 0;
  document.getElementById('showtm').innerHTML = mints+ ' : '+ seconds+ '<sub>'+ zecsec+ '</sub>';
}

// start the chronometer, delete this line if you want to not automatically start the stopwatch
startChr();
--></script>

0 comments:

Post a Comment