おみくじアプリの作成過程をまとめて。
(2019/08/28 書いてるときにつまずいたところを追記)
目的
ボタンを押したら画像がランダムで出てくるタイプのおみくじを作る。 画像はいらすとやさんからお借りしました。コード
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link href="https://fonts.googleapis.com/css?family=Kosugi+Maru&display=swap" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<title>おみくじ</title>
</head>
<body>
<section>
<h1>おみくじ</h1>
<div id="result"><i class="fas fa-question faa-wrench animated"></i></div>
<div id="btn"><i class="far fa-star fa-spin"></i>占う</div>
</section>
</body>
</html>
CSS
body{
font-family: 'Kosugi Maru', sans-serif;
text-align: center;
}
h1{
font-size: 30px;
}
#result{
margin: 0 auto;
width: 181px;
height: 400px;
border: 5px solid black;
border-radius: 20px;
font-size: 60px;
line-height: 400px;
}
#btn{
font-size: 20px;
color: #ffffff;
background: #7ab6ff;
box-shadow: 0 4px 0#0f7bff;
border-radius: 20px;
width: 300px;
padding: 20px 0;
margin: 30px auto 0 auto;
cursor: pointer;
}
#btn:active{
box-shadow: 0 2px 0 #0f7bff;
}
JavaScript
var img = new Array (
'./images/daikiti.png',
'./images/chukiti.png',
'./images/syouchiti.png',
'./images/kichi.png',
'./images/suekiti.png',
'./images/kyou.png',
'./images/daikyou.png'
);
var button = document.getElementById('btn');
button.addEventListener('click', () =>{
var random = Math.floor(Math.random() * img.length);
var result = '<img src =' +img[random]+ '>';
document.getElementById('result').innerHTML = result;
})
#コードの解説
CSS
#btn:active{
box-shadow: 0 2px 0 #0f7bff;
}
btnをクリックされたときのスタイルをbox-shadowで指定。
JavaScript
var img = new Array (
'./images/daikiti.png',
'./images/chukiti.png',
'./images/syouchiti.png',
'./images/kichi.png',
'./images/suekiti.png',
'./images/kyou.png',
'./images/daikyou.png'
);
変数で画像の配列を作成。
HTML
<div id="btn"><i class="far fa-star fa-spin"></i>占う</div>
JavaScript
var button = document.getElementById('btn');
HTMLのbtnを変数で指定する。
JavaScript
button.addEventListener('click', () =>{
//クリックされたときの内容を記述
})
btnがクリックされたときの内容を記述する。
ランダムで画像を表示させたいので、Math.random()を使いランダムで配列を出す。
JavaScript
var random = Math.floor(Math.random() * img.length);
var result = '<img src =' +img[random]+ '>';
変数を使い画像を表示する要素を生成する。
JavaScript
document.getElementById('result').innerHTML = result;
HTMLのresultにinnerHTMLを使い画像を表示。
完成
#
書いててつまずいたところ(追記)
JavaScript
var random = Math.floor(Math.random() * img.length);
document.getElementById('result').innerHTML = random;
(画像じゃなくて何故か数字が…)
JavaScript
var random = Math.floor(Math.random() * img.length);
var result = '<img src =' +img[random]+'>';
document.getElementById('result').innerHTML = result;
変数resultに画像を表示するimg要素を生成したうえでinnterHTMLで表示。