溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

html5中對(duì)于滑塊功能的type="range"屬性實(shí)例代碼分析

發(fā)布時(shí)間：2022-03-01 11:06:54 來(lái)源：億速云 閱讀：181 作者：iii 欄目：開(kāi)發(fā)技術(shù)

本篇內(nèi)容主要講解“html5中對(duì)于滑塊功能的type="range"屬性實(shí)例代碼分析”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“html5中對(duì)于滑塊功能的type="range"屬性實(shí)例代碼分析”吧!

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>

到此，相信大家對(duì)“html5中對(duì)于滑塊功能的type="range"屬性實(shí)例代碼分析”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手