在onclick事件后清除文本并更改图像

时间:2011-10-22 03:29:10

标签: javascript html

我点击按钮后会启动倒计时。我想做的是在计数10之后让文本和计数消失(“在这里开始计数”),然后将图像从start32.png更改为stop32.png。

var countdown;
var countdown_number;

function countdown_init() {
    countdown_number = 11;
    countdown_trigger();
}

function countdown_trigger() {
    if(countdown_number > 0) {
        countdown_number--;
        document.getElementById('countdown_text').innerHTML = countdown_number;
        if(countdown_number > 0) {
            countdown = setTimeout('countdown_trigger()', 1000);
        }
    }
}

function countdown_clear() {
    clearTimeout(countdown);
}
<body>
<h2>My page</h2>
<table cellpadding="10">
<tr>
    <td>Click me</td>
    <td><img src = "dashboard/img/start32.png"
            title = "Click me"
            width = "32"
            height = "32"
            border = "0"
            onclick = "countdown_init()">
    </td>
</tr>
</table>

<p>Starting counter here:</p><div id="countdown_text"> </div>


</body>

1 个答案:

答案 0 :(得分:0)

您只需要一个else语句并设置图像src。您可以通过为其分配ID来获取图像。

http://jsfiddle.net/6FF3V/1/

    if(countdown_number > 0) {
        countdown = setTimeout('countdown_trigger()', 1000);
    }
    else {
        document.getElementById('timer_image').src = "http://aux.iconpedia.net/uploads/19274250741916216090.png";
        document.getElementById('count_display').style.display = "none";
    }