Как запустить код “Появление блока, окна, текста с задержкой” по клику?

[usergeyv]

этот код запускается при загрузки страницы, а как его запустить по клику на кнопку?

<script type="text/javascript">
window.onload = function () {
    var i = 5;
    var timer = setInterval(function () {
        i--;
        document.getElementById('timer').innerHTML = 'Осталось секунд: ' + i;
        if (i == 0) {
            document.getElementById('example').style.display = 'block';
            document.getElementById('timer').style.display = 'none';
            clearInterval(timer);
        }
    }, 1000)
}
</script>
<div id="timer"></div>
<div id="example" style=" display: none; ">
Содержимое скрытого блока, например ссылка на стачивание или какой-то код.
</div>

 

[usergeyv]

делаю так , не работает

<button onclick = "startTimer()">Старт</button>

<script type="text/javascript">
function startTimer () {
window.onload = function () {
    var i = 5;
    var timer = setInterval(function () {
        i--;
        document.getElementById('timer').innerHTML = 'Осталось секунд: ' + i;
        if (i == 0) {
            document.getElementById('example').style.display = 'block';
            document.getElementById('timer').style.display = 'none';
            clearInterval(timer);
        }
    }, 1000)
}

}
</script>
<div id="timer"></div>
<div id="example" style=" display: none; ">
Содержимое скрытого блока, например ссылка на стачивание или какой-то код.
</div>

 

[qpPeW]

<button onclick="startTimer()">Старт</button>

<script type="text/javascript">
function startTimer () {
    var i = 5;
    var timer = setInterval(function () {
        i--;
        document.getElementById('timer').innerHTML = 'Осталось секунд: ' + i;
        if (i == 0) {
            document.getElementById('example').style.display = 'block';
            document.getElementById('timer').style.display = 'none';
            clearInterval(timer);
        }
    }, 1000);
}
</script>
<div id="timer"></div>
<div id="example" style="display: none;">
Содержимое скрытого блока, например ссылка на стачивание или какой-то код.
</div>

 

[usergeyv]

<button onclick="startTimer()">Старт</button>

Спасибо, работает , а как запустить заново, если второй раз кликнуть?

 

[qpPeW]

Спасибо, работает , а как запустить заново, если второй раз кликнуть?

<button onclick="startTimer()">Старт</button>

<script type="text/javascript">
function startTimer () {
    var i = 5;
    var timer = setInterval(function () {
        i--;
        document.getElementById('timer').innerHTML = 'Осталось секунд: ' + i;
        if (i == 0) {
            document.getElementById('example').style.display = 'block';
            document.getElementById('timer').style.display = 'none';
            clearInterval(timer);
        } else {
            document.getElementById('example').style.display = 'none';
            document.getElementById('timer').style.display = 'block';
        }
    }, 1000);
}
</script>
<div id="timer"></div>
<div id="example" style="display: none;">
Содержимое скрытого блока, например ссылка на стачивание или какой-то код.
</div>