要在单击按钮上以HTML随机更改图像

Question

I am learning html5 and javascript , 我正在学习html5和javascript，

I want to change images randomly on Click of button ,I have three images locally stored and want to set those images and also want store data that which image get set how many times in database . 我想在按钮的单击上随机更改图像，我在本地存储了三张图像，并且想要设置这些图像，并且还希望存储将哪个图像设置了多少次的数据在数据库中。

anyone have an idea how to do it , Thanks in advance. 任何人都有一个想法，请提前致谢。

want to pass some random number to function changeImage(randomNumber) and as per number want to change image 想要将一些随机数传递给功能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

To reload an image on the webpage with another one use jQuery. 要使用另一张图片重新加载网页上的图片，请使用jQuery。 It has ".load" function with which you can load content into some element. 它具有“ .load”功能，可用于将内容加载到某些元素中。 Before loading it you will have to generate a random number which will select the image from a predefined array of images (case 1 show pic 1.jpg, case 2.. and so on). 加载之前，您将必须生成一个随机数，该随机数将从预定义的图像数组中选择图像（案例1显示pic 1.jpg，案例2 ..依此类推）。

What's more important is that JavaScript and jQuery are executed on the client's side, so you won't be able to access the database from them. 更重要的是JavaScript和jQuery是在客户端执行的，因此您将无法从它们访问数据库。 You will need some kind of server-side language, for example PHP which will store data in the database. 您将需要某种服务器端语言，例如将数据存储在数据库中的PHP。

EDIT: 编辑：

Haven't tested it, but you can get a basic idea from this: 还没有测试过，但是您可以从中得到一个基本的想法：

//...
<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: 编辑2：

As for working with the local database, please refer to: 至于使用本地数据库，请参考：

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

For example you can just add this to the changeImage() function: 例如，您可以将其添加到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...";
};

} }

Now after that create a div with the ID "result" which will show the current result. 现在，在那之后创建一个ID为“ result”的div，它将显示当前结果。

要在单击按钮上以HTML随机更改图像

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-02-15 08:53:44

要在单击按钮上以HTML随机更改图像

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-02-15 08:53:44

解决方案1
1 已采纳 2013-02-15 08:53:44