想隨機改變圖像在HTML上點擊按鈕

我想隨意改變上點擊按鈕的圖片，我有三個圖像本地存儲，並要設置這些圖像，也想要在數據庫中設置多少次圖像的存儲數據。

任何人都有一個想法如何做到這一點，在此先感謝。

想通過一些隨機數起作用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>

來源

2013-02-15 dnana

請提供您的代碼。 – sascha 2013-02-15 08:46:53

'開關（1）'總是觸發'情況1' ...也許'開關（Math.random（）* 3 + 1）' – 2013-02-15 09:43:11

但它沒有給我整數，所以它無法進入開關情況 – dnana 2013-02-15 09:57:52

要在用另一個使用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> 
//...

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爲「結果」，這將顯示當前結果一個div。

來源

2013-02-15 08:53:44 Dropout

想隨機改變圖像在HTML上點擊按鈕

回答

相關問題