求助：想用 JavaScript 达到一个随机图片显示的效果，但却出了问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 5009 天前的主题，其中的信息可能已经有所发展或是发生改变。

我没学过javascript，只是需要的时候自己引用下代码，然后三三两两地自学。参考了网上的一些东西，可是放在自己这里，却出了问题。

问题有二：
一：currIndex 总是多出一个值。例如，有三幅图片，可是 currIndex 的值却可能是 0,1,2,3 四个值，当 currIndex=3 时，无图片。
二： document.images.bg.src="+ imgs[currIndex] +"; 这一行，把 + imgs[currIndex] + 替换为一幅图片的绝对地址时，可用，但 + imgs[currIndex] + 却无效。不知道为什么。。。

<img id="bg" />
<script type="text/javascript">
var imgs=new Array(
"地址一",
"地址二",
"地址三"
);
var n=imgs.length;
var currIndex=Math.round(Math.random() * n) ;
alert(currIndex);
//document.body.style.backgroundImage="url("+imgs[currIndex]+")"
document.write(imgs[currIndex])
var bg = new Image();
document.images.bg.src="+ imgs[currIndex] +";
</script>

currIndex

imgs

var

15 条回复 • 1970-01-01 08:00:00 +08:00

nikejaycn

2011-04-12 23:07:44 +08:00

document.images.bg.src="+ imgs[currIndex] +";
怎么看我都觉得这句代码有问题。"+ imgs[currIndex] +"？

iugo

2011-04-12 23:13:44 +08:00

@nikejaycn 呃，请问，那该怎么写呢？ document.write(imgs[currIndex]) 中直接写 imgs[currIndex] 可以看到随机选择的图片的 url ，但是写成 document.images.bg.src="imgs[currIndex]"; 无效。 document.body.style.backgroundImage="url("+imgs[currIndex]+")" 中， imgs[currIndex] 两边是加了 “+” 的，所以我加上了，但依旧无效。呃，我不知道标准的该怎么写。。。

kayue

2011-04-12 23:20:45 +08:00

var currIndex = Math.floor( Math.random() * n);

kayue

2011-04-12 23:23:12 +08:00

document.images.bg.src = imgs[currIndex];

nikejaycn

2011-04-12 23:25:55 +08:00

var n=imgs.length - 1;

kayue

2011-04-12 23:26:19 +08:00

currIndex 会出现 0...3 的原因是 Math.round()

例如当 Math.random() = 2.7 的时候，round 后就成了 3
用 Math.floor 代替即可。

kayue

2011-04-12 23:27:52 +08:00

@nikejaycn 的解法有可能令 current index 得出负值 (0 会变成 -1)

kayue

2011-04-12 23:30:08 +08:00

Math.round() * 3 的最大值是 2.999
用 Math.floor（向下取其整数）的话即使 2.999 也只会传回 2。
正解也。

iugo

2011-04-12 23:31:21 +08:00

@kayue 谢谢。

我学习到了两点。
一：Math.round 与 Math.round 。返回小于等于数字参数的最大整数，对数字进行下舍入。返回数字最接近的整数，四舍五入。（ http://www.dreamdu.com/javascript/Math.round/ ）虽然还是不甚明了，但起码有个大概的印象，将来深入的时候会容易些。
二：引号内的一般都是确定值（我不知道该怎么表达）而不是变量，对变量，不要加引号。

kayue

2011-04-12 23:32:43 +08:00

而楼主的

document.images.bg.src="+ imgs[currIndex] +";

这句跟本就有 syntax 错误。

element.src = "somewhere";

是相等于

var theSrc = "somewhere";
element.src = theSrc;

nikejaycn

2011-04-12 23:33:55 +08:00

@kayue 我写了一个循环，执行了10000次随机函数，没有出现-1，只有0，1，2

darasion

2011-04-12 23:36:20 +08:00

document.images.bg.src 是哪来的？？

chone

2011-04-12 23:49:16 +08:00

http://jsfiddle.net/uUWuc/

var imgs = [
'http://www.google.com/logos/2011/firstmaninspace11-hp.jpg',
'http://l.yimg.com/a/i/ww/met/logo/20100909/yahoo_logo_fr.png',
'http://images.apple.com/euro/home/images/ipad2_hero2_20110302.png'
];
var n = imgs.length;
var currIndex = Math.floor(Math.random()*n);

var bgEl = document.getElementById('bg');
bgEl.src = imgs[currIndex];

iugo

2011-04-13 00:00:29 +08:00

@chone 谢谢。

kayue

2011-04-13 02:46:20 +08:00

@nikejaycn my mistake.