javascript中的随机图像生成器

我正在学习JavaScript我想做这个练习我想生成并显示随机图像一个接一个间隔为1秒，一行4张图像总共3行，12张图像一旦这个循环完成，它必须用不同的图像序列再次重复下面是我目前为止写的代码但它一次生成所有图像

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Image Generator</title>
<script src="main.js"></script>
</head>
<body onload="imageTimeOut();" style="max-width: 400px;">
<h2 style="color: blue">Random Image Generator</h2>
<br>
<span id="result"> </span>   
</body>  
</html>

JavaScript


var imgTimer;
function imageTimeOut(){
imgTimer = setTimeout(getRandomImage, 1000);   
}
function getRandomImage() {
//declare an array to store the images
var randomImage = new Array();
//insert the URL of images in array
randomImage[0] = "images/1.png";
randomImage[1] = "images/2.png";
randomImage[2] = "images/3.png";
randomImage[3] = "images/4.png";
randomImage[4] = "images/5.png";
randomImage[5] = "images/6.png";
randomImage[6] = "images/7.png";
randomImage[7] = "images/8.png";
randomImage[8] = "images/9.png";
randomImage[9] = "images/10.png";
randomImage[10] = "images/11.png";
randomImage[11] = "images/12.png";
for (let i = 0; i < 12; i++) {
//generate a number and provide to the image to generate randomly
var number = Math.floor(Math.random() * randomImage.length);
//print the images generated by a random number
document.getElementById("result").innerHTML += '<img src="' + randomImage[number] + '" style="width:100px" />';
}
}

我想把这个分开一点。

第一部分:布局

3行4图像每一行,我会使用CSS网格。

你可以声明display: grid;<span id="result">元素。这将为你想要显示的内容声明一个网格容器。

然后你也可以声明grid-template-columns: repeat(4, 1fr)得到4甚至响应列。

这将确保你得到一个3x4的网格为你的12张图片。

如果您想在网格中的图像之间设置一些空间，grid-gap是很好的选择。下面是一个示例:

#result {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
}

第2部分:随机化图像列表

你可以做一个小的实用洗牌函数(例如Fisher-Yates算法)。

/**
* @description
* shuffles an array of strings
* with the Fisher-Yates algorithm
*
* @param {string[]} array - array of image sources
* @returns {string[]} - shuffled array copy of image sources
*/
const shuffleArray = (array) => {
const _arrCopy = [...array];
for (let i = _arrCopy.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[_arrCopy[i], _arrCopy[j]] = [_arrCopy[j], _arrCopy[i]];
}
return _arrCopy;
};

当你准备重置列表时，你可以将图像列表传递给这个函数。

第3部分:创建带有定时器的DOM函数

请参阅下面的可运行代码片段。

// START: dummy data -------------------------------
const base = "https://images.dog.ceo/breeds";
const twelveImages = [
`${base}/terrier-australian/n02096294_3704.jpg`,
`${base}/terrier-australian/n02096294_8531.jpg`,
`${base}/terrier-bedlington/n02093647_930.jpg`,
`${base}/terrier-border/n02093754_1722.jpg`,
`${base}/terrier-border/n02093754_6082.jpg`,
`${base}/terrier-cairn/n02096177_1569.jpg`,
`${base}/terrier-cairn/n02096177_2703.jpg`,
`${base}/terrier-cairn/n02096177_2913.jpg`,
`${base}/terrier-cairn/n02096177_9528.jpg`,
`${base}/terrier-dandie/n02096437_290.jpg`,
`${base}/beagle/1271553739_Milo.jpg`,
`${base}/cotondetulear/100_2013.jpg`
];
const wikiBase = 'https://upload.wikimedia.org'
const filepath = 'wikipedia/commons/c/ce/Sound-of-dog.ogg';
const audio = `${wikiBase}/${filepath}`;
const bark = () => {
new Audio(audio).play();
}
// END: dummy data ---------------------------------
/**
* @description
* shuffles an array of strings
* with the Fisher-Yates algorithm
*
* @param {string[]} array - array of image sources
* @returns {string[]} - shuffled array copy of image sources
*/
const shuffleArray = (array) => {
const _arrCopy = [...array];
for (let i = _arrCopy.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[_arrCopy[i], _arrCopy[j]] = [_arrCopy[j], _arrCopy[i]];
}
return _arrCopy;
};
// --------------------------------------------
/**
* @description
* creates a new image element and appends it inside the given wrapper
*
* @param {HTMLElement} wrapper  - wrapper to append images to
* @param {string}      imageSrc - image source to use
* @returns {void}
*/
const appendNewImage = (wrapper, imageSrc) => {
// create image element
const img = document.createElement("img");
// set image source
img.src = imageSrc;
// add woof sound
img.onclick = bark;
// append image to wrapper
wrapper.append(img);
};

