javascript random image generator
Question
I want to make a container with 25 Images which are random generated out of 72 Images and i dont want the container have the same image twice. This is the code i have made. Thanks for help!
Here is the Project:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<style>
*{padding: 0;margin: 0;}
.lotto{width: 600px;height: 600px;}
.bild{height: 96px;width: 96px;padding-top: 10px;padding-left: 10px;padding-bottom: 10px;padding-right: 10px;}
@media screen and (max-width:600px){.lotto{width: 400px;height: 400px;}.bild{height: 64px;width: 64px;padding-top: 6px;padding-left: 6px;padding-bottom: 6px;padding-right: 6px;}}
@media screen and (max-width:400px){.lotto{width: 300px;height: 300px;}.bild{height: 48px;width: 48px;padding-top: 4px;padding-left: 4px;padding-bottom: 4px;padding-right: 4px;}}
</style>
</head>
<body>
<div class="Lotto">
<script type="text/javascript">
function Emoji(){
var myimages=new Array()
myimages[1]="img_1.png"
myimages[2]="img_2.png"
myimages[3]="img_3.png"
myimages[4]="img_4.png"
myimages[5]="img_5.png"
myimages[6]="img_6.png"
myimages[7]="img_7.png"
myimages[8]="img_8.png"
myimages[9]="img_9.png"
myimages[10]="img_10.png"
myimages[11]="img_11.png"
myimages[12]="img_12.png"
myimages[13]="img_13.png"
myimages[14]="img_14.png"
myimages[15]="img_15.png"
myimages[16]="img_16.png"
myimages[17]="img_17.png"
myimages[18]="img_18.png"
myimages[19]="img_19.png"
myimages[20]="img_20.png"
myimages[21]="img_21.png"
myimages[22]="img_22.png"
var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<a href="#"><img class="bild" src="'+myimages[ry]+'" border=0></a>')
}
</script>
<script type="text/javascript">Emoji()</script>
<script type="text/javascript">Emoji()</script>
<script type="text/javascript">Emoji()</script>
<script type="text/javascript">Emoji()</script>
<script type="text/javascript">Emoji()</script>
<script type="text/javascript">Emoji()</script>
<script type="text/javascript">Emoji()</script>
<script type="text/javascript">Emoji()</script>
<script type="text/javascript">Emoji()</script>
<script type="text/javascript">Emoji()</script>
<script type="text/javascript">Emoji()</script>
<script type="text/javascript">Emoji()</script>
<script type="text/javascript">Emoji()</script>
<script type="text/javascript">Emoji()</script>
<script type="text/javascript">Emoji()</script>
<script type="text/javascript">Emoji()</script>
<script type="text/javascript">Emoji()</script>
<script type="text/javascript">Emoji()</script>
<script type="text/javascript">Emoji()</script>
<script type="text/javascript">Emoji()</script>
<script type="text/javascript">Emoji()</script>
<script type="text/javascript">Emoji()</script>
<script type="text/javascript">Emoji()</script>
<script type="text/javascript">Emoji()</script>
<script type="text/javascript">Emoji()</script>
</div>
</body>
</html>
2 answers
solution1
1 ACCPTED 2019-03-17 20:25:44
I think a better way to do what you want, is to return a shuffle array and to insert in the DOM element in the emoji function. This is a function to shuffle an array.
var shuffle = function (array) {
var currentIndex = array.length;
var temporaryValue, randomIndex;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
};
You can use it that way : shuffle(myimages);
EDIT :
What I mean is that you can put everything in two functions.
The first is the shuffle, and the second is "emoji" one.
You could do something like:
function Emoji(){
var myimages=new Array()
for(i=0; i < 23;i++) {
myimages[i]="img_" + i +".png";
}
shuffle(myimages);
//And then add it in the DOM element
let lotto = document.getElementsByClassName('Lotto');
for(j=0; j < 10; j++) {
let a = document.createElement('a');
let img = document.createElement('img');
img.src = myimages[j];
img.classList.add("bild");
a.appendChild(img);
lotto[0].appendChild(a);
}
}
With i for the number of img in total, and j for the number that you want !
SOURCE :
https://gomakethings.com/how-to-shuffle-an-array-with-vanilla-js/ https://www.w3schools.com/jsref/met_node_appendchild.asp
solution2
1 2019-03-17 21:05:51
I used this way in my project. Create a shuffle function:
function shuffle(arr) {
for (var i = arr.length - 1; i > 0; i--) {
var m = Math.floor(Math.random() * (i + 1));
[arr[i], arr[m]] = [arr[m], arr[i]];
}
}
After i create a array with 72 numbers like this:
var ar = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27, // to 72];
After shuffle ar :
shuffle(ar);
Then to show random image create variable for each 22 images
var img0 = "img_" + ar[0] + ".png";
var img1 = "img_" + ar[1] + ".png";
And img0 and img1 are random images from your list
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.