#javascript #html
#javascript #HTML
Вопрос:
Я новичок, начинающий изучать кодирование. Я разработал эксперимент, связанный с нейробиологией, на веб-странице с 4 слоями веб-страницы. мой первый слой будет постоянным. Второй слой показывает разные изображения во время каждого раунда опроса. Третий и четвертый уровни — это вопросы, отображаемые через определенные промежутки времени и / или при нажатии кнопки отправить. Я хотел бы знать, как мне каждый раз отображать разные изображения. Точно, могу ли я сделать это с помощью цикла for !?
<html>
<head>
<Title> Experiment </title>
<link rel="stylesheet" type="text/css" href="displayfieldset.css">
</head>
<body>
<!-- Layer 1 of cross hair image -->
<div id="crosshair" style="background-color:black; position:absolute; width:100%; height:100%; z-index:1; align:center">
<img src="crosshair.jpg" width="1350px" height="750px" >
</div> <!-- Layer 1 closed -->
<!-- Layer 2 of Images -->
<div id="piclayer" style="position:absolute ;width:98%; height:98%; z- index:2; align:center; margin-left:0.5%; margin-top:0.5%">
<img id="images" src="image1.jpg" style="width:1325px; height:720px; display:none">
</div> <!-- Layer 2 closed -->
<!-- Layer 3 Question 1 -->
<div id="questionone" style="z-index:3; position:absolute; display:none; margin-left: 180px">
<fieldset name="field1_1" id="field1_1">
<form name ="problem1_1" id="problem1_1" >
<b> Identify the problem shown in this image. </b>
<br>
<br>
<input type="text" name="answer1_1" id="answer1_1" maxlength="30" style="width: 400px">
<br>
<br>
<input type="button" value="Submit" onclick="showdiv()" >
</form>
</fieldset>
</div>
<!-- Layer 4 Question 2 -->
<div id="questiontwo" style=" position: absolute; z-index:5; align:center; display:none; margin-left: 180px">
<fieldset name="field1_2" id="field1_2" style="position:relative; align:center">
<form name ="problem1_2" id="problem1_2" >
<b> Propose a solution to the problem. </b>
<br>
<br>
<input type="text" name="solution1_2" id="solution1_2" maxlength="30" style="height: 200px; width: 400px">
<br>
<br>
<br>
<input type="button" value="Submit" onclick="hidediv()" >
</form>
</fieldset>
</div>
<script>
function showdiv()
{
document.getElementById('questiontwo').style.display = "block";
document.getElementById('questionone').style.display = "none";
}
function hidediv()
{
document.getElementById('piclayer').style.display = 'none';
document.getElementById('questionone').style.display = 'none';
document.getElementById('questiontwo').style.display = 'none';
}
<!-- Time out for image -->
setTimeout
( function()
{
document.getElementById('images').style.display = 'block';
}
,6000
);
<!-- Timeout for first question -->
setTimeout
( function()
{
document.getElementById('questionone').style.display = 'block';
}
,12000
);
</script>
</body>
</html>
Комментарии:
1. Да, сначала присвойте им одинаковое имя класса, а затем получите их все по
document.getElementsByClassName. Этот метод дает вам список всех этих изображений, по которым вы можете перебирать и делать все, что захотите.2. Вы пробовали размещать разные теги <img> внутри разных тегов <div>?
Ответ №1:
Основываясь на вашем кодировании,
изображение «перекрестия», layer-1 всегда отображается с z-индексом: 1.
Изображения уровня 2 будут отображаться через 6 секунд после загрузки страницы с z-индексом: 2.
div уровня 3 отобразится через 12 секунд после загрузки страницы с z-индексом: 3.
На уровне 3 есть кнопка отправки. Если пользователь нажмет на кнопку отправки,
слой-4 будет отображен, а слой-3 будет скрыт.
Внутри Layer-4 снова есть кнопка отправки, если пользователь нажмет на эту кнопку, все изображения будут скрыты.
Итак, что вы хотите сделать?
Вы хотите отображать изображения из Layer-2 с помощью цикла? Если да, то вот примеры кодов:
var x = 0;
function myFunction(){
var Layer2Images = document.querySelectorAll("img.images");
if (x == Layer2Images.length)
x=0;
for (i = 0; i < Layer2Images.length; i ) {
Layer2Images[i].style.display = 'none';
}
Layer2Images[x].style.display = 'block';
x ;
}
setInterval(myFunction, 1000) <!-- Layer 2 of Images -->
<div id="piclayer" style="position:absolute ;width:98%; height:98%; z-index:2; align:center; margin-left:0.5%; margin-top:0.5%">
<img class="images" src="https://pixabay.com/static/uploads/photo/2012/05/29/00/43/car-49278_1280.jpg" style="width:400px;height:300px; display:none;">
<img class="images" src="https://static.pexels.com/photos/24353/pexels-photo-large.jpg" style="width:400px; height:300px; display:none;">
<img class="images" src="https://static.pexels.com/photos/16155/pexels-photo-large.jpg" style="width:400px; height:300px; display:none;">
</div> <!-- Layer 2 closed --> Комментарии:
1. Ваше понимание совершенно верно. Итак, на уровне 4 (z-индекс 4) снова есть кнопка отправки. Нажатие на это приведет к повторению события из слоев 2, 3 и 4, как это произошло ранее, но с другим изображением на уровне 2.
2. Я хотел бы знать назначение документа. querySelectorAll(«img.images»)
3. документ. querySelectorAll(«img.images») предназначен для получения всех html-элементов <img> с именем класса «images». Мы присвоили классу всех тегов images <img> имя «images». [<img class=»изображения ….» …..>]
4. Хорошо! И здесь изображения отображаются с интервалом в 1 секунду, если я не ошибаюсь. Не могли бы вы, пожалуйста, помочь в том, как сделать то же самое при нажатии кнопки «Отправить» в layer 4?
5. Если быть точным, изображение на уровне 2 должно изменяться только при нажатии кнопки отправки на уровне 4. Это не рассчитано по времени. Рассмотрим следующие шаги -> Черный экран слоя 1 отображается в течение 6 секунд -> Слой 2 с изображением 1 отображается в течение 6 секунд -> Вопрос 1 появляется в слое 3
Ответ №2:
Проверьте document.querySelector и document.querySelectorAll . С их помощью вы можете настроить таргетинг на один узел DOM с помощью селектора запросов CSS или вы можете настроить таргетинг на несколько DOM одновременно, а затем выполнить цикл над ними в цикле for of, преобразовав узлы в массив с помощью Array.from .
Полный рабочий пример
let i = 0
// Grab all the layers and read them into an array so we can iterate them.
let layers = Array.from(document.querySelectorAll('img.layer'))
const nextLayer = () => {
// increment i and compare incremented value, if greater than 3, reset to first layer.
if( i > 3)
i = 1
// iterate all layers and set their CSS display property to none.
layers.forEach((x) => { x.style.display = 'none' })
// select the single layer we are currently on and set its css display to block.
document.querySelector(`img.layer_${i}`).style.display = 'block'
}
// show first layer
nextLayer()
// show next layer every 2 seconds
setInterval(nextLayer, 2000) <img class="layer layer_1" src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" />
<img class="layer layer_2" src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg" />
<img class="layer layer_3" src="http://livewallpaper.info/wp-content/uploads/2015/12/Desktop-Cute-Wallpapers-HD-1920x1080-1.jpg" />