V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
iugo
V2EX  ›  JavaScript

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

  •  
  •   iugo · 2011-04-12 23:03:58 +08:00 · 5308 次点击
    这是一个创建于 4734 天前的主题,其中的信息可能已经有所发展或是发生改变。
    我没学过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>
    15 条回复    1970-01-01 08:00:00 +08:00
    nikejaycn
        1
    nikejaycn  
       2011-04-12 23:07:44 +08:00
    document.images.bg.src="+ imgs[currIndex] +";
    怎么看我都觉得这句代码有问题。"+ imgs[currIndex] +"?
    iugo
        2
    iugo  
    OP
       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
        3
    kayue  
       2011-04-12 23:20:45 +08:00
    var currIndex = Math.floor( Math.random() * n);
    kayue
        4
    kayue  
       2011-04-12 23:23:12 +08:00
    document.images.bg.src = imgs[currIndex];
    nikejaycn
        5
    nikejaycn  
       2011-04-12 23:25:55 +08:00
    var n=imgs.length - 1;
    kayue
        6
    kayue  
       2011-04-12 23:26:19 +08:00
    currIndex 会出现 0...3 的原因是 Math.round()

    例如当 Math.random() = 2.7 的时候,round 后就成了 3
    用 Math.floor 代替即可。
    kayue
        7
    kayue  
       2011-04-12 23:27:52 +08:00
    @nikejaycn 的解法有可能令 current index 得出负值 (0 会变成 -1)
    kayue
        8
    kayue  
       2011-04-12 23:30:08 +08:00
    Math.round() * 3 的最大值是 2.999
    用 Math.floor(向下取其整数)的话即使 2.999 也只会传回 2。
    正解也。
    iugo
        9
    iugo  
    OP
       2011-04-12 23:31:21 +08:00
    @kayue 谢谢。

    我学习到了两点。
    一:Math.round 与 Math.round 。返回小于等于数字参数的最大整数,对数字进行下舍入。返回数字最接近的整数,四舍五入 。( http://www.dreamdu.com/javascript/Math.round/ )虽然还是不甚明了,但起码有个大概的印象,将来深入的时候会容易些。
    二:引号内的一般都是 确定值 (我不知道该怎么表达)而不是变量,对变量,不要加引号。
    kayue
        10
    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
        11
    nikejaycn  
       2011-04-12 23:33:55 +08:00
    @kayue 我写了一个循环,执行了10000次随机函数,没有出现-1,只有0,1,2
    darasion
        12
    darasion  
       2011-04-12 23:36:20 +08:00
    document.images.bg.src 是哪来的??
    chone
        13
    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
        14
    iugo  
    OP
       2011-04-13 00:00:29 +08:00
    @chone 谢谢。
    kayue
        15
    kayue  
       2011-04-13 02:46:20 +08:00
    @nikejaycn my mistake.
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2749 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 12:45 · PVG 20:45 · LAX 05:45 · JFK 08:45
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.