html5實現滑塊功能之type="range"屬性
1.html5中添加了關于滑塊的標簽,其實際是擴展了input標簽,type屬性值為range。
2.感覺挺有意思,就做了一個關于滑塊的動畫的例子，可以通過開始和結束按鈕來控制滑塊的滑動和停止，有點類似視頻的自動播放和暫停,同時還時時顯示了該滑塊的值。
3.具體代碼如下所示
<!DOCTYPE html><html><head> <title>數字遞增組件</title> <!--引入jquery--> <script type="text/javascript" src="jquery-1.8.3.js"></script></head><body> <!--做一個播放控件--> <div id="movie"> <!--定義滑塊組件--> <input type="range" id="slider" min="0" max="1000" step="1" value="0" οnchange="print()" /> <!--顯示滑塊組件的當前值--> <p>當前值為:<span id="print">0</span></p> <!--控制按鈕--> <button id="start" οnclick="start()">播放</button> <button id="stop" οnclick="stop()">停止</button> </div> </body></html><script type="text/javascript"> //定義一個標識符,用于判斷用戶點擊開始按鈕或暫停按鈕 var choose = true; //此函數用于顯示滑塊的當前值 function print(){ //獲取信息 var value = parseFloat($("#slider").val()); //將信息顯示 $("#print").text(value); } //此函數負責修改value的值 function changeVal(){ //使用純js實現 /*var value = parseFloat(document.getElementById("slider").value); //顯示信息 document.getElementById("print").innerHTML=value; if(value==1000){ return; }else{ document.getElementById("slider").value = value+10; }*/ //使用jquery實現 var value = parseFloat($("#slider").val()); //顯示信息 print(); //修改滑塊的值 if(value==1000 || choose == false){ return; }else{ $("#slider").val(value+1); } } //此函數負責開始按鈕 function start(){ choose = true; setInterval("changeVal()",10); } //此函數負責暫停按鈕 function stop(){ choose = false; }</script>總結
以上所述是小編給大家介紹的html5實現滑塊功能之type="range"屬性，希望對大家有所幫助，也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
