怎么在html5中使用type="range"屬性實現(xiàn)一個滑塊功能

這篇文章將為大家詳細(xì)講解有關(guān)怎么在html5中使用type="range"屬性實現(xiàn)一個滑塊功能，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

公司主營業(yè)務(wù)：成都網(wǎng)站建設(shè)、做網(wǎng)站、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊有機(jī)會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)公司推出天門免費做網(wǎng)站回饋大家。

html5實現(xiàn)滑塊功能之type="range"屬性

1.html5中添加了關(guān)于滑塊的標(biāo)簽,其實際是擴(kuò)展了input標(biāo)簽,type屬性值為range。

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

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" &omicron;nchange="print()" />
        <!--顯示滑塊組件的當(dāng)前值-->
        <p>當(dāng)前值為:<span id="print">0</span></p>
        <!--控制按鈕-->
        <button id="start" &omicron;nclick="start()">播放</button>
        <button id="stop" &omicron;nclick="stop()">停止</button>
    </div>
    
</body>
</html>

<script type="text/javascript">
    //定義一個標(biāo)識符,用于判斷用戶點擊開始按鈕或暫停按鈕
    var choose = true;

    //此函數(shù)用于顯示滑塊的當(dāng)前值
    function print(){
        //獲取信息
        var value = parseFloat($("#slider").val());
        //將信息顯示
        $("#print").text(value);
    }

    //此函數(shù)負(fù)責(zé)修改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ù)負(fù)責(zé)開始按鈕
    function start(){
        choose = true;
        setInterval("changeVal()",10);
    }

    //此函數(shù)負(fù)責(zé)暫停按鈕
    function stop(){
        choose = false;
    }
</script>

關(guān)于怎么在html5中使用type="range"屬性實現(xiàn)一個滑塊功能就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

網(wǎng)頁名稱：怎么在html5中使用type="range"屬性實現(xiàn)一個滑塊功能
本文鏈接：http://jinyejixie.com/article44/gggdhe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計公司、Google、全網(wǎng)營銷推廣、自適應(yīng)網(wǎng)站、標(biāo)簽優(yōu)化、動態(tài)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

怎么在html5中使用type="range"屬性實現(xiàn)一個滑塊功能