Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

javascript ランダム

javascriptでランダムに画像を表示する方法「コードコピペOKです」

投稿日:

Pocket

うも、チャーさんです。

 

あなたはjavascriptでランダムに画像を、

表示させたいですか?

 

 

この記事ではjavascriptでランダムに画像を、

表示させるためのコードと、

そのコードを部分ごとに説明してますので、

 

javascriptでランダムに画像を表示させたい場合は、

いますぐにスクロールして読んでください。

 

 

*この記事の信頼性

この記事を書いてる僕は、エンジニア歴約1年ほどで、

普段は開発もしてます。

 

*コードはコピペしてお使いいただいて、

大丈夫です。

 

スポンサードサーチ

javascriptでランダムに画像を表示するコード

 

で、早速結論ですが、

javascriptでランダムに画像を表示させるには、

以下のコードを使えば可能です。

 

var images= new
Array(“画像のファイル名”,”画像のファイル名”,”画像のファイル名”,”画像のファイル名”,”画像のファイル名”,”画像のファイル名”,”画像のファイル名”,”画像のファイル名”,”画像のファイル名”,”画像のファイル名”);

var randomNum=(Math.floor(Math.random()*10));

document.write(“<img src=”+images[randomNum]+”>”);

 

*画像のファイル名のとこには、あなたのパソコンに、

保存してあるランダムで表示させたい画像のファイル名を、

入力してください。 

 

例 image.pngなど。

 

 

*これはjavascriptの外部ファイルに

上記の記述をしてます。

 

それではこのコードを記述すると、

どんな動きをするか動画とったので、

javascriptによるランダム画像表示をご覧ください。

 

 

 

 

動画のご視聴お疲れ様でした。

 

このように

 

var images= new
Array(“画像のファイル名”,”画像のファイル名”,”画像のファイル名”,”画像のファイル名”,”画像のファイル名”,”画像のファイル名”,”画像のファイル名”,”画像のファイル名”,”画像のファイル名”,”画像のファイル名”);

var randomNum=(Math.floor(Math.random()*10));

document.write(“<img src=”+images[randomNum]+”>”);

 

 

このコードをjavascriptで記述しておくことで、

ブラウザを更新するごとに、

ランダムに違う画像が表示されるようになります。

 

スポンサードサーチ

javascriptでランダムに画像を表示するコードの分解説明

 

それではこのコードの中身を、

コードの要素分解をして詳細に説明していきますね。

 

この部分を読めばあなたも自分で、

好きなようにjavasriptでランダムに画像を

表示できるコードを作れるようになりますし、

 

こういう仕組みでランダム表示されてるんだな、

と理解できるようになります。

 

まずは配列でランダムに画像を表示するための画像を用意する

 

で、早速説明に入るのですが、説明するために

今回使ってるコードをもう一度のせておきます。

 

var images= new
Array(“画像のファイル名”,”画像のファイル名”,”画像のファイル名”,”画像のファイル名”,”画像のファイル名”,”画像のファイル名”,”画像のファイル名”,”画像のファイル名”,”画像のファイル名”,”画像のファイル名”);

var randomNum=(Math.floor(Math.random()*10));

document.write(“<img src=”+images[randomNum]+”>”);

 

それではまず最初にコードの冒頭にある、

var images=new Array(“画像のファイル名”,・・・・・)

のとこから説明してきます。

 

 

この部分は変数と配列の部分で配列を、

変数に入れています。

 

*変数とは

 

ちなみに用語わからない場合のために補足すると、

変数とはデータに名前をつけて、プログラミングの中で、

使いまわせるようにしたもののことです。

 

具体的にはvar imagesが今回でいう変数の名前に

当たる部分になります。

 

*配列とは

 

そして配列とは、いろんなデータをいっぺんに

1つの変数に詰め込む記述です。

 

 

で話が戻りますが、

ランダムに画像を表示するためには、

表示させる元になる画像たちが必要です。

 

 

それを配列という部分で行っており、

パソコンにこれらの画像をランダムに、

表示させる元にしてくれという記述をしてるのです。

 

なのでこの配列にあなたが表示させたい画像を、

色々詰め込むことで、好きな画像をランダムに

表示させることができるようになります。

 

 

配列の添字に使うランダムな数字を用意する

 

で次に、

var randomNum=(Math.floor(Math.random()*10));

 

のとこですが、

ここは変数にランダムな数字を登録してくれ。

という内容を書いています。

 

 

var randomNumという変数には、

ランダムな数字が入ることになります。

 

でなぜこれをするかというと、

先ほど用意した配列というのは、

どの画像を表示するか?

 

というのを指定して表示する仕組みだからです。

 

 

そしてその指定には数字を使ってます。

 

例えば配列の中の、1番目の画像を表示してくれ

という場合、images[0]と書くと、

配列の中の一番目に書いた画像が表示される仕組みです。

 

そしてこの[]の中の数字を添字といいまして、

ここに入れた数字を元にパソコンは画像を表示します。

 

 

ですがこれを指定してしまうと、

1番目の画像だけしか表示できません。

 

参考画像

 

なのでこの[]に入る添字の部分の数字を、

ランダムに画像表示するには、

