В этом скрипте производится обратный посекундный отсчет от заданного количества секунд до нуля. По завершении отсчета появляется гиперссылка.
Создаем функцию и необходимые для ее работы элементы:
function countdown() {
var sec = 60; // здесь задаем начальное число секунд
var body = document.getElementsByTagName("body")[0];
var divC = document.createElement('div'); // контейнер (округлой формы)
var divS = document.createElement('div'); // секунды
Добавляем в документ созданные элементы:
divS.innerHTML = sec;
divC.appendChild(divS);
body.appendChild(divC);
Создаем функцию, осуществляющую обратный отсчет:
var a=setInterval(function() {
sec--;
if (sec==0) {
divS.innerHTML="<a href=#>Click me</a>" ; // здесь можно прописать ссылку, текст и т.п.
clearInterval(a);
}
else divS.innerHTML = sec;
},1000);
Добавляем немного CSS стилей и запускаем функцию:
divC.style.borderRadius = 100; // радиус скругления углов div'а
divC.style.backgroundColor = "#F5F5F5"; // цвет фона окружности
divC.style.width = 100; // ширина
divC.style.height = 100; // высота
divC.style.border = "solid"; // стиль рамки вокруг окружности
divC.style.borderColor = "green"; // цвет рамки вокруг окружности
divC.style.position = "absolute";
divC.align = "center";
divS.style.marginTop = 35; // отступ сверху
divS.style.fontSize = 25; // размер шрифта
}
countdown();
Если для оформления контейнера или текста с секундами понадобится их class, то их можно установить, добавив в скрипт строки divC.className = "myCont" и divS.className = "mySec".
Теперь, соединив все части представленного кода, вы получите готовый скрипт.
А таймер-то г.. унылое. Автор абсолютно не понимает как работает таймаут в js, и что нужно ориентироваться на машинное время.