使用[HTML5] range控件实现进度条控制

HTML5有一个新的控件input type="range", 可以实现trackBar或者Slider功能，你可以用来实现进度条的控制，这样的功能可以用来实现图片的快速浏览，而不是一张一张的看。为了动态响应拖动进度条的事件，你需要使用onchange事件，以下为详细步骤。

添加控件到网页代码中

<input type="range" id="trackBar" min="1" max="10" step="1" value="1" />。

此处min, max是进度条的对应的最小和最大值， step是步进值

value 是进度值，用户可以获取或者设置

添加处理代码

<script>

var trackBar = document.getElementById("trackBar");

//初始化trackBar

trackBar.min = 1;

trackBar.max = 100;

trackBar.step = 1;

trackBar.value = 1;

            trackBar.addEventListener("change",function(){           alert(this.value);

          //其他功能处理代码，比如图片浏览器的跳转  });

</script>

以上代码可以捕获由于人为拖动后进度条位置的变化而产生的事件，this.value是实际进度条的当前值。