Javascript 创建可单击的进度条

我基本上构建的是一个基于webkit的控制器，它与一个名为Ecoute.app的程序进行通信

控制器有一个进度条，指示通过当前播放的歌曲所取得的进度，但我想通过单击来调整此条的位置

function barClick() { 
    var progress = Ecoute.playerPosition(); 
    var width = 142.5;

    var percentElapsed = progress / length;
    var position = width * percentElapsed;

    Ecoute.setPlayerPosition(position);  
}

是我所拥有的，使用

Ecoute.playerPosition（）

返回玩家的当前位置

宽度以前定义为一个动态值

 var width = 142.5 / length * progress + 1.63;

长度为当前赛道长度，进度为球员位置。这已经能够通过桌面控制器动态拉伸渐进覆盖图像以指示轨迹的位置

但是，第二个函数中使用的最大宽度似乎不允许第一个函数正常工作

---

如果您能帮助您确定正确的价值或方法，我们将不胜感激。

很难真正知道您的处境。我的猜测是，您在点击工作和确定在哪里设置进度方面遇到了问题

我的解决方案是有两个元素，一个包裹另一个。外部元素接受click事件，并且大小由内部元素反映。你将不得不做你自己的工作与Ecoute播放器集成，但我展示了如何计算百分比

var outside = document.getElementById('outside');
var inside = document.getElementById('inside');

outside.addEventListener('click', function(e) {
  inside.style.width = e.offsetX + "px";

  // calculate the %
  var pct = Math.floor((e.offsetX / outside.offsetWidth) * 100);
  inside.innerHTML = pct + " %";
}, false);

我没有做任何跨浏览器的工作，因为这是一个基于webkit的应用程序

演示：

在HTML中

0%已播放

在JQuery中

mediaPlayer = document.getElementById(playerId);
progressBar = document.getElementById('progress-bar');

progressBar.addEventListener('click', function(e) {
     var percentage = Math.floor((e.offsetX / this.offsetWidth) * 100);
     mediaPlayer.currentTime  = mediaPlayer.duration*(percentage/100);
     progressBar.value        = percentage;
     progressBar.innerHTML    = percentage + '% played';          
});

---

有没有办法将上述输出量化为整数？例如，只需将百分比输出设为一个十进制值，然后乘以当前轨迹长度即可确定轨迹位置？基本上，我需要按照函数barClick（）{var pct=？var length=track.property（'length'）；var result=length*pct Ecoute.setPlayerPosition（result）；}其中pct=？我试着插入math.floor（（e.offsetX/out.offsetwidth）*100）；即使更改了相应的ID，也没有用。@Cory您有内部和外部div吗？您获得要触发的事件，并且可以警告计算的pct值？我计算的pct是一个整数。试着把它除以100，然后再乘以长度，或者解释什么是无用的。