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

2011-04-12 23:03:58 +08:00
 iugo
我没学过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>
5473 次点击
所在节点    JavaScript
15 条回复
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.

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/11368

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX