乱数範囲に画像を割り当てます -- javascript フィールド 関連 問題

Assign image to random number-range












0
vote

問題

日本語

だから、コードを生成して「-20と20」の間に乱数を印刷する準備ができています。

私がやりたいこと、そして私が立ち往生しているところであるところは、 "-20から20"の合計範囲の数範囲に4つの異なる画像を割り当てることです。

例えば:

  • field-label0 は、 "-20と-10"
  • の間のランダム#に割り当てられます。
  • field-label1 "-9と0"
  • に割り当てられています
  • <コード> field-label2
  • <コード> field-label3 「11と20」

あらゆる提案はあまり歓迎しました!

編集: そのため、Jonの答えに基づいて、最後の2行をDocument.Writeに変更し、実際の画像をテキスト出力に表示しようとしています。しかし私はimg.srcの障害のある行を知っています。私のイメージが私の根のDIRに横たわっていたらどうやって変更する必要があるのでしょうか。事前にありがとうございます。

<事前> <コード> field-label4
英語

So, I've got my code ready to generate and print a random number between "-20 and 20".

What I'd like to do, and this is where I'm stuck, is to assign 4 different images to a number range between my total range of "-20 to 20".

For instance:

  • image1.gif would be assigned to any random # between "-20 and -10"
  • image2.gif assigned to "-9 and 0"
  • image3.gif to "1 and 10"
  • image4.gif to "11 and 20"

Any suggestions much welcomed!

EDIT: So based on Jon's answer, i've changed the last two lines to a document.write and am trying to get my actual images shown above the text output. I'm however aware of a faulty line in the IMG.SRC. What would this be needed to change to if my images were lying in my root dir? Thanks in advance.

<html> <title>RANDOM IMAGE TO NUMBER RANGE</title> <body> <center> <script language="javascript" type="text/javascript"> var ranges = [     { from: 11, image: "image4.jpg" },     { from: 1, image: "image3.jpg" },     { from: -9, image: "image2.jpg" },     { from: -20, image: "image1.jpg" }        ];  var random_num = (Math.round((Math.random()*41)+-20)); var image = "default";  for(var i = 0; i < ranges.length; ++i) {     if(random_num >= ranges[i].from) {         image = ranges[i].image;         break;     } } document.write("Number: " + random_num + " parts, " + " Imagetitle: = " + image); document.write('<img src="'+ranges[image]+'">');  </script> <br></br> <div> CLICK <a href="javascript:history.go(0);">REFRESH or F5</a> FOR A RANDOM IMAGE on NUMBER-RANGE. </div> </center> </body> </html>  
</div
  
       
       

回答リスト

0
 
vote
vote
ベストアンサー
 

範囲を配列内に入れて、どの範囲内の範囲を見つけるためにそれを反復します。

<事前> <コード> // IMPORTANT: array is sorted in descending "from" order! var ranges = [ { from: 11, image: "image4" }, { from: 1, image: "image3" }, { from: -9, image: "image2" }, { from: -20, image: "image1" } ]; var random_num = (Math.round((Math.random()*41)+-20)); var image = "default"; for(var i = 0; i < ranges.length; ++i) { if(random_num >= ranges[i].from) { image = ranges[i].image; break; } } alert("random_num = " + random_num + " / image = " + image);

これは、等しくても等しくなくてもよい間隔で正しく機能し、わずかに複雑な間隔定義に簡単に適応させることができます。

action

 

Put the ranges inside an array and iterate over it to find which range you are in:

// IMPORTANT: array is sorted in descending "from" order! var ranges = [     { from: 11, image: "image4" },     { from: 1, image: "image3" },     { from: -9, image: "image2" },     { from: -20, image: "image1" }        ];  var random_num = (Math.round((Math.random()*41)+-20)); var image = "default";  for(var i = 0; i < ranges.length; ++i) {     if(random_num >= ranges[i].from) {         image = ranges[i].image;         break;     } }  alert("random_num = " + random_num + " / image = " + image); 

This will work correctly for intervals that may or may not be equal, and can easily be adapted to slightly more complex interval definitions.

See it in action.

</div
 
 
   
   
0
 
vote

パラメータ(-20、-11)、(-10、-1)、(0,9)、(10,19)、(10,19)。

<事前> <コード> function get_rand_int(min, max) { return Math.floor(min + Math.random() * (max - min + 1)); } // get_rand_int()
 

Just call the function below 4 times with parameters (-20, -11), (-10, -1), (0, 9), (10, 19).

function get_rand_int(min, max) {      return Math.floor(min + Math.random() * (max - min + 1));  } // get_rand_int() 
</div
 
 

関連する質問

44  トリプル引用符? ASP.NETでデータバインドJavaScript Stringパラメータを区切る方法  ( Triple quotes how do i delimit a databound javascript string parameter in asp n ) 
Anchor OnClick でJavaScriptデータバインド文字列パラメータを区切りますか? 私はASP.NETリピータコントロールにアンカータグを持っています。 アンカーの OnClick イベントには、JavaScript関数への呼び出しが含ま...

1279  jQueryでクッキーを設定/設定解除するにはどうすればよいですか。  ( How do i set unset a cookie with jquery ) 
jQueryを使用してCookieを設定して設定します。たとえば、 test という名前のクッキーを作成し、 1 ?に設定します。 ...

0  GWTのJavaからJavaScriptに匿名のJavaScriptオブジェクトを渡すにはどうすればよいですか。  ( How can i pass an anonymous javascript object from java to javascript in gwt ) 
JavaScriptライブラリを丸くするGWTラッパーを作成しています。 JavaScript関数の1つは、その引数として匿名オブジェクトを取ります。: <事前> <コード> obj.buildTabs({ hide: true, placeholder: ...

0  JavaScript - 2つの入力のどちらに焦点が当てられていない場合の検出  ( Javascript detecting when neither of two inputs has focus ) 
ページ上の2つの入力に焦点を当てていないときに、特定の機能を呼び出すことができます。ユーザが単に1つの入力から他方の入力に切り替わると、関数を呼び出すことを望まない。任意のアイデア? ...

54  2つの関数の違いは? ( "関数x" vs "var x =関数")[重複]  ( The difference between the two functions function x vs var x function ) 
この質問はすでにここで回答を持っています 閉じられた 8年前> 可能な重複: JavaScript:var functionname = function(){} vs関数name(){} < / a> :の違いは何ですか ...

2  サーバーを必要としないクライアント側(JavaScript)グラフライブラリはありますか? [閉まっている]  ( Is there a client side javascript graph library that doesnt require a server ) 
この質問はスタックオーバーフローガイドラインを満たしていません。現在答えを受け付けていません。 この質問を改善したいですか? ...

35  ASP.NETカスタムクライアント側の検証  ( Asp net custom client side validation ) 
.NET 2.0 Webサイトでのユーザーコントロールのカスタム検証機能があり、支払われた手数料はかかりません。 ascx ファイルにバリデータコードを置き、 Page.ClientScript.RegisterClientScriptBlock() ...

0  リスト項目でディスクを取り除く  ( Getting rid of disc in list item ) 
jQueryを使用してサイトを開発し、jQuery UIタブを作成しています。何らかの理由で、私のタブ(順序付けられていないリスト)は、OS XのFirefox 3を除くすべてのブラウザ(これまでにテスト済み)に弾丸を表示しています.Safari OS X、...

0  LazyWeb:要素の訪問されたクラスに基づいてLI要素を削除するJavaScriptが必要  ( Lazyweb need javascript that removes li elements based on visited class of a el ) 
すでにクリックしたように、必要なデータがたくさんあるこのページを持っていますが、頻繁に青色を探す必要があるので、頻繁に繰り返されます。私はこれがより効率的かもしれないことに気づいて、それが含まれているリンクが訪問されたかどうかに基づいて要素を隠されたように設定...

142  定義されたフォントのどれがWebページで使用されていたかを検出する方法  ( How to detect which one of the defined font was used in a web page ) 
私のページに次のCSSルールがあるとします。 <コード> body { font-family: Calibri, Trebuchet MS, Helvetica, sans-serif; } ユーザーのブラウザで定義されたフォントの1つを使用...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有