Cara Membuat Timer Count Down

Hallo teman teman balik lagi dengan saya Ismet Maulana kali ini saya ingin berbagi pengetahuan tentang Bagaimana Cara Membuat Timer Count Down.

Oke langsung saja teman teman bisa salinkan scriptnya di bawah sini :

<script language="javascript">
 
var mins
var secs;
 
function cd() {
  mins = 1 * m("1"); // ubah menit
  secs = 0 + s(":01"); // ubah detik
  redo();
}
 
function m(obj) {
  for(var i = 0; i < obj.length; i++) {
      if(obj.substring(i, i + 1) == ":")
      break;
  }
  return(obj.substring(0, i));
}
 
function s(obj) {
  for(var i = 0; i < obj.length; i++) {
      if(obj.substring(i, i + 1) == ":")
      break;
  }
  return(obj.substring(i + 1, obj.length));
}
 
function dis(mins,secs) {
  var disp;
  if(mins <= 9) {
      disp = " 0";
  } else {
      disp = " ";
  }
  disp += mins + ":";
  if(secs <= 9) {
      disp += "0" + secs;
  } else {
      disp += secs;
  }
  return(disp);
}
 
function redo() {
  secs--;
  if(secs == -1) {
      secs = 59;
      mins--;
  }
  document.cd.disp.value = dis(mins,secs); // setting tampilan.
  
 if((mins == 0) && (secs == 0)) {
      document.getElementById('cd').submit();
  } else {
    cd = setTimeout("redo()",1000);
  }
 
  
}
 
function init() {
  cd();
}
window.onload = init;
</script>

<form id="cd" action="" name="cd" method="post">
  <p>
    <table width="50%" border="0" cellpadding="5" cellspacing="1">
      <tr>
        <td width="100%" align="right"><input name="disp" type="text" id="ini" value="10:00" size="5" readonly="true" border="0"></td>
      </tr>
    </table>
  
  </p>
  
  <p>&nbsp;    </p>
</form>

<style type="text/css">
#ini {
  border:none;
  font-family:verdana;
  font-size:50px;
  font-weight:bold;
  border-right-color:#FFFFFF;
  color: red;
}
 
</style>

Jika sudah di salin kemudian teman teman save dan jalan kan di browsernya, kemudian lihat tampilannya .

Cukup mudah bukan?kita telah selesai mengerjakan tentang Bagaimana Cara Membuat Timer Count Down, oke cukup sekian tutorial tentang tentang Bagaimana Cara Membuat Timer Count Down.

Selamat mencoba dan terimakasih …

#KeepLearn

#IsmetMA

Kategori