2011-10-22 49 views
0

点击按钮后,我有一个倒数计时器。我想要做的是让文本和计数在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> 
+1

而你的问题是什么? –

回答

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"; 
    } 
+0

更新了我的答案 - 忘记了你想隐藏文字。完成相同的方式,为这些元素分配一个id,然后在定时器完成后将它们的显示设置为none。 – mrtsherman

+1

我在这里错过了一些东西。它不适合我。倒计时后需要触发图像变化的div是什么? – Tom

+0

你看过小提琴吗?在count_display的id周围放置一个div倒计时。然后将一个id分配给'timer_image'的img。 – mrtsherman