GenntaNakajo score 12
2017/02/09 23:34 投稿
| おみくじ作り |
| ###前提・実現したいこと |
| 現在ドットインストールの教材を独学中です。 |
| ここでこんなこと書いて良いか迷いましたが、 |
| もし教えていただける方いらしたら助かります。 |
| 現在、おみくじを動画通り作っていましたが、 |
| ボタンの透明度が変わらないのと、 |
| ボタンを押したときに引っ込んでくれません。 |
| たぶん、（hover ,opactiy）(mouseup,mousedown)あたりが |
| おかしいのかなぁと思いました。 |
| コードは何度も確認したのにわかりません。 |
| なぜ、実行できないのか？また、こういう問題を |
| 解決をするためにはどうすべきか教えていただけませんか？ |
| 初心者ましてや独学で勉強してますので全然わかりません。 |
| 宜しくお願いします。 |
| ###該当のソースコード |
| <!DOCTYPE html> |
| ```<!DOCTYPE html> |
| <html lang="ja"> |
| <head> |
| <meta charset="utf-8"> |
| <title>おみくじ</title> |
| <style> |
| body { |
| background : #e0e0e0 ; |
| text-align : center ; |
| font-size : 16px ; |
| color : #fff ; |
| font-family : arial, sans-serif ; |
| } |
| #result { |
| margin : 30px auto ; |
| width : 180px ; |
| height : 180px ; |
| border-radius : 50% ; |
| line-height : 180px ; |
| font-size : 48px ; |
| font-weight : bold ; |
| background : #f44336 ; |
| box-shadow : 0 2px 10px rgba(0, 0, 0, 0.3) ; |
| } |
| #btn { |
| margin : 0 auto ; |
| width : 200px ; |
| padding : 5px ; |
| border-radius : 5px ; |
| background : #00aaff ; |
| box-shadow : 0 4px 0 #0088cc ; |
| cursor : pointer ; |
| } |
| #btn : hover { |
| opacity : 0.8 ; |
| } |
| #btn .pushed { |
| margin-top : 32px ; |
| box-shadow : 0 2px 0 #0088cc ; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="result">?</div> |
| <div id="btn">あなたの運勢は？</div> |
| <script> |
| (function() { |
| 'use strict'; |
| document.getElementById('btn').addEventListener('click' , function() { |
| // 0 - n |
| // Math.floor(Math.random() * (n + 1)) |
| // 0 - 3 |
| // Math.floor(Math.random() * 4 ) |
| //0 - 0.9999..... |
| //0 - 3.9999..... |
| //0 - 3 |
| var results = ['大吉', '小吉' , '中吉' , '凶' ,'吉'] ; |
| var result = Math.floor(Math.random() * results.length ); |
| // document.getElementById('result'). innerHTML = 'hit' ; |
| document.getElementById('result'). innerHTML = results [result] ; |
| }); |
| document.getElementById('btn').addEventListener('mousedown', function() { |
| this.className = 'pushed'; |
| }); |
| document.getElementById('btn').addEventListener('mouseup', function() { |
| this.className = ''; |
| }); |
| })(); |
| </script> |
| </body> |
| </html> |
| </html> |
| ``` |
