onclick事件並更改圖像後清除文本

點擊按鈕後，我有一個倒數計時器。我想要做的是讓文本和計數在10的計數後消失（「在這裏開始計數」），然後將圖像從start32.png更改爲stop32.png。onclick事件並更改圖像後清除文本

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>

來源

2011-10-22 Tom

而你的問題是什麼？ –

所有你需要的是一個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"; 
    }

來源

2011-10-22 03:48:30 mrtsherman

更新了我的答案 - 忘記了你想隱藏文字。完成相同的方式，爲這些元素分配一個id，然後在定時器完成後將它們的顯示設置爲none。 – mrtsherman

我在這裏錯過了一些東西。它不適合我。倒計時後需要觸發圖像變化的div是什麼？ – Tom

你看過小提琴嗎？在count_display的id周圍放置一個div倒計時。然後將一個id分配給'timer_image'的img。 – mrtsherman

onclick事件並更改圖像後清除文本

回答

相關問題