H5标准中引入了支持输入范围的input，有了这个属性，我们在写调整一些图片大小或是颜色时就可以用到这个属性，不用再用原生的JS去写一个拖拽效果了，可以很方便的实现人性化的用户操作，以下是一个拖动改变背景颜色的实例。
代码实现如下：
代码语言：javascript复制<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>H5新特性范围输入的运用</title>
<style>
#page {
width: 300px;
height: 200px;
margin: auto;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
#box {
width: 300px;
height: 100px;
border: 1px solid #aaa;
}
#rangeBox {
height: 102px;
line-height: 33px;
text-align: center;
}
input[type="range"] {
vertical-align: middle;
}
</style>
</head>
<body>
<div id="page">
<div id="box"></div>
<div id="rangeBox">
红色: <input type="range" max="255" value="255" id="red" /><span>255</span>
<br />
绿色: <input type="range" max="255" value="255" id="green" /><span>255</span>
<br />
蓝色: <input type="range" max="255" value="255" id="blue" /><span>255</span>
<br />
</div>
</div>
<script>
var list = document.querySelectorAll('[type="range"]');
for (var i = 0; i < list.length; i ) {
var range = list[i];
range.onchange = function () {
this.nextElementSibling.innerHTML = this.value;
setBoxBG();
}
};
// 设置背景的方法
function setBoxBG() {
var r = red.value;
var g = green.value;
var b = blue.value;
box.style.background = `rgb(${r},${g},${b})`;
}
</script>
</body>
</html>
