読者です 読者をやめる 読者になる 読者になる

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>

気がついたこと

  • ブラウザのmeter要素の描画は色依存な気がします(Opera 12.15、Chrome 28 dev、Firefox 24.0a1)。
  • colorプロパティでゲージのバーの色を設定することはできないようです。
  • Chrome 28 devではゲージのバーの背景色をbackground-colorで設定することはできないようです。
  • Opera 12.15はhigh属性値以上でhighにしてしまいます。