ランダムに数字が変わっていく必要があるのです。

 

 

ランダムに数字を変えるには前回の記事

javascriptでランダムな整数を表示するコードと仕組み解説「コピペOK」

を参照してくださるといいのですが、

 

このランダム関数を使うことで、

添字の中にランダムに数字を入れて、

ランダムに画像を表示できるようになるのです。

 

 

そしてこのランダムな数字が、今回は

randomNum という名前をつけた変数に

登録されるというわけです。

 

つまりこのrandomNumという変数を、

添字にするとランダムに画像を表示できるのです。

 

配列のデータをランダムに表示する

 

そして最後の、

document.write(“<img src=”+images[randomNum]+”>”);

のとこですが、これを書いてやっと画像が表示されます。

 

document.writeというのは、

()の中に書いたものを表示します。

 

 

で、<img src=

という部分ですが、htmlではこれを書くことで

画像だとパソコンが認識して画像を表示します。

 

なのでこのimg srcを書かないと、

画像ファイル名の文字だけが表示されて、

画像を表示できないのです。

 

なので忘れずimg srcを書くようにしてください。

 

 

そして、

images[randomNum]ですが、

 

imagesというのはimagesという変数を

使ってくれ。という記述になります。

そしてこの中には配列で画像ファイルがいっぱい

入ってます。

 

そして先ほど説明した[]の添字の部分ですが、

ここにランダムな数字を入れたいので、

先ほどランダムな数字を登録した、

randomNum変数を書いておきます。

 

 

こうすることでこの[]の添字の中には、

毎回違うランダムな数字が入ってくれる

ことになるのです。

 

そして結果としてランダムな画像が表示される、

という仕組みなわけですね。

 

スポンサードサーチ

まとめ

 

まとめですが、

javascriptでランダムに画像を表示するには、

 

var images= new
Array(“画像のファイル名”,”画像のファイル名”,”画像のファイル名”,”画像のファイル名”,”画像のファイル名”,”画像のファイル名”,”画像のファイル名”,”画像のファイル名”,”画像のファイル名”,”画像のファイル名”);

var randomNum=(Math.floor(Math.random()*10));

document.write(“<img src=”+images[randomNum]+”>”);

 

の記述をjavascriptファイルか、

scriptタグの中に書けばokです。

 

 

今回は応用編なので、

初めての場合は難しかったと思います。

 

javascriptでランダムに画像を表示するのは、

ゲームにも使えるので、ぜひいますぐこのコードをコピペして、

動作を確認してみてください。

 

それでは読んでもらってありがとうございました。

 

チャーさん

-javascript, ランダム

スポンサードサーチ

関連記事

no image

二重ループをjavascriptでする方法

  どうも、チャーさん(@chaa___san)です。   あなたはjavascriptで二重ループを するにはどう書けばいいのか、 と思っていませんか?   この記事で …

no image

javascriptでalert(アラート)を表示させる方法

どうも、チャーさんです。   あなたは、javascriptでalert(アラート)を、 表示させたいと思っていませんか?   この記事では、javascriptを使って、 ale …

no image

javascriptをhtml内で使う方法「完全初心者向け」

どうもチャーさん(@chaa___san)です。   あなたはjavascriptをhtmlで使えないのか? と疑問に思っていませんか?   結論からいうと使えます。   …

no image

javascriptのエラーの確認方法「3秒で確認できます」

どうも、チャーさんです。   あなたはjavascriptのエラーの確認方法を、 知りたいと思っていませんか?     この記事では、javascriptのエラーを、 確 …

no image

javascriptでボタンを押したら色が変更できる方法「コード例つき」

どうも、チャーさんです。   あなたはjavascriptで、ボタンを押したら、 色が変更できる方法を探していませんか?   この記事では、ボタンクリックで、 色を変更する方法、コ …

no image

javascriptでcssを操作する手順と方法

どうも、チャーさんです。   あなたはjavascriptでcssを操作したい。 そう思っていませんか?   この記事では、javascriptを使って、 cssを操作する方法を書 …

no image

javascriptをコンソールで実行する方法

どうも、チャーさんです。   あなたはjavascriptを今すぐに実行できる、 そんな方法を探していますか?   コンソールという機能を使えばそれは、 可能でして、この記事ではコ …

no image

javascriptでランダムな整数を表示するコードと仕組み解説「コピペOK」

どうも、チャーさんです。   あなたはjavascriptでランダムな整数を、 表示したいですか?   この記事では、javascriptでランダムな整数を、 表示するコードと、そ …

no image

javascriptでボタンをクリックしたらアラートが表示されるコード

どうも、チャーさんです。   あなたはjavascriptでボタンをクリックしたら、 アラートが表示される方法とコードを、 探していますか?     この記事では、ボタン …

no image

getElementByIdの意味や使い方をわかりやすく紹介します。

  どうも、チャーさんです。   あなたはgetElementByIdの意味はなんだろう? と思ってませんか?   この記事では、getElementByIdの意味や、 …

no image

htmlの中にjavascriptを書いて使う方法

どうも、チャーさんです。   あなたはhtmlの中にjavascriptを書いて、 使いたいと思っていませんか?   この記事では、htmlの中にjavascriptを 書いて、j …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。