Video Player
00:00
00:00
表と裏をdocument.getElementByIdで、divタグのidから呼び出しています。CSS3でカードflipはtransform: rotateY(180deg);と表現します。
リフェレンス
KeyCode:The KeyboardEvent.keyCode read-only property represents a system and implementation dependent numerical code identifying the unmodified value of the pressed key.
keyup:Bind an event handler to the “keyup” JavaScript event, or trigger that event on an element.
コード
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 | <! DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >単語帳</ title > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < style > body { margin: 0; background: #e0e0e0; text-align: center; font-family: Verdana, sans-serif; color: #fff; } #btn { width: 200px; margin: 0 auto; padding: 7px; border-radius: 5px; background: #00aaff; box-shadow: 0 4px 0 #0088cc; cursor: pointer; } #btn:hover{ opacity: 0.8; } #card { margin: 60px auto 20px; width: 400px; height: 100px; cursor: pointer; font-size: 38px; line-height: 100px; perspective: 100px; transform-style: preserve-3d; transition: transform .8s; } #card-front, #card-back { display: block; width: 100%; height: 100%; border-radius: 5px; position: absolute; backface-visibility: hidden; } #card-front { background: #fff; color: #333; } #card-back { background: #00aaff; transform: rotateY(180deg); } .open { transform: rotateY(180deg); } </ style > </ head > < body > < div id = "card" > < div id = "card-front" ></ div > < div id = "card-back" ></ div > </ div > < div id = "btn" >NEXT</ div > < script > (function(){ 'use strict' var words = [ {'en': 'read', 'ja':'読む'}, {'en': 'write', 'ja':'書く'}, {'en': 'eat', 'ja':'食べる'}, {'en': 'run', 'ja':'走る'}, {'en': 'walk', 'ja':'歩く'} ]; var card = document.getElementById('card'); var cardFront = document.getElementById('card-front'); var cardBack = document.getElementById('card-back'); var btn = document.getElementById('btn'); card.addEventListener('click', function(){ flip(); }); btn.addEventListener('click', function(){ next(); }); function next(){ if (card.className === 'open') { card.addEventListener('transitioned', setCard); flip(); } else { setCard(); } } function setCard(){ var num = Math.floor(Math.random() * words.length); cardFront.innerHTML = words[num]['en']; cardBack.innerHTML = words[num]['ja']; card.removeEventListener('transitioned', setCard); } setCard(); window.addEventListener('keyup', function(e){ if (e.keyCode === 70){ flip(); } else if (e.keyCode === 78){ next(); } }); function flip(){ card.className = card.className === '' ? 'open' : ''; } })(); </ script > </ body > </ html > |