meter要素でへぇボタン
HTML5 input type="range" で作る 「へぇボタン」 | WWW WATCHという記事を見て、自分もmeter要素で「へぇボタン」を作ってみました。
- キーボードでも使えるようにしました。
- 19へぇを超えたらhighになるようにしました。
- ユーザーがへぇの値を減らせないようになりました。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>へぇボタン</title> <style type="text/css"> .meter2 { background: gray; color: white; width: 10em; } </style> <script type="text/javascript"> window.addEventListener('load', function() { function hee(label) { var id = label.htmlFor; var meter = document.getElementById(id); if (meter) { meter.value += 1; var textNode = document.createTextNode(meter.value + 'へぇ'); meter.replaceChild(textNode, meter.firstChild); } } var buttons = document.querySelectorAll('label > .heeButton'); for (var i = 0, len = buttons.length; i < len; i++) { var button = buttons[i]; button.addEventListener('click', function() { hee(this.parentElement); }, false); } }, false); </script> </head> <body> <h1>へぇボタン</h1> <p><label for="hee1"><button class="heeButton">へぇ</button></label>: <meter id="hee1" value="0" min="0" max="20" high="19">0へぇ</meter></p> <p><label for="hee2"><button class="heeButton">へぇ</button></label>: <meter id="hee2" class="meter2" value="0" min="0" max="20" high="19">0へぇ</meter></p> </body> </html>