Question

我正在学习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>

Answer 1

要在网页上重新加载图像，请使用jQuery。它具有“.load”功能，您可以使用该功能将内容加载到某个元素中。在加载之前，您必须生成一个随机数，该数字将从预定义的图像阵列中选择图像（案例1显示pic 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>
//...

EDIT2：

关于使用本地数据库，请参阅：

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，它将显示当前结果。

想要在点击按钮上随机改变图像

1 个答案: