鼠标不会拖动到进度条上的当前位置

问题描述 投票:0回答:1

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

// 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宽度,以便在屏幕上显示进度。

javascript jquery
1个回答
0
投票

我发现了这个问题,在计算中意外地使用了=而不是*。

这使得秒数等于0,这就是为什么它根本没有拖动,因为它在点击时被重置为0,所以看起来好像没有拖动。

感谢那些评论帮助的人。

© www.soinside.com 2019 - 2024. All rights reserved.