Блог

Главная - Вопросы по программированию - Очистить текст после события onclick и изменить изображение

Очистить текст после события onclick и изменить изображение

#javascript #html

#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:

Все, что вам нужно, это оператор else и установить src изображений. Вы можете получить изображение, присвоив ему идентификатор.

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

Комментарии:

1. Обновил мой ответ — забыл, что вы хотели скрыть текст. Выполните то же самое, присвоите элементам идентификатор, а затем установите для их отображения значение none после завершения таймера.

2. Я здесь чего-то не хватает. У меня это не работает. Какие подразделения мне нужны, чтобы вызвать изменение изображения после обратного отсчета?

3. Вы смотрели на скрипку? Поместите div вокруг countdown с идентификатором count_display . Затем присвоите идентификатор img of timer_image .

4. Вздох … помогает, если я посмотрел на скрипку! Спасибо! Есть ли способ, которым я могу получить текст: «Начальный счетчик здесь:» появляется только с обратным отсчетом и исчезает, когда обратный отсчет завершен?

5. На самом деле, даже в дополнение к этому, возможно ли иметь событие onclick, которое вернет изображение к исходному?