// run image generator program
const run = () => {
let idx = 0;
let images = shuffleArray(twelveImages);
setInterval(() => {
// select result wrapper
const wrapper = document.getElementById("result");
// if we've reached the end, do a reset
if (idx === images.length) {
// remove images from wrapper
wrapper.innerHTML = "";
// reshuffle images
images = shuffleArray(twelveImages);
// reset counter index
idx = 0;
}
appendNewImage(wrapper, images[idx]);
// increment image index
idx += 1;
}, 1000);
};
// start it
run();

body {
padding: 0px 40px;
font-family: Helvetica, Arial, sans-serif;
}
#result {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}

/*
NOTE: 
This is outside the scope of your question,
but please note that this image CSS is just
dummy CSS for this StackOverflow snippet.

You will need to adjust this image CSS 
to account for different viewports 
and whatever aspect ratios your images have.
Ideally, you can use responsive images.
SEE: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
*/
img {
width: 100%;
height: 80px;
object-fit: cover;
box-shadow: 2px 1px 1px #eee;
transition: transform 250ms, box-shadow 250ms;
border-radius: 5px;
cursor: pointer;
}
img:hover {
transform: scale(1.05);
}
img:active {
box-shadow: 0px 0px 0px #eee;
}

<span id="result"></span>

很难理解你到底想要完成什么。也许你真的应该洗牌你的数组，并使用setInterval:

//<![CDATA[
/* js/external.js */
let doc, htm, bod, nav, M, I, mobile, S, Q, hC, aC, rC, tC, shuffle; // for use on other loads
addEventListener('load', ()=>{
doc = document; htm = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id); mobile = /Mobi/i.test(nav.userAgent);
S = (selector, within)=>{
let w = within || doc;
return w.querySelector(selector);
}
Q = (selector, within)=>{
let w = within || doc;
return w.querySelectorAll(selector);
}
hC = (node, className)=>{
return node.classList.contains(className);
}
aC = (node, ...classNames)=>{
node.classList.add(...classNames);
return aC;
}
rC = (node, ...classNames)=>{
node.classList.remove(...classNames);
return rC;
}
tC = (node, className)=>{
node.classList.toggle(className);
return tC;
}
shuffle = array=>{
let a = array.slice(), i = a.length, n, h;
while(i){
n = Math.floor(Math.random()*i--); h = a[i]; a[i] = a[n]; a[n] = h;
}
return a;
}
// tiny library above - below can be put on another page using a load Event (except // end load line);
function fourImgsEvery(outputNode, imgArray, often = 1000){
const a = shuffle(imgArray), img0 = M('img'), img1 = M('img'), img2 = M('img'), img3 = M('img'); // shuffle array and make images
outputNode.appendChild(img0); outputNode.appendChild(img1); outputNode.appendChild(img2); outputNode.appendChild(img3);
let i = 0, l = imgArray.length;
return setInterval(()=>{ // returns interval so you can clear it
if(i === l)i = 0;
img0.src = a[i++]; img1.src = a[i++]; img2.src = a[i++]; img3.src = a[i++];
}, often);
}
const images = ['https://i.stack.imgur.com/tGgv6.jpg?s=128&g=1', 'https://www.gravatar.com/avatar/ee6e12042dc31b1ef27471482f9ff91f?s=96&d=identicon&r=PG&f=1',
'https://i.stack.imgur.com/R5UKi.jpg?s=128&g=1', 'https://i.stack.imgur.com/xduoU.png?s=96&g=1', 'https://www.gravatar.com/avatar/0555bd0deb416a320a0069abef08078a?s=128&d=identicon&r=PG&f=1', 'https://www.gravatar.com/avatar/f00013ceab8fb1928885c5c172fbfd4a?s=96&d=identicon&r=PG', 'https://i.stack.imgur.com/hMDvl.jpg?s=128&g=1', 'https://www.gravatar.com/avatar/6605deca5924e84df1a4847f607b87c6?s=96&d=identicon&r=PG', 'https://i.stack.imgur.com/IFOp5.jpg?s=96&g=1', 'https://i.stack.imgur.com/I4fiW.jpg?s=96&g=1', 'https://www.gravatar.com/avatar/976f07be84907aad663ce8c1c51cf5c4?s=96&d=identicon&r=PG', 'https://i.stack.imgur.com/4HovX.jpg?s=128&g=1'];
const out = I('output');
fourImgsEvery(out, images);
}); // end load
//]]>

/* css/external.css */
*{
box-sizing:border-box;
}

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
<title>Random Images</title>
<link type='text/css' rel='stylesheet' href='css/external.css' />
<script src='js/external.js'></script>
</head>
<body>
<div id='output'></div>
</body>
</html>

相关内容

最新更新

热门标签：