☆HTML☆
おみくじ
今日の運勢を占ってみよう！！
おみくじ
☆CSS☆
body{
background: #efefef;
margin: 0;
}
header{
font-weight: bold;
font-size: 40px;
text-align: center;
background-color: pink;
}
p{
text-align: center;
font-size: 20px;
padding-bottom: 20px;
}
#btn{
width: 200px;
height: 200px;
background-color: red;
border-radius: 50%;
margin: 30px auto; /*中央寄せを行う。30pxで上下を少し下げ、autoが中央寄せを行っている*/
text-align: center;
line-height: 200px;/*text-align centerで文字を左右で中央にし、line-heightで上下の中央の調整を行っている*/
color: #fff;
font-weight: bold;/*フォントを太めに設定している*/
font-size: 42px;
cursor: pointer;/*カーソルプロパティをポインタにしている*/
box-shadow: 0 10px 0 #d1483e;
user-select: none;/*テキストの選択を無くす*/
}
#btn:hover{
opacity: 0.8;
}/*マウスがボタンに乗るときの動作*/
#btn:active{
box-shadow: 0 5px 0 #d1483e;
margin-top: 35px;
}/*要素がクリックされた時の指定*/
☆JavaScript☆
'use strict';
{
const btn = document.getElementById('btn');
btn.addEventListener('click',()=>{
// const results = ['大吉','中吉','凶','末吉'];//resultsという配列を作成し、それぞれの結果を格納している
// const n = Math.floor(Math.random() * results.length);/*results.lengthでresults配列の要素の数が変わると自動的にそれを反映する*/
// btn.textContent = results[n];
// btn.textContent = n;/*クリック後にnに与えられた数字に変更する指示 */
const n =Math.random();/*0以上1未満のランダムな数値が生成される。*/
if(n<0.05){
btn.textContent = '大吉'; //5%
}
else if(n<0.2){
btn.textContent = '中吉'; //15%
}
else if(n<0.5){
btn.textContent = '吉'; //30%
}
else if(n<0.7){
btn.textContent = '末吉'; //20%
}
else if(n<0.85){
btn.textContent = '小吉'; //15%
}
else if(n<0.95){
btn.textContent = '凶'; //10%
}
else{
btn.textContent = '大凶'; //5%
}
// switch(n){
// case 0:
// btn.textContent = '大吉';
// break;
// case 1:
// btn.textContent = '中吉';
// break;
// case 2:
// btn.textContent = '凶';
// break;
// }/*switch文でランダムを表現する方法*/
})
}