/* Добавляем черный фон и чтобы
элементы располагались по центру */
body{
background-color: black;
display: flex;
flex-direction: column;
align-items: center;
}
/* Задаём цвет для цифр */
body h2{
color: white;
}
/* Задаём свойства для рамки старта */
#ghoul{
width: 100%;
height: 100px;
font-size: 50px;
}
Шаг 3: Добавляем JS
//Задаём +7, для того чтобы 1000 была в начале
g = 1000 + 7;
//Подключаем музыку
audio = new Audio('я гуль.mp3');
//Создаём основную функцию
function webghoul() {
if (g < 0) {
audio.pause();
clearInterval(time);
}
g = g - 7;
//Вставляем цифры
$('body').append('<h2>' + g + '</h2>');
//Задаем анимацию скролла
$('html, body').animate({
scrollTop: $(document).height() + $(window).height()
}, 100);
}
//Назначаем событию свою функцию
$('#ghoul').on('click', function () {
audio.play();
//Добавляем интервал
let time = setInterval(webghoul, 120);
});