ラベル使用例コード

7344 ワード
input
ラベル使用例コード:
HTML 5には、さらに多くの新しいコントロールタイプが追加されています.比較的実用的なのはで、スライダでvalue値を調整する前にシミュレーションで実現する必要がありましたが、コードインスタンスでその役割を説明します.
コードは次のとおりです.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>    </title>
<style type="text/css"> 
#demo{
  width:50px;
  height:50px;
  background:red;
}
</style> 
<script type="text/javascript"> 
window.onload=function(){
  var demo=document.getElementById("demo");
  var range=document.getElementById("range");
  range.onmousemove=function(){
    demo.style.width=this.value+"px";
  }
}
</script> 
</head> 
    
<body> 
<div id="demo"></div>
<input type="range" step="1" max="500" min="10" value="50" id="range"/>
</body> 
</html>

以上のコードはスムーズに空間ボタンをドラッグしてdivの幅を調整することができて、みんなは特にこの空間のいくつかの常用属性に注意することができて、stepは規定して、ドラッグデータの変動の最小スパン、maxは最大値を規定して、minは最小値を規定します.もう1つ注意したいのは、このスムーズなドラッグ効果を実現するにはonmousemoveイベントを使用することが望ましいことです.各ブラウザで一致しており、onchangeイベントを使用すると最新のグーグルや火狐ブラウザではスムーズではありません.
原文の住所は次のとおりです.http://www.51texiao.cn/HTML5jiaocheng/2015/0613/4141.html
最初のアドレスは次のとおりです.http://www.softwhy.com/
html 5 indexeddbの簡明api
html 5におけるcanvasの知識蓄積1---画板のサイズと実際の表示サイズ