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