Форум

III · #1 (**permalink**) 01.04.2024, 14:43

Всех с днем Смеха. Столкнулся с проблемой следующего характера. Если в HTML изображению присваиваю id? то функция работает, если присваиваю clacc, то не работает. В чем тут проблема спецы JS?
Вот мои коды:
Тут работает

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <style type='text/css'>
    #brevno {
    display:none;
}
  </style>
<script type='text/javascript'>
window.onload=function(){
var image = document.getElementById("brevno");
setTimeout(() => image.style.display = "block", 3000);//время задержки показа
setTimeout(() => image.style.display = "none", 10000);// время показа будет
</script>
</head>

<body>

 <img id="brevno"  src="pictures/brevno.gif">

</body>
</html

А тут нет

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <style type='text/css'>
    .brevno {
    display:none;
}
  </style>
<script type='text/javascript'>
window.onload=function(){
var image = document.querySelector("brevno");
setTimeout(() => image.style.display = "block", 3000);//время задержки показа
setTimeout(() => image.style.display = "none", 10000);// время показа
}
</script>
</head>

<body>

 <img class="brevno"  src="pictures/brevno.gif">

</body>
</html

Nexus · #2 (**permalink**) 01.04.2024, 15:17

var image = document.querySelector("*!*.*/!*brevno");

В querySelector перед классом должна стоять точка, либо используйте вместо querySelector getElementsByClassName

var image = document.getElementsByClassName("brevno")?.at(0);

III · #3 (**permalink**) 01.04.2024, 15:54

Nexus, спасибо с точкой работает. Знаю же, что надо ставить точку, но как-то пропустил. Попутный вопрос. Как правильно дописать скрипт с классом, чтобы подобным образом, но естественно с разными временными показателями, появлялись и исчезали ещё четыре картинки?

Nexus · #4 (**permalink**) 01.04.2024, 17:50

Как-то так:

<img class="blink-image brevno"  src="pictures/brevno.gif">
<img class="blink-image brevno2"  src="pictures/brevno.gif">
<img class="blink-image brevno3"  src="pictures/brevno.gif">
<img class="blink-image brevno4"  src="pictures/brevno.gif">

<script>
document.querySelectorAll('.blink-image').forEach((image, index) => {
    setTimeout(() => image.style.display = "block", (index * 1000) + 3000);
    setTimeout(() => image.style.display = "none", (index * 1000) + 10000);
});
</script>

III · #5 (**permalink**) 01.04.2024, 18:30

Nexus, и вновь Вы меня выручаете, сейчас попробовать не могу, занят, но уверен, что всё будет работать. Наберусь наглости, задам ещё один вопрос. Как тут в скрипте сделать , чтобы картинки плавно появлялись и исчезали? Приношу свои извинения, за то что задал так много вопросов.

III · #6 (**permalink**) 01.04.2024, 20:11

Nexus, сделал вроде так как Вы советовали, но что вновь пошло не так. Первая картинка (бревно)появляется как надо, а вот от второй и третьей на экран выводятся только их значки, но они появляются и исчезают. вот картинка

Вот код, который у меня получился

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Показать и скрыть</title>
  <link rel="stylesheet" href="styles/style.css">
<style type='text/css'>
 .brevno {
    display:none;
}
 .roza {
    display:none;
}

.lutik {
    display:none;
}

 </style>
</head>
<body>

<div class="container">
  <div class="image-stack">

<img class="зеленый"
src="pictures/зеленый.png" alt=""/>

<img class="черный"
src="pictures/черный.png" alt=""/>

<img class="blink-image brevno" src="pictures/brevno.gif" alt="бревно"/>
<img class="blink-image roza" src="pictures/roza.png" alt="роза"/>
<img class="blink-image lutik" src="pictures/lutik.png" alt="лютик"/>
	
</div>
	</div>

<script src="scripts/script.js"></script>
</html>

document.querySelectorAll('.blink-image').forEach((image, index) => {
    setTimeout(() => image.style.display = "block", (index * 1000) + 3000);
    setTimeout(() => image.style.display = "none", (index * 1000) + 10000);
});

я так понимаю, что показ и скрытие картинок будет происходить по в ременным показателям в скрипте, т.е. в одно и тоже время для всех картинок, а надо, чтобы временные показатели для каждой картинки были своими. Что я опять не так сделал?
Ещё раз спасибо за помощь, и мои извинения за назойливость.

III · #7 (**permalink**) 01.04.2024, 21:17

С показом картинок я разобрался. Всё работает. Осталось сделать временные показатели для каждой картинки и если возможно решить вопрос плавным появлением и скрытием.

рони · #8 (**permalink**) 01.04.2024, 22:12

Сообщение от III

Осталось сделать временные показатели для каждой картинки и если возможно решить вопрос плавным появлением и скрытием.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Показать и скрыть</title>
    <link rel="stylesheet" href="styles/style.css">
    <style type='text/css'>
        .blink-image  {
            opacity: 0;
            width: 150px;
            transition: opacity 1.2s;
        }

        .brevno.open {
            opacity: 1;
            transition: opacity 1s;
        }

        .roza.open {
           opacity: 1;
           transition: opacity .3s;
        }

        .lutik.open {
           opacity: 1;
           transition: opacity .7s;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="image-stack">
            <img class="зеленый" src="pictures/зеленый.png" alt="" />
            <img class="черный" src="pictures/черный.png" alt="" />
            <img class="blink-image brevno" src="https://diomaks.com/images/tree.gif" alt="бревно" />
            <img class="blink-image roza" src="https://pngicon.ru/file/uploads/2_8-256x256.png" alt="роза" />
            <img class="blink-image lutik" src="https://cdn-icons-png.flaticon.com/256/8958/8958580.png" alt="лютик" />
        </div>
    </div>
    <script>
const arr = [{show : 1000, hide : 4000}, {show : 5000, hide : 8000}, {show : 3000, hide : 5000}];
document.querySelectorAll('.blink-image').forEach((image, index) => {
    let {show, hide} = arr[index];
    setTimeout(() => image.classList.add('open'), show);
    setTimeout(() => image.classList.remove('open'), hide);
});
</script>
</body>
</html>

III · #9 (**permalink**) 02.04.2024, 07:20

рони, Огромное Вам спасибо. Это то что надо. На другом форуме я так и не добился правильного результата на свои вопросы. Жаль, что тут на форуме нет оценки полученным ответам. Или я их просто не нашел?
Короче, для Вас и Nexus куча благодарностей. Живите долго и не болейте.

Форум

Справочник

Discord чат

Курсы javascript