您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關怎么在html5中使用type="range"屬性實現(xiàn)一個滑塊功能,文章內容質量較高,因此小編分享給大家做個參考,希望大家閱讀完這篇文章后對相關知識有一定的了解。
html5實現(xiàn)滑塊功能之type="range"屬性
1.html5中添加了關于滑塊的標簽,其實際是擴展了input標簽,type屬性值為range。
2.感覺挺有意思,就做了一個關于滑塊的動畫的例子,可以通過開始和結束按鈕來控制滑塊的滑動和停止,有點類似視頻的自動播放和暫停,同時還時時顯示了該滑塊的值。
3.具體代碼如下所示
<!DOCTYPE html> <html> <head> <title>數(shù)字遞增組件</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; //此函數(shù)用于顯示滑塊的當前值 function print(){ //獲取信息 var value = parseFloat($("#slider").val()); //將信息顯示 $("#print").text(value); } //此函數(shù)負責修改value的值 function changeVal(){ //使用純js實現(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實現(xiàn) var value = parseFloat($("#slider").val()); //顯示信息 print(); //修改滑塊的值 if(value==1000 || choose == false){ return; }else{ $("#slider").val(value+1); } } //此函數(shù)負責開始按鈕 function start(){ choose = true; setInterval("changeVal()",10); } //此函數(shù)負責暫停按鈕 function stop(){ choose = false; } </script>
關于怎么在html5中使用type="range"屬性實現(xiàn)一個滑塊功能就分享到這里了,希望以上內容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內容。