html - Generating random image url in javascript - Stack Overflow

admin管理员组

文章数量:1391947

I am generating random numbers and appending with the previous variable and trying to get the value of images. but also the random number only generated. How can I do this ?

Here's my code

var img1 = '.jpg';
var img2= '.jpg';
var img3 = '.jpg';
var img4 = '.jpg';
var img5 = '.jpg';
var img6 = '.jpg';
var img7 = '.jpg';
var img8 = '.jpg';
var img9 = '.jpg';
var img10 = '.jpg';
var no = Math.floor(Math.random() * 6) + 1
var img = 'img'+no;
console.log(img)

I prefer only javascript.

I am generating random numbers and appending with the previous variable and trying to get the value of images. but also the random number only generated. How can I do this ?

Here's my code

var img1 = 'http://i.imgur./8olCb1Qb.jpg';
var img2= 'http://i.imgur./usJWgL7b.jpg';
var img3 = 'http://i.imgur./kxsLXb8b.jpg';
var img4 = 'http://i.imgur./XQbcjvUb.jpg';
var img5 = 'http://i.imgur./j3CVSSMb.jpg';
var img6 = 'http://i.imgur./BQNvBVib.jpg';
var img7 = 'http://i.imgur./DZq0ORlb.jpg';
var img8 = 'http://i.imgur./t73Tvlqb.jpg';
var img9 = 'http://i.imgur./Y8iFltdb.jpg';
var img10 = 'http://i.imgur./u3sBUMjb.jpg';
var no = Math.floor(Math.random() * 6) + 1
var img = 'img'+no;
console.log(img)

I prefer only javascript.

• javascript
• html

Share Improve this question Follow edited Dec 2, 2016 at 12:12 Vikrant 5,0461818 gold badges5151 silver badges7575 bronze badges asked Dec 2, 2016 at 12:07 SA__SA__ 43733 gold badges77 silver badges1313 bronze badges 2

• 7 Why not use an array? Just get the random index from it and you're done. For the record you can do console.log(window[img]) but I don't think that's the way to go. – VLAZ Commented Dec 2, 2016 at 12:08
• Can you please explain a bit.. – SA__ Commented Dec 2, 2016 at 12:13

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

I think you want to select random images

var images = [
    'http://i.imgur./8olCb1Qb.jpg',
    'http://i.imgur./usJWgL7b.jpg',
    'http://i.imgur./kxsLXb8b.jpg',
    'http://i.imgur./XQbcjvUb.jpg',
    'http://i.imgur./j3CVSSMb.jpg',
    'http://i.imgur./BQNvBVib.jpg',
    'http://i.imgur./DZq0ORlb.jpg',
    'http://i.imgur./t73Tvlqb.jpg',
    'http://i.imgur./Y8iFltdb.jpg',
    'http://i.imgur./u3sBUMjb.jpg'
];
var random = images[Math.floor(Math.random() * images.length)];

well. arrays are fun. you should use them.

var images = ["8olCb1Qb", "usJWgL7b", "kxsLXb8b", "XQbcjvUb", "j3CVSSMb", "BQNvBVib", "DZq0ORlb", "t73Tvlqb", "Y8iFltdb", "u3sBUMjb"];
var randomPick = images[Math.random() * images.length | 0];
var url = "http://i.imgur./" + randomPick + ".jpg";
document.body.appendChild(new Image()).src = url;

As suggested by others, dynamic variable names are kind of ugly. You should use an array.

var imgs = ['a', 'b', 'c'];
var randomImg = imgs[Math.floor(Math.random() * imgs.length);

If you really want to use dynamic names, you should attach them to an object, not just free standing variables.

var imgs = {img1: 'a', img2: 'b', img3: 'c'};
var no = Math.floor(Math.random() * 3) + 1:
var img = imgs['img' + no];

Put your images in a div named div divImages.

var img=$('#divImages').children().eq(no);

And if you don't want using jquery the javascript is:

var img = document.getElementById('#divImages').children[no];

if you don't want to put your images in an array, you can call them like this:

var img1 = 'http://i.imgur./8olCb1Qb.jpg';
var img2= 'http://i.imgur./usJWgL7b.jpg';
var img3 = 'http://i.imgur./kxsLXb8b.jpg';
var img4 = 'http://i.imgur./XQbcjvUb.jpg';
var img5 = 'http://i.imgur./j3CVSSMb.jpg';
var img6 = 'http://i.imgur./BQNvBVib.jpg';
var img7 = 'http://i.imgur./DZq0ORlb.jpg';
var img8 = 'http://i.imgur./t73Tvlqb.jpg';
var img9 = 'http://i.imgur./Y8iFltdb.jpg';
var img10 = 'http://i.imgur./u3sBUMjb.jpg';
var no = Math.floor(Math.random() * 6) + 1
var img = 'img'+no;
console.log(window[img])
// or 
console.log(this[img])

本文标签： htmlGenerating random image url in javascriptStack Overflow