js实现时间滑块的移动和自动播放

最新推荐文章于 2025-06-12 10:48:07 发布

原创最新推荐文章于 2025-06-12 10:48:07 发布 · 3.2k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一个基于HTML和JavaScript实现的滑块组件及自动播放功能，通过jQuery简化了DOM操作。用户可通过滑块调整时间，并触发自动播放机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head lang="en">
    <title></title>
    <script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        //滑块的移动
        $(function () {
            $("#red").slider({
                orientation: "horizontal",
                range: "min",
                max: 1440,
                step: 5,
                slide: refreshSwatch,
                change: refreshSwatch
            });
        });
        function refreshSwatch() {
            var red = $("#red").slider("value");
            var hours = Math.floor(red / 60);
            var minutes = red - (hours * 60);
            minutes = minutes - minutes % 5;

            if (hours < 10) {
                hours = "0" + hours;
            }
            if (minutes < 10) {
                minutes = "0" + minutes;
            }
            var time = hours + ':' + minutes;
            $("#showValue").text(time);
        }
        //设置自动播放
        var playinterval;
        $(".playframe").live("click", function (j) {
            j.preventDefault();  //取消事件的默认动作
            $("#btnbf").removeClass("playframe");
            $("#btnbf").addClass("stopframe");
            playinterval = setInterval(a, 50);
        });
        function a() {
            var j = $("#red").slider("option", "value");
            if (j < $("#red").slider('option', 'max')) {
                $("#red").slider("option", "value", j + 1);
                refreshSwatch();
            } else {
                i();
            }
        }
        function i() {
            clearInterval(playinterval);
            $("#btnbf").removeClass("stopframe");
            $("#btnbf").addClass("playframe");
        }
        $(".stopframe").live("click", function (j) {
            j.preventDefault();
            $("#btnbf").removeClass("stopframe");
            $("#btnbf").addClass("playframe");
            clearInterval(playinterval);
        });
    </script>
</head>
<body>
<div class="canvas_bottom">
    <!---自动播放-->
    <a style="position: absolute;left: 5px;top: 0;" class="playframe" id="btnbf"></a>
    <!--滑块的移动-->
    <div id="red" style="width:1042px;height: .1em;position: absolute;left: 32px;top: 7px;"></div>
    <div class="canvas_bottom_time">显示时间
        ：<span id="showValue"></span></div>
</div>
</body>
</html>