Cara mudah untuk melaksanakan pemasa dalam kemahiran javascript_javascript

Pemasa juga merupakan fungsi yang kerap digunakan dalam kehidupan, seperti senaman, pertandingan larian dan aktiviti lain yang berkaitan Kami menggunakan Javascript untuk melengkapkan pemasa.

Pemasa ialah pemprosesan masa yang logik Contohnya, 60 saat bersamaan dengan 1 minit, dan 60 minit bersamaan dengan satu jam Kami hanya berurusan dengan jam di sini, dan kemudian dipaparkan secara dinamik dalam Input Dalam.

Sekarang mari lengkapkan antara muka ini

<label>计时:</label> 
<input type="text" name="" id="timer"/> 
<button onclick="pause(this)" id="pause" state="on">暂停</button>
<button onclick="restart()">重新开始</button>

Tujuan memberikan elemen label ID adalah untuk mendapatkan label, dan kemudian menambahkan dua peristiwa klik, acara jeda untuk kaunter dan acara mulakan semula.

Pertama sekali, mari kita selesaikan proses pemasaan permulaan, kita menggunakan kaedah setInterval, yang melaksanakan kaedah setiap 1 saat, supaya kita boleh memproses masa seperti yang dinyatakan pada permulaan, 60 saat adalah bersamaan dengan 1 Minit..., jadi anda perlu menggunakan pertimbangan untuk memprosesnya, dan akhirnya memaparkan detik, minit dan jam yang diperoleh ke dalam kotak input

var ele_timer = document.getElementById("timer");
var n_sec = 0; //秒
var n_min = 0; //分
var n_hour = 0; //时

//60秒 === 1分
//60分 === 1小时
function timer() {
 return setInterval(function () {

  var str_sec = n_sec;
  var str_min = n_min;
  var str_hour = n_hour;
  if ( n_sec < 10) {
   str_sec = "0" + n_sec;
  }
  if ( n_min < 10 ) {
   str_min = "0" + n_min;
  }

  if ( n_hour < 10 ) {
   str_hour = "0" + n_hour;
  }

  var time = str_hour + ":" + str_min + ":" + str_sec;
  ele_timer.value = time;
  n_sec++;
  if (n_sec > 59){
   n_sec = 0;
   n_min++;
  }
  if (n_min > 59) {
   n_sec = 0;
   n_hour++;
  }


 }, 1000);
}

var n_timer = timer();

Kami menggunakan kaedah pemasa untuk membalut kaedah setInterval untuk menjeda dan memulakan semula pemprosesan kemudian Apabila pengguna mengklik Jeda, pemasa akan menghentikan pemasaan Jika pengguna terus mengklik butang, pemasa akan meneruskan pemasaan Jadi terdapat keadaan yang perlu dikawal untuk keadaan ini, kami memberikan butang itu 🎜>

Akhirnya mari kita lihat memulakan semula acara adalah lebih mudah. ​​Kosongkan pembilang kepada 0, kemudian tukar keadaan awal butang jeda.

//暂停和继续
function pause(self) {
  var state = self.getAttribute("state");
  if (state === "on") {
   clearInterval(n_timer);
   self.textContent = "继续";
   self.setAttribute("state", "off");
  } else {
   n_timer = timer();
   self.textContent = "暂停";
   self.setAttribute("state", "on");
  }
}

function restart() {
 clearInterval(n_timer);
 n_sec = 0;
 n_min = 0;
 n_hour = 0;
 n_timer = timer();

 var ele_pause = document.getElementById("pause");
 ele_pause.textContent = "暂停";
 ele_pause.setAttribute("state", "on");
}

Ini melengkapkan fungsi pemasaan Kesannya adalah seperti berikut

Saya harap artikel ini akan membantu semua orang dalam mempelajari pengaturcaraan javascript.