More than 5 years have passed since last update.

JavaScript でおみくじを作ってみた

JavaScript

Last updated at 2019-11-26Posted at 2019-11-23

目的

ボタンを押す度に「大吉」「吉」「中吉」「小吉」「凶」のいずれかが表示されるおみくじアプリを作成する。
（HTML CSS JavaScriptのみ使用）
おみくじアプリを作り、JavaScriptの基礎を理解する。

コード

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>おみくじ</title>
    <link rel="stylesheet" href="css/style2.css">
</head>
<body>  
   <div id="btn">?</div>
   <script src="js/main2.js"></script>
</body>
</html>

styles.css

body {
  background: #e9e4e2;
}

# btn {
  margin: 30px auto;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  font-size: 42px;
  line-height: 200px;
  background: #121977;
  text-align: center;
  cursor: pointer;
  color: #fff;
  opacity: 0.9;
  box-shadow: 0 10px 0 rgb(62, 65, 209);
  border: 3px solid rgb(106, 62, 209);
  user-select: none;
}

# btn:hover{
  opacity: 0.9;
}

# btn:active {
  box-shadow: 0 5px 0 #ffeeee;
  margin-top: 35px; 
}

'use strict';
{
  const btn = document.getElementById('btn');

  btn.addEventListener('click', function(){
    const n = Math.random()
    if (n < 0.3){
      this.textContent = "大吉"; //30%
    } else if(n < 0.45) {
      this.textContent = "吉"; //15%
    } else if (n < 0.60) {
      this.textContent = "中吉"; //15%
    } else if  (n < 0.85){
      this.textContent = "小吉"; //15%
    } else {
      this.textContent = "凶"; //15%
    }

  });
}

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up