html5實現滑塊功能之type="range"屬性

1.html5中添加了關于滑塊的標簽,其實際是擴展了input標簽,type屬性值為range。

2.感覺挺有意思,就做了一個關于滑塊的動畫的例子，可以通過開始和結束按鈕來控制滑塊的滑動和停止，有點類似視頻的自動播放和暫停,同時還時時顯示了該滑塊的值。

3.具體代碼如下所示

數字遞增組件

當前值為:0

播放

停止

//定義一個標識符,用于判斷用戶點擊開始按鈕或暫停按鈕

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;

}

總結

以上所述是小編給大家介紹的html5實現滑塊功能之type="range"屬性，希望對大家有所幫助，也非常感謝大家對米云問答網站的支持！

總結

以上是生活随笔為你收集整理的html如何制作滑块,网页制作html5实现滑块功能之type=quot;rangequot;属性-建站-建站教程-建站方法-米云建站 - 米云问答...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。