Нету функции изменяющий фон страницы
Всем привет, я сейчас изучаю JS и решил по приколу сделать код, который вычисляет 1000-7 и так до -1. Когда переменная доходит до -1, я хочу, чтобы изменился фон страницы.
<html>
<head>
<script>
var block = document.getElementById('block');
var ghoul = 1000;
function ya_ghoul(){
document.body.style.backgroundImage = "url('img/maxresdefault.jpg')";
}
while(ghoul>0){
console.log(ghoul);
ghoul = ghoul - 7;}
while(ghoul<0){
ya_ghoul();
}
</script></head>
<body>
</body>
</html>
Ответы (1 шт):
Автор решения: Vitaliy Suhoplechev
→ Ссылка
Максимально красивое и полное решение, прошу оцените мой ответ.
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
width: 100%;
height: 100vh;
overflow: hidden;
}
#block{
color: white;
background-color: black;
text-align:center;
font-size: 72px;
padding-top: 45vh;
width: inherit;
height: inherit;
}
img{
display: block;
margin: 0 auto;
height: 100%;
width: auto;
}
</style>
</head>
<body>
<div id="block"></div>
<script>
function sleep(delay){ //Нужна для того чтобы числа не прошли от 1000 до 1 мнгновенно
return new Promise(resolve=>{
setTimeout(resolve,delay);
})
}
async function ya_ghoul(){
let block = document.getElementById('block');
let ghoul = 1000;
while(ghoul > 0){
await sleep(20); //0,1 от секунды
block.innerHTML = String(ghoul) + " - 7";
ghoul=ghoul-7;
}
block.style = "padding: 0;"
block.innerHTML = "<img src='https://gameinside.ua/wp-content/uploads/2021/07/a5a8d5c3af00d6019a7120ab8ddc2e9c.jpg'/>";
}
ya_ghoul();
</script>
</body>
</html>