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

How to put Stop and Reset button in html and javascript

本文关键字：按钮 停止和重置 html javascript      更新时间：2024-02-29

我需要帮助，如何在html和javascript中放置Stop和Reset按钮这里是我倒计时的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>

javascript

更改
1.taken窗口变量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>

使用表单中的重置属性清除表单输入值

<input type="reset"value="Reset">

看看这里http://jsfiddle.net/05y89wn3/14/您必须清除超时，重置表单并更改countdown_div 的html值

var reset = document.getElementById("reset_button");
 var t;
reset.onclick = function() {
    clearTimeout(t);
 document.getElementById("countdown_form").reset();   
document.getElementById("countdown_div").innerHTML="";
}
相关文章：