如何解决在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>
编辑:我尝试使用此方法,但是idk我错了
<script>
var images = new Array("1.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>
解决方法
问题A
您的意思是仍然可以一次获得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);
}
}
,
只需在代码上更改一行,然后将功能变为箭头功能,如下所示。请检查以下代码。希望对您有所帮助。
<script>
let getRandomImage = () => {
var images = new Array(
"1.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>
,
您可以创建随机数和重新分组器
// 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","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%3AANd9GcSCm-ZRY7tQpxNyZAY1DoUyqcPDjLxdijN2OA&usqp=CAU","https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSz1cnemcZpezXe7VeDdnsuwNsdjj-wsqW3mA&usqp=CAU","https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSBZxg_1SjUlIOxOt0kjK3VbzzNeV_t1pXM6g&usqp=CAU","https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcT8i7Jw88bGLRDxgYVrcgG7H8J3bHS7eaoYgA&usqp=CAU","https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRQG43SPw7__lb5kq97jIigDqeEU5RFzZPbcg&usqp=CAU","https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRi6VT0-3esZzzidJwNk-xFuWr7NDKn0JxBKQ&usqp=CAU","https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSTavBZRe2R1EJcb29qjwhHBcuVz4k0KECebA&usqp=CAU","https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSiQT3AF0XNgNDxk6lOS40O9NVAaMMu_Rf7Mw&usqp=CAU","https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRhxxIS6QDXeSNZIS5ZicwMrENASa6kYJ0DgQ&usqp=CAU","https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQuxP2c3L7G6YnNzHwmn7K8W4UWUkcnh9RNMw&usqp=CAU","https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRBJ3DXGZI-62WJ9I2AEDM_EJKC9yRGDMhJJQ&usqp=CAU","https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ6HwnfnreAmYein1ZyMq0_G1rXGiaCBKvhdQ&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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。