【javascript】ボタンを押してランダムに画像を表示されるものを作りたい

第1回目ではスマホに画像を表示させるだけのものを作りました。これを発展させるとするなら、ボタンを押したらランダムに表示させるものができないやしないか・・・。このような発想になるかと思います(笑)

ボタンを押すとランダムに画像を表示させるプログラムをjavascriptを用いて作っていきましょう。題材として、水着ギャルの写真をランダムに表示させてみました。

初心者さんにとって、第2回目としては少々難しい内容となってしまいました。しかし、基本的には作りたいものを実現するにはどうしたらよいかという観点で進めてます。初心者の方は、まずはコードを書き写して実際に動かしてみてください。そのあと自分なりにアレンジしてみることをお勧めします。たとえば、ボタンの文字を変えてみる、画像の種類を増やしてみる等々。


index.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="target"></div>
    <input type="button" value="水着のギャルを見たい!" id="bt"/>
    <script language="javascript" type="text/javascript">
    var target = document.getElementById( 'target' );
    var bt = document.getElementById( 'bt' );
    bt.addEventListener( 'click', function( e ) {
        var imglist = [
    "images/paipai.jpg",
    "images/paipai2.jpg",
    "images/paipai3.jpg",
    "images/paipai4.jpg",
    ];
    var selectnum = Math.floor(Math.random() * imglist.length);
    var element = '<img src="' + imglist[ selectnum ] + '" alt="" />';
    target.innerHTML = element;
     }, false );
    </script>
</body>
</html>

style.css

/**/

body {
    background-color: pink
}

img {
    width: 100%;
}

※画像はお好きなものをネットから落としてお使い下さい。

  • このエントリーをはてなブックマークに追加

関連記事

コメントは利用できません。

ピックアップ記事

  1. 第3回目ではボタンを押すとyoutubeの動画がランダム表示されるものを作成しました。今度はランダム…
  2. ワードプレスでオリジナルテーマを作ってみたい! 全くのイチからの作成手順をご紹介していきたいと思い…

ピックアップ記事

  1. 独学でプログラミング学習に挑戦したは良いが、結局挫折を繰り返す日々。   そんな挫折経験者や…
  2. ネットで調べると実に様々な方法が出てきます。 サーバーによっても様々なアプローチが。 今回私…
  3. 1.さくらVPSにPHP、MySQL、Ruby on Railsを設置。 これらを設置するまで…
  4. 他人様のコンテンツを引っ張ってきて、 自分なりにアレンジを加えた形で 独自のコンテンツとして提供…
ページ上部へ戻る