index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mathオブジェクトの使い方</title> </head> <body> <button onclick="omikuji();">おみくじを引く</button> <p id="illust"><img src="img/syougatsu2_omijikuji2.png" alt=""></p> <script> function omikuji(){ //ランダム関数で取得した値を変数に代入 //1~100までの数字をランダムで取得 let num = Math.ceil(Math.random()*100); console.log(num); //1~50が出た場合の処理 if(num <= 90){ x = 0; }else if(num <= 95){ x = 1; }else if(num <= 99){ x = 2; }else{ x = 3; } console.log(x); //配列に使用する画像を登録する let photo = ['0.png','1.png','2.png','3.png']; console.log(photo[x]); //#illustにimg要素を挿入する document.querySelector('#illust').innerHTML = '<img src="img/'+photo[x]+'" alt="">'; }; </script> </body> </html>
style.css
