Question

我使用java脚本制作了反向计时器。我添加了启动按钮并单独重置，但需要在点击时更改按钮功能。如果我点击开始然后启动功能应该运行，并且在启动重置按钮的位置应该来，再次点击重置后重置功能应该开始和开始按钮应该来。我怎样才能做到这一点。请建议。

这是代码

var interval;
    var minutes = 1;
    var seconds = 00;

    function countdown(element) {
        interval = setInterval(function() {
            var el = document.getElementById(element);
            if(seconds == 0) {
                if(minutes == 0) {
                    alert(el.innerHTML = "countdown's over!");                    
                    clearInterval(interval);
                    return;
                } else {
                    minutes--;
                    seconds = 60;
                }
            }
            if(minutes > 0) {
                var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
            } else {
                var minute_text = '';
            }
            var second_text = seconds > 1 ? 'seconds' : 'second';
            el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining';
            seconds--;
        }, 1000);
    }
var renew = document.getElementById('renew');
renew.onclick = function() {
    minutes = 1;
    seconds = 00;
    clearInterval(interval);
    interval = null;

     countdown('countdown');    
}

var start = document.getElementById('start');
start.onclick = function() {
    document.getElementById('renew').onclick = function (event){
        <input type="button" value="renew" id="renew" /> 
    };
    if (!interval) {
        countdown('countdown');
    }
}

html代码是：

<div id="topmain">
        <div style="margin-left:15px; float:left;">
            <input type="button" value="start" id="start" /> 
            <input type="button" value="renew" id="renew" />
            <div id='countdown' style="color:#0FC;  margin-left:5px; " >

           </div> </div>

Answer 1

重叠按钮并隐藏重置按钮，并在单击按钮时切换显示另一个按钮..

Answer 2

这里查看代码，

http://jsfiddle.net/86W5B/2/

您需要做的就是添加显示和隐藏按钮，例如

start.style.display = 'block';
renew.style.display = 'none';

和

start.style.display = 'none';
renew.style.display = 'block';

这是完整的代码，

<div id="countdown"></div>
<input type="button" id="start" value="Start">
<input type="button" id="renew" value="renew" style="display:none">

<script>
var interval;
    var minutes = 1;
    var seconds = 00;

    function countdown(element) {
        interval = setInterval(function() {
            var el = document.getElementById(element);
            if(seconds == 0) {
                if(minutes == 0) {
                    alert(el.innerHTML = "countdown's over!");
                    start.style.display = 'block';
                    renew.style.display = 'none';        
                    clearInterval(interval);
                    return;
                } else {
                    minutes--;
                    seconds = 60;
                }
            }
            if(minutes > 0) {
                var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
            } else {
                var minute_text = '';
            }
            var second_text = seconds > 1 ? 'seconds' : 'second';
            el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining';
            seconds--;
        }, 1000);
    }

var renew = document.getElementById('renew');
var start = document.getElementById('start');

renew.onclick = function() {
    minutes = 1;
    seconds = 00;
    clearInterval(interval);
    interval = null;

     countdown('countdown'); 
    start.style.display = 'block';
    renew.style.display = 'none';

}


start.onclick = function() {
    start.style.display = 'none';
    renew.style.display = 'block';

    if (!interval) {
        countdown('countdown');
    }
}
</script>

如何使用Javascript动态更改按钮事件

2 个答案: