javascript - 使用javascript随机图像并根据随机图像将背景颜色应用于页面

Question

标题说明了一切。我有以下 JS 代码:

function randomImg(){
var myImages = new Array();
myImages[1] = "images/image1.gif";
myImages[2] = "images/image2.gif";
var rnd = Math.floor(Math.random() * myImages.length);
if(rnd == 0){
rnd = 1;
}
document.write('<img src="'+myImages[rnd]+'" alt="image" style="border: 0;" />');
}

两张图片内容不同，页面背景图片也应该不同。这是页面背景的 CSS:

/* image1.gif */
body {
background-color: #FBFBFB;
}

/* image2.gif */
body {
background-color: #FFFFFF;
}

另外，我不想使用 jQuery，因为我已经添加了一个库。所以唯一可接受的 jQuery 代码应该是与以下兼容的代码:jquery-1.4.3.min.js

Answer 1

不要使用 document.write，因为这会清除您的文档内容。要根据随机数制作不同的背景，您可以这样做:

if(rnd == 0){
    rnd = 1;
    document.body.style.background = '#FBFBFB';
} else {
    document.body.style.background = '#FFFFFF';
}

或者使用 jQuery:

if(rnd == 0){
    rnd = 1;
    $( 'body' ).css( 'background', '#FBFBFB' );
} else {
    $( 'body' ).css( 'background', '#FFFFFF' );
}

也兼容 jQuery 1.4.3。

当你使用 jQuery 时，你可以避免使用 document.write

$( 'body' ).append( '<img src="'+myImages[rnd]+'" alt="image" style="border: 0;" />' ); 

完整的编辑代码应该是:

function randomImg() {
    var myImages = [];
    myImages[0] = "images/image1.gif";
    myImages[1] = "images/image2.gif";
    var rnd = Math.floor(Math.random() * myImages.length);
    if (rnd == 0) {
        rnd = 1;
        $('body').css('background', '#FBFBFB');
    } else {
        $('body').css('background', '#FFFFFF');
    }
    $('body').append('<img src="' + myImages[rnd] + '" alt="image" style="border: 0;" />');
}