JavaScriptでおみくじを作る
2019/06/23

この記事を書いている人 - WRITER -
ドットインストールの講座を視聴して実際にPC上で動作させて学んでいきます。動画を見ながら自分でタイピングして覚える方がいいのですが、ソースが公開されていて、自分のコードと比較できるので、楽させてもらいます。
まずはボタンを押すとランダムで大吉、中吉、凶が表示されるおみくじを作りました。視聴すると簡単に出来ると思うけれど、やりたいこと(仕様)とやり方(実装)を結びつけるのは覚えて慣れていくしかない。
【完成時のソースコード】
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>おみくじ</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div id="btn">?</div> <script src="js/main.js"></script> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
body { background: #efefef; } #btn { width: 200px; height: 200px; background: #ef454a; border-radius: 50%; margin: 30px auto 0; text-align: center; line-height: 200px; color: #fff; font-size: 42px; font-weight: bold; cursor: pointer; box-shadow: 0 10px 0 #d1483e; user-select: none; } #btn:hover { opacity: 0.9; } #btn.pressed { box-shadow: 0 5px 0 #d1483e; margin-top: 35px; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
'use strict'; { const btn = document.getElementById('btn'); btn.addEventListener('click', () => { const n = Math.random(); if (n < 0.05) { btn.textContent = '大吉'; // 5% } else if (n < 0.2) { btn.textContent = '中吉'; // 15% } else { btn.textContent = '凶'; // 80% } }); btn.addEventListener('mousedown', () => { btn.classList.add('pressed'); }); btn.addEventListener('mouseup', () => { btn.classList.remove('pressed'); }); } |
この記事を書いている人 - WRITER -