<input type="range">標籤用法例項程式碼

antzone發表於2017-03-07

在HTML5中，又新增許多新<input>控制元件型別，比較實用的一個就是<input type="range">，以滑竿的方式來調整value值，在這以前需要通過模擬才能夠實現，下面就通過程式碼例項介紹一下它的作用。

程式碼如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<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規定最小值。還有一個要特別注意的點是:實現此平滑拖動效果最好用onmousemove事件，在各個瀏覽器表現都是一致的，使用onchange事件在最新的谷歌和火狐瀏覽器中並不是平滑的。

相關文章