0

私はhtml5とjavascriptを学んでいます、

ボタンをクリックするだけで画像をランダムに変更したい。3つの画像をローカルに保存していて、それらの画像を設定したい。また、どの画像が何回データベースに設定されたかのデータを保存したい。

誰もがそれを行う方法を知っています、事前に感謝します。

関数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

Web ページ上の画像を別の画像でリロードするには、jQuery を使用します。一部の要素にコンテンツをロードできる「.load」機能があります。ロードする前に、事前定義された画像の配列から画像を選択する乱数を生成する必要があります (ケース 1 show 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>
//...

編集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 に答える