Question

我想知道是否有任何方法可以自动设置滑块，例如，当我点击播放按钮时，滑块栏和值会自动增加。这是我的滑动条：JSFiddle

基本上我想要的是点击播放按钮，然后滑动条及其值将自动增加，并在每个值之前停止几秒钟。

通过我的研究，我知道有一种名为setInterval()的方法会自动重复某个事件，但我不确定如何实现它。

在我添加了自动播放功能后，这是我的Fiddle，但我的滑块没有出来。

Answer 1

[更新的答案]

以下是您的最终解决方案（我希望），Fiddle

基本上你使用step方法来增加时间，但是当鼠标移动滑块时会调用step。您应该使用change方法更新时间值。

$("#slider-range").slider({       
    min: 0,
    max: 1380,
    step: stepOne,
    animate: "slow",
    change: function(e,ui)
    {
        var hours = Math.floor(ui.value / 60);
        var minutes = ui.value - (hours * 60);

        if(hours.length == 1) hours = '0' + hours;
        if(minutes.length == 1) minutes = '0' + minutes;
        if(minutes==0)minutes = '00';

        // Convert 24 hours format into 12
        if(hours == 0){
            hours = 12;
            ext = "AM";
        }
        if(hours == 12){
            ext = "PM";
        }
        if(hours > 12){
            hours = hours - 12;
            ext = 'PM';
        }

        $('#sliderValue').html(hours+':'+minutes + ext);
    }
});

Answer 2

http://jsfiddle.net/0twk5L7y/10/

$('#btnPlay').on('click', function(){
    // call a recursive function here...
});

您可以在功能中更改逻辑。但通常我使用前端框架，如Ember或Angular，可以帮助您轻松实现您想要的功能。

JQuery设置事件触发的计时器

2 个答案: