html5 meter タグを使ってゲージを表示

html5 で導入された meter タグを使って数値、割合を表示してみましょう。

<meter value="70" low="30" max="100" high="90" optimum="70">値:70/100</meter>
値:70/100

<meter value="20" low="30" max="100" high="90" optimum="70">値:20/100</meter>
値:20/100

【属性】
value : 値
low : 下限値
high : 上限値
optimum : 最適値

value 属性の値が low 属性の値より小さいとゲージがオレンジ色になります。

コメント

このブログの人気の投稿

PHP クリックされたボタンに応じて処理を実行する

JavaScript Date(日付) データを yyyy/MM/dd 形式にフォーマットする

jQuery ページ初期表示時に処理を実行