Javascript 如何在两个日期之间移动进度条滑块/指针？

我用html、css和javascript/jQuery开发了进度条。
现在，我试图移动垂直线滑块/指针图像，随着时间的推移接近结束日期。滑块/指针只能在开始日期和结束日期之间移动

这是我到目前为止尝试的小提琴链接：

我对javascript有问题。代码如下：

var start = new Date(2021, 3, 20), 
  end = new Date(2021, 4, 20), 
  today = new Date(), 
  p = Math.round(((today - start) / (end - start)) * 100) + '%';
// Update the progress bar
$('img').css("margin-left", p).after().append(p);

滑块/指针也在容器外移动。希望能得到各位专家的帮助：）

谢谢，

---

Richa

由于

今天

可能在两个日期之外，因此需要将

p

限制为0-100。 此外，您的图像在每一侧都有非常宽的边框，显示在区域之外

var开始=新日期（2021,3,20），
结束=新日期（2021年4月20日），
今天=新日期（），
p=Math.max（0，Math.min（100，Math.round）（（今天开始）/（结束开始））*100））+“%”；
//更新进度条
$（'.indicator'）.css（“宽度”，p）.find（“跨度”）.text（p）；
//更新开始/结束日期
$（'.ldate'）.text（start.getDate（）+“/”+（start.getMonth（）+1）+“/”+start.getFullYear（））；
$（'.rdate'）.text（end.getDate（）+“/”+（end.getMonth（）+1）+“/”+end.getFullYear（））；
//演示
p=Math.max（0，Math.min（100，Math.round）（（今天-开始）/（结束-开始））*100））；
!函数滑块（）
{
$（'.indicator'）.css（“宽度”，p+“%”）。查找（“跨度”）。文本（p+“%”）；
如果（++p>100）
p=0；
设置超时（滑块，200）；
}（）

.container{
背景：灰色；
填充：10px；
显示：块；
位置：相对位置；
}
.container.pbcolor{
显示器：flex；
弹性基准：100%；
/*填充：23px 10px*/
背景：#ffedc4；
}
.container.mdate{
字体大小：粗体；
显示器：flex；
弹性基准：100%；
边缘顶部：10px；
颜色：#fcfc；
}
.container.mdate.ldate{
显示：内联块；
弹性基准：50%；
}
.container.mdate.rdate{
显示：内联块；
文本对齐：右对齐；
弹性基准：50%；
}
/*增加*/
.集装箱.指示器{
最小宽度：2px；
顶部：0px；
/*边框：1px纯黑*/
溢出：隐藏；
背景图像：url（'https://www.linkpicture.com/q/vlt_1_1.png');
背景重复：无重复；
背景尺寸：包含；
背景位置：右；
文本对齐：居中；
}
.pbcolor
{
高度：65px；
线高：65px；
}
.指示器>img
{
高度：65px；
浮动：对；
}
.ltext
{
浮动：左；
位置：绝对位置；
}
.rtext
{
浮动：对；
位置：绝对位置；
右：10px；/*与.container中的填充相同*/
}

左边的文字
右边的文字
20/4/202120/5/2021

首先，您遇到了什么问题？其次，您的JSFIDLE没有任何javascript@vanowm，我已经更新了JSFIDLE链接。我面临的问题是，当今天日期接近结束日期时，垂直蓝线图像正在从进度条移开。我认为问题出在javascript的最后一行，但不知道修复方法。将jQuery的最后一行替换为element.style.marginleft=p。我离解决方案越来越近了，但在右侧div之后，静止图像正在移动，此时它100%感谢@vanowm为您提供的时间和帮助。谢谢。出于演示目的，我下载了免费的公共域图像，并没有检查其边界。有没有一种方法可以让我获得无边框的图像，也就是2px行，这样我就可以在JSFIDLE中测试它？我还看到您稍微改变了html的结构。我也会尝试在我的源代码中这样做。谢谢，我已经用2倍宽的图片更新了代码。@vanown这太完美了。你是天才。将答案标记为正确。非常感谢您的帮助和时间。您好@vanown，如果我想在进度条区域内添加两个固定文本，一个在左侧，另一个在右侧。怎么做？如果我再加上一个div或span，我会得到两个百分比texts@Richa我已经用两边的文字更新了代码。