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

来源：互联网发布：淘宝40平装修编辑：程序博客网时间：2024/06/03 18:03
<!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>
0 0