#javascript #random
#javascript #Случайный
Вопрос:
Я полный новичок в JavaScript с некоторым опытом работы с html и css. В любом случае я пытаюсь получать два случайных изображения каждый раз, когда пользователь нажимает на одно из двух изображений. Я успешно реализовал код. Однако изображения продолжают повторяться. Я потратил целый час на поиски способа сделать это, и я нашел, но у меня это не сработало. Это мой код и заранее благодарю:
<!DOCTYPE html>
<html>
<head>
<title>My awesome website</title>
<link rel="stylesheet" href="styles.css">
<script>
function getRandomImage() {
var images = new Array("1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg", "10.jpg", "11.jpg", "12.jpg");
var randomNum1 = Math.floor(Math.random() * images.length);
var randomNum2 = Math.floor(Math.random() * images.length);
if (randomNum1 == randomNum2) {
var randomNum2 = Math.floor(Math.random() * images.length);
}
document.getElementById("firstPic").src = images[randomNum1]
document.getElementById("secondPic").src = images[randomNum2]
}
</script>
</head>
<body>
<div class="title">
My awesome website
</div>
<pre><h1><center><img src="1.jpg" width="300px" height="300px" id="firstPic" onclick="getRandomImage()" /> or <img src="2.jpg" width="300px" height="300px" id="secondPic" onclick="getRandomImage()" /></center></h1></pre>
</body>
Редактировать: я пытался использовать этот метод, но, похоже, я ошибаюсь
<script>
var images = new Array("1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg", "10.jpg", "11.jpg", "12.jpg");
var usedImgs = new Array();
function getRandomImage() {
var randomNum1 = Math.floor(Math.random() * images.length);
var randomNum2 = Math.floor(Math.random() * images.length);
while (randomNum1 == randomNum2) {
randomNum2 = Math.floor(Math.random() * images.length);
}
if (!usedImgs) {
document.getElementById("firstPic").src = images[randomNum1]
document.getElementById("secondPic").src = images[randomNum2]
usedImgs.push(randomNum1);
usedImgs.push(randomNum2);
}
}
</script>
Комментарии:
1. Что вы подразумеваете под «они продолжают повторяться»? Вы имеете в виду, что не хотите получать одно и то же изображение дважды подряд?
2. Что должно произойти, когда все изображения будут завершены?
3. Я имею в виду, я не хочу, чтобы изображение отображалось более одного раза
4. Мой вопрос о том, как предотвратить повторение изображений, а не идей о том, что произойдет, когда они завершатся
5. ну, этот вопрос заключался в том, чтобы понять, нужно ли вам зацикливать свой набор изображений, когда все они будут показаны
Ответ №1:
Вы можете создать своего рода рандомизатор и перегруппировщик
// Group your set of images randomly
const groupRandom = ([...arr]) => {
// Suffle array method
const shuffle = (a) => {
for(let i = a.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i 1));
[a[i], a[j]] = [a[j], a[i]];
}
return a;
}
// Re-group
const regroup = ([...arr]) => {
let newArr = [], temp = [];
for(let i = 0; i < arr.length; i ) {
temp.push(arr[i]);
if(temp.length === 2) newArr.push(temp), temp = [];
}
return newArr;
}
// Do suffle and regroup
arr = shuffle(arr);
arr = regroup(arr);
return arr;
}
// test
const images = groupRandom(["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg", "10.jpg", "11.jpg", "12.jpg"]);
// Log
console.log(images); Затем вы можете реализовать это в своем примере
<!DOCTYPE html>
<html>
<head>
<title>My awesome website</title>
<link rel="stylesheet" href="styles.css">
<script>
var groupRandom = function(arr) {
// Suffle array method
var shuffle = function(arr) {
for(var i = arr.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i 1));
[arr[i], arr[j]] = [arr[j], arr[i]];
}
return arr;
}
// Re-group
var regroup = function(arr) {
var newArr = [], temp = [];
for(var i = 0; i < arr.length; i ) {
temp.push(arr[i]);
if(temp.length === 2) newArr.push(temp), temp = [];
}
return newArr;
}
// Do suffle and regroup
var arrSuffeled = shuffle(arr);
var arrRegrouped = regroup(arrSuffeled);
return arrRegrouped;
};
var randomImageArray = groupRandom([
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSCm-ZRY7tQpxNyZAY1DoUyqcPDjLxdijN2OAamp;usqp=CAU",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSz1cnemcZpezXe7VeDdnsuwNsdjj-wsqW3mAamp;usqp=CAU",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSBZxg_1SjUlIOxOt0kjK3VbzzNeV_t1pXM6gamp;usqp=CAU",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT8i7Jw88bGLRDxgYVrcgG7H8J3bHS7eaoYgAamp;usqp=CAU",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRQG43SPw7__lb5kq97jIigDqeEU5RFzZPbcgamp;usqp=CAU",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRi6VT0-3esZzzidJwNk-xFuWr7NDKn0JxBKQamp;usqp=CAU",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSTavBZRe2R1EJcb29qjwhHBcuVz4k0KECebAamp;usqp=CAU",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSiQT3AF0XNgNDxk6lOS40O9NVAaMMu_Rf7Mwamp;usqp=CAU",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRhxxIS6QDXeSNZIS5ZicwMrENASa6kYJ0DgQamp;usqp=CAU",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQuxP2c3L7G6YnNzHwmn7K8W4UWUkcnh9RNMwamp;usqp=CAU",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBJ3DXGZI-62WJ9I2AEDM_EJKC9yRGDMhJJQamp;usqp=CAU",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6HwnfnreAmYein1ZyMq0_G1rXGiaCBKvhdQamp;usqp=CAU"
]);
function getRandomImage() {
// Check if image array not yet 0
if(randomImageArray.length === 0) {
alert('Array with images exhausted!');
return false;
}
// Pop new group of images from array
var newGroup = randomImageArray.pop();
// Paste new images to img tags
document.getElementById("firstPic").src = newGroup[0];
document.getElementById("secondPic").src = newGroup[1];
}
// Run JS code when page (DOM) has been loaded
document.addEventListener("DOMContentLoaded", function() {
getRandomImage();
});
</script>
</head>
<body>
<div class="title">
My awesome website
</div>
<pre><h1><center>
<img src="" width="100px" height="100px" id="firstPic" onclick="getRandomImage()" /> or <img src="" width="100px" height="100px" id="secondPic" onclick="getRandomImage()" />
</center></h1></pre>
</body> Комментарии:
1. Чувак, я сказал, что я экстремальный новичок. Любой простой способ, если можно
2. Обновил мой ответ реализацией в вашем примере
3. Хорошо, я понимаю, почему это не работает на вашей стороне… Все работает — попробуйте нажать «Запустить фрагмент кода» под моим вторым ответом, там вы можете увидеть и протестировать рабочий пример… Я добавил несколько демонстрационных онлайн-фотографий
4. Еще один вопрос, если можно. Я хочу удалить заполнитель, я имею в виду src изображения, но все равно получаю случайное изображение, как только я открываю страницу, и еще одна вещь, когда я нахожусь на последних двух фотографиях, я не могу нажать ни на одну из них, если вы можете отредактировать свой код, поэтому, как только все фотографии закончены, я получаю предупреждение или что-то еще таким образом, что я могу нажать на последние две фотографии
5. «Мой вопрос о том, как предотвратить повторение изображений, а не идей о том, что произойдет, когда они завершатся» (C) NabilTheCoder … 😉 В любом случае, я обновил ответ, проверьте это
Ответ №2:
Проблема с
Вы имеете в виду, что все еще возможно получить 2 одинаковых изображения одновременно? Это потому, что вы повторяете попытку только один раз.
Измените это:
if (randomNum1 == randomNum2) {
var randomNum2 = Math.floor(Math.random() * images.length);
}
Какое-то время числа остаются теми же, продолжайте пытаться получить новое случайное число:
while(randomNum1 == randomNum2) {
randomNum2 = Math.floor(Math.random() * images.length);
}
Проблема B
var images = new Array("1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg", "10.jpg", "11.jpg", "12.jpg");
var imagesToShow = [].concat(images); // Duplcate array so we don't update the original array.
function getRandomImage() {
var randomNum1 = Math.floor(Math.random() * imagesToShow.length);
var randomNum2 = Math.floor(Math.random() * imagesToShow.length);
while(randomNum1 == randomNum2) {
randomNum2 = Math.floor(Math.random() * imagesToShow.length);
}
document.getElementById("firstPic").src = imagesToShow[randomNum1];
document.getElementById("secondPic").src = imagesToShow[randomNum2];
// Now remove the 2 items from the array
// the way below doesn't use splice becuase you have 2 indexes and that will cause issues aswell
imagesToShow[randomNum1] = null;
imagesToShow[randomNum2] = null;
imagesToShow = imagesToShow.filter((it) => !!it); // Filter out the null values.
// refill the array when we are out of images.
if(imagesToShow.length < 2){
imagesToShow = [].concat(images);
}
}
Комментарии:
1. Это одна проблема, да, но вы можете прочитать проблему, которую они хотят решить, в комментариях.
2. Нет, это работает более чем идеально, но мой вопрос в том, чтобы никогда не повторять одно и то же изображение дважды
3. Я добавил новое обновление. Показывать изображения только один раз. Но сбросьте массив, когда больше не останется изображений.
Ответ №3:
Просто измените одну строку в своем коде и сделайте функцию в виде стрелки, как показано ниже. Пожалуйста, проверьте приведенный ниже код. Я надеюсь, что это будет полезно.
<script>
let getRandomImage = () => {
var images = new Array(
"1.jpg",
"2.jpg",
"3.jpg",
"4.jpg",
"5.jpg",
"6.jpg",
"7.jpg",
"8.jpg",
"9.jpg",
"10.jpg",
"11.jpg",
"12.jpg"
);
var randomNum1 = Math.floor(Math.random() * images.length);
var randomNum2 = Math.floor(Math.random() * images.length);
if (randomNum1 == randomNum2) {
return getRandomImage();
}
document.getElementById("firstPic").src = images[randomNum1];
document.getElementById("secondPic").src = images[randomNum2];
};
</script>