0

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>
4

2 に答える 2

1

ボタンを重ねてリセットボタンを非表示にし、一方がクリックされたときにもう一方のボタンを表示するように切り替えます..

于 2012-12-03T05:16:52.400 に答える
0

ここでコードをチェックアウトし、

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>
​
于 2012-12-03T05:37:47.543 に答える