Название может показаться немного запутанным, поскольку я пытался сделать его максимально коротким и простым, но это трудно сделать, поскольку проблема не так проста. В настоящее время я делаю веб-сайт с использованием блокнота ++, поэтому я использую javascript css и php.
. Я хочу, чтобы при нажатии кнопки генератор случайных чисел выбирал число, которое не было выбрано раньше, скажем, между 0-10. затем он возвращает изображение ['случайное число'], где image [] - мой массив изображений, и отображает его в пункте 1 (p1). если я нажму еще раз, он собирается удалить предыдущее изображение и поставить новое. Я сделал это.
Теперь я хочу иметь специальные изображения, например, image [3] и image [4], поэтому, когда генератор случайных чисел выбирает 3 или 4, я хочу, чтобы это изображение отображалось рядом с другие изображения.
Позволяет имитировать сценарий, отображается изображение [1] (не специальное). Затем отображается изображение 2 (не специальное), а изображение 1 удаляется. затем изображение 3 (специальное) отображается рядом с изображением 2, не удаляя его. Но затем отображается изображение 5 (не специальное), и оно удаляет изображение 2 (и не удаляет изображение 3, которое является специальным изображением). И если выбрано изображение 4 (специальное), то изображение 3 (специальное) удаляется, новое изображение 5 (которое не было специальным) остается, а рядом с ним отображается изображение 4. И если он продолжает работать, он просто заменяет не специальные изображения на не специальные, а специальные только на специальные.
Вот мой код:
часть css ( ничего важного, это для стилизации кнопки)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
body{
background-image: url("pic3.jpg")
}
.button1{
position: absolute;
top: 60%;
left: 80%;
transform: translate(-50%, -50%);
background: white;
color: #f56c42;
font-size: 22px;
padding: 10px 15px;
border: none;
cursor: pointer;
border-radius: 30px;
text-align: center;
}
</style>
</head>
часть php (инициализация кнопки и пи c 1, которая отображается в начале, и когда вы нажимаете следующую карту, она заменяется на одну изображений в массиве images []
часть javascript:
<script>
var g=0; //counter how many times the function has been called
var arr=[]; //empty array i fill with the random numbers so i can remove repeated ones
function f1()
{
var theImages = [{ //array with the images
src: "img1.png",
width: "500",
height: "700",
}, {
src: "img2.png",
width: "500",
height: "700",
}, {
src: "img3.png",
width: "500",
height: "700",
}, {
src: "img4.png",
width: "500",
height: "700",
},
{
src: "img5.png",
width: "500",
height: "700",
}, {
src: "img6.png",
width: "500",
height: "700",
}, {
src: "img7.png",
width: "500",
height: "700",
}, {
src: "img8.png",
width: "500",
height: "700",
}];
var endCard=[{
<!-- array for the end card,
i know this is not needed but this is how it worked so
i saved some headaches for me -->
src: "img0.png",
width: "500",
height: "700",
}];
var endcardbuffer= [];
<!--end card buffer ( im not sure i need a buffer but
it works so i dont touch it, i had some problems that said
"not an object" so with this i dont have that -->
endcardbuffer[0] = new Image();
endcardbuffer[0].src = endCard[0].src;
endcardbuffer[0].width = endCard[0].width;
endcardbuffer[0].height = endCard[0].height;
var i;
var preBuffer = [];
for (i = 0;i< theImages.length;i++) { //sets up the images in preBuffer
preBuffer[i] = new Image();
preBuffer[i].src = theImages[i].src;
preBuffer[i].width = theImages[i].width;
preBuffer[i].height = theImages[i].height;
}
function getRandomInt() { //returns an image(preBuffer['random num'] or the endcard
g++; //everything except the imn=math... line is for the removal of repeated numbers
var j=0;
var a;
while(j>=0)
{
imn = Math.floor(Math.random() * (0 - preBuffer.length )) + preBuffer.length;
a = imn;
arr[g-1]=a;
j=0;
for(i=0;i<theImages.length;i++)
{
if(arr[i] === a)
{j++;}
}
if(g>theImages.length)
{ return endcardbuffer[0]; }
if(j<2)
break;
}
return preBuffer[imn];
}
var newImage=getRandomInt();
var images = document.getElementsByTagName('img');
var l = images.length;
for (i = 0; i < l; i++) { // remove the previous images
images[0].parentNode.removeChild(images[0]);
}
document.getElementById("p1").appendChild(newImage); // display the image
}
}
</script>
</body>
</html>
это мой код. Сейчас он показывает до 8 изображений, когда последнее изображение показывается каждый раз, когда вы нажимаете кнопку, оно дает вам конечную карту.
что я пробовал: в getRandomInt () я добавил эту строку
if (a==3 || a==4)
{
return 0;
}
, которая вернет мне 0 если это специальное число
, то все это ниже добавлено после функции getRandomInt () {}
var x=getRandomInt();
var newImage;
if(x==0){
if(g%2==0)
<!-- this is not perfect and i want to have more than 2 special images,
with this approach i can only have 2 (when my counter is even and when its odd),
i can figure this out but i dont know how to not remove the old image,
which is my problem so if it works with 2 i will figure out how to work with more) -->
{newImage = preBuffer[3];}
else{newImage=preBuffer[4];}
var images = document.getElementsByTagName('img');
var l = images.length;
document.getElementById("p2").appendChild(newImage); // display the image
}
else{
newImage=x;
var images = document.getElementsByTagName('img');
var l = images.length;
for (i = 0; i < l; i++) { // remove the previous images
images[0].parentNode.removeChild(images[0]);
}
document.getElementById("p1").appendChild(newImage); // display the image
}
}
проблема, которую я считаю, связана с appendChild. Я удаляю специальные изображения как хорошо, когда я нажимаю кнопку. Я попробовал несколько других вер ионы меняли некоторые вещи, но большинство из них сказали «не объект», когда оно вернуло особое изображение.
Я был бы рад, если кто-то может помочь. С уважением!