Question

我想在刷新页面后更改图像，但它不起作用

这是javascript部分

<script>
  var theImages = [
      "../images/casblanca.jpg",
      "../images/casblanca2.jpg",
      "../images/spot.jpg";
  ];
  function changeImage(){
  var size=theImages.length;
  var x = Math.floor(size*Math.random())
  document.getElementById("spotlight").src = theImages[x];
}
</script>

这是html主要部分

  <nav class="spot" onload="changeImage()">
      <h1>SPOTLIGHT</h1>
      <a href="play.html"><img id="spotlight" width="1000" height="600" alt=""></a>
    </nav>

Answer 1

let userRef = fb.database().ref('users').child(userId); userRef.on('value', snapshot => this.user = snapshot.val());元素不支持onload属性。在<nav>

上试试吧

图像数组中也存在语法错误。一个不必要的分号。

见下面的工作示例：

＆＃13;

<body>

＆＃13;

  var theImages = [
  "https://dummyimage.com/1000x600/000/fff&text=Image+1",
  "https://dummyimage.com/1000x600/000/f0f&text=Image+2",
  "https://dummyimage.com/1000x600/000/ff0&text=Image+3"
  ];
  function changeImage(){
  var size=theImages.length;
  var x = Math.floor(size*Math.random())
  document.getElementById("spotlight").src = theImages[x];
}

＆＃13;

Answer 2

1）您正在使用和额外的半冒号（;）

＆＃34; ../图像/ spot.jpg＆＃34 ;;

在你上一张图片的最后。继续删除它。

2）在body标签中使用onload事件。

这是一个有效的解决方案。希望它有所帮助！

＆＃13;

 var theImages = [
        "http://media.caranddriver.com/images/media/51/25-cars-worth-waiting-for-lp-ford-gt-photo-658253-s-original.jpg",
        "https://carfromjapan.com/wp-content/uploads/2016/10/5-Best-Rated-Cars-of-2016.jpg",
        "https://i.ytimg.com/vi/TzcS7Mcq2oA/maxresdefault.jpg"
    ];
    function changeImage(){
        var size=theImages.length;
        var x = Math.floor(size*Math.random())
        document.getElementById("spotlight").src = theImages[x];
    }

＆＃13;

<body onload="changeImage()">

<nav class="spot">
    <h1>SPOTLIGHT</h1>
    <a href="play.html"><img id="spotlight" width="1000" height="600" alt=""></a>
</nav>

＆＃13;

Answer 3

分隔CSS，JS和HTML。

将varibles声明为

var theImages = [],
  size, x;

删除onload（）函数。重写随机函数如下。

x = Math.floor（Math.random（）* size）;

Math.random()返回0（包括）和1（不包括）之间的浮点伪随机数。这里Math.floor总是返回0,1,2之间的值。

重写代码如下。

size = theImages.length;
x = Math.floor(Math.random() * size);
document.getElementById("spotlight").src = theImages[x];

＆＃13;

var theImages = [],
  size, x;
theImages = [
  "https://www.w3schools.com/w3css/img_car.jpg",
  "https://www.w3schools.com/css/paris.jpg",
  "https://www.w3schools.com/css/trolltunga.jpg"
];
size = theImages.length;
x = Math.floor(Math.random() * size);
document.getElementById("spotlight").src = theImages[x];

＆＃13;

#spotlight {
  width: 1000px;
  height: 600px;
}

＆＃13;

<h1>SPOTLIGHT</h1>
<a href="#"><img id="spotlight" alt=""></a>

＆＃13;

刷新页面后更改图像

3 个答案: