Question

认为这样可行，但看不出我出错的地方。只是不输出生成的数字，而是默认为0.变量没有更新。

想要将随机图像显示为背景，因此我创建了5个名为bg-x.jpg的图像。

然后在var imgNumber

中生成1到5之间的随机数

然后使用document.write在页面上打印出一个样式，用imgNumber代替文件网址。

<script type="text/javascript">
var imgNumber = 0;
function randomImage(imgNumber){
    var imgNumber = 1 + Math.floor(Math.random() * 5);
    console.log('Random number is ' + imgNumber);
}
window.onload = randomImage;
document.write('<style type="text/css"> body{background-image:url("images/bg/bg-' + imgNumber +'.jpg");}</style>');
</script>

控制台工作正常并显示一个随机数，所以我只能假设我在这里出错了？

document.write('<style type="text/css"> body{background-image:url("images/bg/bg-' + imgNumber +'.jpg");}</style>');

Answer 1

我认为您需要做的就是替换：

var imgNumber = 1 + Math.floor(Math.random() * 5);

使用

imgNumber = 1 + Math.floor(Math.random() * 5);

在你的函数中，创建并分配了一个名为imgNumber的新变量，而外部变量根本没有改变。

编辑：尝试以下操作：

<script type="text/javascript">
function randomImage(){
    return 1 + Math.floor(Math.random() * 5);
}
document.write('<style type="text/css"> body{background-image:url("images/bg/bg-' + randomImage() + '.jpg");}</style>');
</script>

你甚至不需要一个功能，以下也可以使用：

<script type="text/javascript">
    document.write('<style type="text/css"> body{background-image:url("images/bg/bg-' + (1 + Math.floor(Math.random() * 5)) + '.jpg");}</style>');
</script>

基于随机数生成随机背景图像

1 个答案: