0

我正在学习 html5 和 javascript ，

我想在单击按钮时随机更改图像，我在本地存储了三张图像，想要设置这些图像，并且还想在数据库中存储哪些图像设置了多少次的数据。

任何人都知道如何做到这一点，在此先感谢。

想要将一些随机数传递给函数 changeImage(randomNumber) 并根据数字想要更改图像

<!DOCTYPE html>
<html>
  <head>
    <h1>Click on Image to Change Image </h1>
    <script>
    function changeImage(){
        var image = document.getElementById("image");
        switch(1){
        case 1 :
            image.src = "tulips.JPG";
            break;
        case 2 :
            image.src = "life.JPG";
            break;
        case 3:
            image.src = "Desert.JPG";
            break;
            document.getElememtById("image_change_button").innerHTML = Math.random();
        }   
    }
    </script>
  </head>
  <body>
    <div>
      <img id = "image" src = "life.JPG" width = "480" height = "100" ></img>
    </div>
    <div>
      <button id = "image_change_button" onClick = "changeImage()" width = " 100" height = "100">OnClick</button>
    </div>
  </body>
</html>
4

1 回答 1

1

要在网页上重新加载另一张图片，请使用 jQuery。它具有“.load”功能，您可以使用该功能将内容加载到某个元素中。在加载它之前，您必须生成一个随机数，该数字将从预定义的图像数组中选择图像（案例 1 显示图片 1.jpg，案例 2.. 等等）。

更重要的是 JavaScript 和 jQuery 是在客户端执行的，因此您将无法从它们访问数据库。您将需要某种服务器端语言，例如将数据存储在数据库中的 PHP。

编辑：

没有测试过，但你可以从中得到一个基本的想法：

//...
<script>
function changeImage(){
                randInt = Math.random(3)+1;
                switch(randInt){
                case 1 :
                    image = "tulips.JPG";
                    break;
                case 2 :
                    image = "life.JPG";
                    break;
                case 3:
                    image = "Desert.JPG";
                    break;
                document.getElememtById("image_container").innerHTML = 
                    "<img src='" + image + "'/>";
                }
          }
</script>
//...
<div id="image_container"></div><br/>
<div onclick="changeImage()">CLICK ME!</div>
//...

编辑2：

至于使用本地数据库，请参考：

http://blog.darkcrimson.com/2010/05/local-databases/

例如，您可以将其添加到 changeImage() 函数中：

// between the last two curly braces inser a semicolon and then   
if(typeof(Storage)!=="undefined"){
   if (localStorage.clickcount){
localStorage.clickcount=Number(localStorage.clickcount)+1;
}else{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have clicked the button " +     localStorage.clickcount + " time(s).";
}else{
document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
};

}

现在，创建一个 ID 为“result”的 div，它将显示当前结果。

于 2013-02-15T08:53:44.060 回答