Question

我无法弄清楚为什么鼠标不拖动进度条，检查控制台时没有收到任何错误。我认为正在检测到鼠标正在拖动，但是进度宽度没有更新。

// php文件

$(document).ready(function() {

    $(".playingBar .progressBar").mousedown(function() {
        mouseClicked = true;
    });

    $(".playingBar .progressBar").mousemove(function(event) {
        if(mouseClicked = true) {
            timeFromOffset(event, this);
        }
    });

    $(".playingBar .progressBar").mouseup(function(event) {
        timeFromOffset(event, this);
    });

    $(document).mouseup(function(event) {
        mouseClicked = false;
    });

});

    function timeFromOffset(mouse, progressBar) {
        var percentage = mouse.offsetX / $(progressBar).width() * 100;
        var seconds = audioElement.audio.duration = (percentage / 100);
        audioElement.setTime(seconds);
    }

// script.js文件

    var audioElement;
    var mouseClicked = false;

    function timeProgressBarUpdate(audio) {



 $(".progressTimer.current").text(timeFormat(audioElement.audio.currentTime));
$(".progressTimer.remaining").text(timeFormat(audioElement.audio.durati 
    on - audioElement.audio.currentTime));

        var barProgressed = (audioElement.audio.currentTime / 
    audioElement.audio.duration * 100)

        $(".playingBar .progress").css("width", barProgressed + "%");
    }

    function Audio() {

    this.currentPlaying;
    this.audio = document.createElement('audio');

    this.audio.addEventListener("canplay", function() {
        var timeLeft = timeFormat(this.duration);
        $(".progressTimer.remaining").text(timeLeft);
        //this refers to object which event is called on.
    });

    this.audio.addEventListener("timeupdate", function() {
        if(this.duration) {
            timeProgressBarUpdate()
        }
    });

    this.setTime = function(seconds) {
        this.audio.currentTime - seconds;
    }

    }

基于进度条的起点，鼠标应能够将进度条拖动到宽度，直到其水平位置。然后将更新css宽度，以便在屏幕上显示进度。

Answer 1

我发现了这个问题，在计算的var秒时不小心用了=而不是*。

这使秒等于0，这就是为什么它根本没有拖动的原因，因为单击时它重置为0，看起来好像没有拖动。

感谢那些发表评论的人。

鼠标未拖到进度条上的当前位置

1 个答案: