JavaScript တွင် အချိန်မှတ်တမ်း (တိုင်မာ) စတင်ရန် နှင့် ရပ်တန့်ရန် ခလုတ်များ

html<button id="start">start</button>
<button id="stop">stop</button>

javascriptlet start = document.querySelector('#start');
let stop  = document.querySelector('#stop');

javascriptstart.addEventListener('click', function() {
  let timerId = setInterval(function() {
    console.log('!')
  }, 1000);
});

javascriptstart.addEventListener('click', function() {
  let timerId = setInterval(function() {
    console.log('!')
  }, 1000);
});

// အချိန်မှတ်တမ်း (တိုင်မာ) ကို ရပ်တန့်ပါမည်။
stop.addEventListener('click', function() {
  clearInterval(timerId);
});

javascriptlet timerId; // ယာယီအမည်ကို ကမ္ဘာလုံးဆိုင်ရာ ဖြစ်အောင် ပြုလုပ်မည်။

start.addEventListener('click', function() {
  timerId = setInterval(function() {
    console.log('!')
  }, 1000);
});

stop.addEventListener('click', function() {
  clearInterval(timerId);
});

Задание 1

စတင်စတွင် 100 ကိန်းတစ်ခုကို သိမ်းဆည်းထားသော ယာယီအမည်တစ်ခု ပေးထားသည်ဟု ယူဆပါ။ ခလုတ်နှစ်ခုလည်း ပေးထားပါသည်။ ပထမခလုတ်ကို နှိပ်သောအခါ အချိန်မှတ်တမ်း (တိုင်မာ) တစ်ခုကို စတင်ပါ။ ထိုအချိန်မှတ်တမ်းသည် ယာယီအမည်၏ တန်ဖိုးကို စက္ကန့်တိုင်း 1 နှုတ်ပေးပြီး အသစ်တန်ဖိုးကို console တွင် ပြသပေးပါမည်။ ယာယီအမည်၏ တန်ဖိုးသည် သုညသို့ ရောက်ရှိသည်နှင့် အချိန်မှတ်တမ်း (တိုင်မာ) ကို ရပ်တန့်ပါ။

ဒုတိယခလုတ်ကို နှိပ်သောအခါ အချိန်မှတ်တမ်း (တိုင်မာ) ကို ရပ်တန့်ပါ။ ဒုတိယခလုတ်ကို မနှိပ်ရသေးသော်လည်း ယာယီအမည်၏ တန်ဖိုးသည် သုညသို့ ရောက်ရှိပါက အချိန်မှတ်တမ်း (တိုင်မာ) ကို ရပ်တန့်ပါ။

Задание 2

ပရိုဂရမ်မာတစ်ယောက်သည် ခလုတ်တစ်ခုကို နှိပ်သောအခါ လက်ရှိအချိန်ကို console တွင် ပြသနေသော အချိန်မှတ်တမ်း (တိုင်မာ) ကို စတင်သည့် ကုဒ်ကို ရေးသားခဲ့သည်။

html<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

javascriptlet start = document.querySelector('#start');
let stop  = document.querySelector('#stop');

start.addEventListener('click', function() {
  let timerId = setInterval(function() {
    let date = new Date;
    console.log(date.getMinutes() + ' ' + date.getSeconds());
  }, 1000);
});

stop.addEventListener('click', function() {
  clearInterval(timerId);
});

ကုဒ်ကို လုပ်ဆောင်ပြီးနောက်တွင် ရပ်တန့်ခလုတ် အလုပ်မလုပ်သည်ကို တွေ့ရသည်။ ကုဒ်ရေးသူ၏ အမှားကို ပြင်ဆင်ပေးပါ။

Задание 3

နောက်ထပ် ပရိုဂရမ်မာတစ်ယောက်ကလည်း ယခင်လုပ်စာကို ဖြေရှင်းရန် ကုဒ်ရေးသားခဲ့သည်။

html<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

javascriptlet start = document.querySelector('#start');
let stop  = document.querySelector('#stop');

let timerId;

start.addEventListener('click', function() {
  let timerId = setInterval(function() {
    let date = new Date;
    console.log(date.getMinutes() + ' ' + date.getSeconds());
  }, 1000);
});

stop.addEventListener('click', function() {
  clearInterval(timerId);
});

ကုဒ်ကို လုပ်ဆောင်ပြီးနောက်တွင် ရပ်တန့်ခလုတ် အလုပ်မလုပ်သည်ကို ထပ်မံတွေ့ရသည်။ ကုဒ်ရေးသူ၏ အမှားကို ပြင်ဆင်ပေးပါ။

Задание 4

နောက်ထပ် ပရိုဂရမ်မာတစ်ယောက်ကလည်း ယခင်လုပ်စာကို ဖြေရှင်းရန် ကုဒ်ရေးသားခဲ့သည်။

html<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

javascriptlet start = document.querySelector('start');
let stop  = document.querySelector('stop');

let timerId;

start.addEventListener('click', function() {
  setInterval(function() {
    let date = new Date;
    console.log(date.getMinutes() + ' ' + date.getSeconds());
  }, 1000);
});

stop.addEventListener('click', function() {
  clearInterval(timerId);
});

ကုဒ်ကို လုပ်ဆောင်ပြီးနောက်တွင် ရပ်တန့်ခလုတ် အလုပ်မလုပ်သည်ကို ထပ်မံတွေ့ရသည်။ ကုဒ်ရေးသူ၏ အမှားကို ပြင်ဆင်ပေးပါ။

Задание 5

နောက်ထပ် ပရိုဂရမ်မာတစ်ယောက်ကလည်း ယခင်လုပ်စာကို ဖြေရှင်းရန် ကုဒ်ရေးသားခဲ့သည်။

html<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

javascriptlet start = document.querySelector('start');
let stop  = document.querySelector('stop');

let timerId;

start.addEventListener('click', function() {
  let timerId = setInterval(function() {
    let date = new Date;
    console.log(date.getMinutes() + ' ' + date.getSeconds());
  }, 1000);
});

stop.addEventListener('click', function() {
  clearInterval();
});

ကုဒ်ကို လုပ်ဆောင်ပြီးနောက်တွင် ရပ်တန့်ခလုတ် အလုပ်မလုပ်သည်ကို ထပ်မံတွေ့ရသည်။ ကုဒ်ရေးသူ၏ အမှားကို ပြင်ဆင်ပေးပါ။

Задание 6

သီအိုရီအပိုင်းတွင် ကျွန်ုပ် ဖော်ပြခဲ့သော ကုဒ်သည် start ခလုတ်ကို အကြိမ်ကြိမ် နှိပ်နိုင်သည်ကို ထည့်သွင်းစဉ်းစားထားခြင်း မရှိပါ။ ဤပြဿနာကို ပြင်ဆင်ရန် start ခလုတ်ကို နှိပ်သောအခါ ထိုခလုတ်မှ အဖြစ်အပျက်ကို ခွဲထုတ်ပြီး၊ stop ခလုတ်ကို နှိပ်သောအခါ ပြန်လည် ချိတ်ဆက်ပေးနိုင်ပါသည်။ ပြဿနာကို ပြင်ဆင်ပေးပါ။