Question

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

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.添加一个按钮（名称：重置），点击后调用doReset功能
3.added 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>

Answer 2

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

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

Answer 3

看一看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="";
}

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

3 个答案: