0

十分に単純に見える問題がありますが、質問に関連するリソースが見つからないようです。私がやりたいことは、コンピューター内のフォルダーから Javascript を使用して配列に 36 枚の画像を保存することです。以下は、関連するコード スニペットの短縮バージョンです。

<!doctype html>
    <head>
      <style>
       div#GameBoard {
         position: absolute;
         top: 66px;
         left: 53px;
         display: block;
         margin: 10px;
         padding: 10px;
         border: ridge #7CFC00 15px;
         width: 1007px;
         height: 698px;
       }

       div#Flipper {
         display: block;
         position: relative;
         background-color: #000;
       }      
     <style>

     <script lang="javascript">
       var ImgArray = [[11-16][21-26][31-36][41-46][51-56][61-66]];
       // pseudocode, the first digit is for row, second digit is for column number. 
       //I've named the pictures accordingly within the folder as 11.png,12.png,21.png,
       //and within the array //as well.

       function OnClickCard(path)
       {
         path || path ='C:\Users\Jamal\Desktop\codefolder\memorygame\gameimages'

         document.getElementById("Flipper").img.src = ImgArray.splice(Math.floor(Math.random() * ImgArray.length)[ImgArray];
       }
    </script>
  <body>
    <div id="GameBoard">
        <div class="Tile" id="Flipper">
            <img name ="11" src="blue-glass-tile.png" onclick="OnClickCard()"/>
        </div>

  </body>
  </head>
</html>

だから私がしたいのは、配列内の 'C:\Users\Jamal\Desktop\codefolder\memorygame\gameimages' 内の 36 枚の画像を保存し、0 ～ 35 のランダムなインデックスをスプライスして、画像ソースに変更することです。 div、そのインデックスを削除して、2 回使用されないようにします。

実際に起こっていること..何もありません。私は開発者コンソールのFirefoxで実行しており、すべてのエラーをクリアしましたが、文字通り何も起こりません. イメージが読み込まれたかどうかを検出するエラーのコンソール ログを実行する方法がわかりません。私はかなり途方に暮れており、ロジックにスキップしました. この時点で、私は必死にランダマイザーを終了する必要があり、これが私を狂わせています。ご意見をお寄せいただければ幸いです。

4

2 に答える 2

0

まず、コード サンプルにいくつかのエラーがあります。 #Gameboard終了<div>タグがなく、どこでpath使用されていますか?

次に、コンソール ログの実行は次のように簡単です。

console.log("logging statement");

あなたのJavascriptコード内。

さて、あなたの本当の質問です。問題の理由は、ブラウザが、マシンの基盤となるオペレーティングおよびファイル システムとの対話を制限していることです。使用するとき

<input type = 'file' id = file_input' />

接続を確立するブラウザであり、アップロードするファイルを選択します

お使いのブラウザーの種類とFile APIとの互換性に応じて、input タグを使用し、Javascript 関数を送信イベントにバインドして、必要なことを行うことができます。

ただし、画像をサーバーに保存し、ブラウザの URL 経由でアクセスする方が簡単です。自分のマシンでこれを行う場合は、Apache/MySQL/PHP スタックをインストールして、ローカルホスト フォルダー内にデータを保存します。

于 2013-10-11T10:22:37.640 に答える