javascript - 如何在 html 和 javascript 中放置“停止”和“重置”按钮

Question

我需要帮助，如何在 html 和 javascript 中放置停止和重置按钮这是我的倒计时 javascript 和 html 代码，还添加了带声音的 chrome 通知，声音循环通知我倒计时后还剩 10 秒，然后 0 在 chrome 通知中通知我，并在页面标题中显示倒计时值

function do_countdown() {
 var start_num = document.getElementById("value").value;
 var unit_var = document.getElementById("countdown_unit").value;

 start_num = start_num * parseInt(unit_var);

 var countdown_output = document.getElementById('countdown_div');

 if (start_num > 0) {
 countdown_output.innerHTML = format_as_time(start_num);
 var t=setTimeout("update_clock(\"countdown_div\", "+start_num+")", 1000);
 }

 return false;
 }

 function update_clock(countdown_div, new_value) {
 var countdown_output = document.getElementById(countdown_div);
 var new_value = new_value - 1;

 if (new_value > 0) {
 new_formatted_value = format_as_time(new_value);
 countdown_output.innerHTML = new_formatted_value;

 var t=setTimeout("update_clock(\"countdown_div\", "+new_value+")", 1000);
 } else {
 countdown_output.innerHTML = "Time's UP!";
 }
 }

 function format_as_time(seconds) {
 var minutes = parseInt(seconds/60);
 var seconds = seconds - (minutes*60);

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

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

 var return_var = minutes+':'+seconds;

 return return_var;

 }

还有 html

<form id="countdown_form" onSubmit="return do_countdown();">
                    Countdown from: <input type="text" style="width: 30px" id="value"  value="10" text-align="center"/>
                <select id="countdown_unit">
                    <option value="1">Seconds</option>
                    <option value="60">Minutes</option>
                    <option value="3600">Hours</option>
                </select>
                    <input type="submit" value="Start" />
                    <!--<input type="button" value="Reset" id="reset">-->
            </form>
       <div id="countdown_div">&nbsp;</div>

Answer 1

JavaScript

变化
1.获取将要分配计时器的窗口变量 t1,t2
2.添加了一个按钮(名称:reset)，点击该按钮会调用doReset函数
3.新增doStuff功能

window.t1=null;
    window.t2=null;
    function do_countdown() {
     var start_num = document.getElementById("value").value;
     var unit_var = document.getElementById("countdown_unit").value;

     start_num = start_num * parseInt(unit_var);

     var countdown_output = document.getElementById('countdown_div');

     if (start_num > 0) {
     countdown_output.innerHTML = format_as_time(start_num);
     window.t1=setTimeout("update_clock(\"countdown_div\", "+start_num+")", 1000);
     }

     return false;
     }

     function update_clock(countdown_div, new_value) {
     var countdown_output = document.getElementById(countdown_div);
     var new_value = new_value - 1;

     if (new_value > 0) {
     new_formatted_value = format_as_time(new_value);
     countdown_output.innerHTML = new_formatted_value;

     window.t2=setTimeout("update_clock(\"countdown_div\", "+new_value+")", 1000);
     } else {
     countdown_output.innerHTML = "Time's UP!";
     }
     }

     function format_as_time(seconds) {
     var minutes = parseInt(seconds/60);
     var seconds = seconds - (minutes*60);

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

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

     var return_var = minutes+':'+seconds;

     return return_var;

     }

     function doReset(){
            window.clearTimeout(window.t1);
            window.clearTimeout(window.t2);
            document.getElementById('countdown_div').innerHTML="";
        }

HTML

<form id="countdown_form" onSubmit="return do_countdown();">
  Countdown from: <input type="text" style="width: 30px" id="value"  value="10" text-align="center"/>
    <select id="countdown_unit">
         <option value="1">Seconds</option>
         <option value="60">Minutes</option>
         <option value="3600">Hours</option>
    </select>
    <input type="submit" value="Start" />
    <input type="button" onClick="return doReset();" value="Reset" id="reset">
</form>    
<div id="countdown_div">&nbsp;</div>