Javascript 带垂直线的进度条

我正在otree实现荷兰和英国拍卖的模拟。
对于界面，我使用进度条显示供应商获得的价格。
在英国拍卖中，价格每半秒上涨一次；在荷兰拍卖中，价格每半秒下跌一次。

现在我想为供应商的成本添加一条垂直线，每一轮都会发生变化。 如何向进度条添加垂直线

#我的进展{
宽度：100%；
背景色：#ddd；
}
#真菌{
宽度：100%；
背景色：#ddd；
}
#我的酒吧{
宽度：100%；
高度：30px；
背景色：#40bf80；
文本对齐：居中；
线高：30px；
颜色：白色；
}
#海岸线{
宽度：0%；
高度：30px；
背景色：#FF0000；
文本对齐：居中；
线高：30px；
颜色：白色；
}
.bg信息{
背景色：#ddd；
}
这一轮的费用是：
{{player.cost}
目前的价格是：
$200


var left_line=（{{player.cost}-101）；
var right_line=（200-{{player.cost}json}）；
让cost={{player.cost | json}
让bot_-stop={{player.bot_-stop}；
让price={{Constants.start_value}json}；
var拍卖；
var拍卖2；
document.getElementById（“costLine”）.innerHTML=“$”+成本；
document.getElementById（“costLine”）.style.width=cost-100+“%”；
函数startaAction（）{
document.getElementById（“停止按钮”）.disabled=false；
document.getElementById（“开始按钮”）.disabled=true；
拍卖=设置间隔（函数（）{
如果（价格==自动停止）{
document.getElementById（“Message”）.innerHTML='其他供应商已退出。您以'+bot\u stop；
document.getElementById（“停止按钮”）.innerHTML=“下一页”
停止拍卖（）；
}
如果（价格！=自动停止）{
价格=价格-1；
document.getElementById（“myBar”）.innerHTML='$'+价格；
document.getElementById（“myBar”）.style.width=（price-100）+'%'；
}
},500)
}
函数stopAuction（）{
document.querySelector（“[name=winning\u price]”），value=price；
document.getElementById（“停止按钮”）.innerHTML=“下一页”
净空间隔（拍卖）；
}
开始拍卖
辍学

将子元素

添加到

中

添加

位置：相对属性到
#myProgress
选择器

为新元素添加新样式块：

用js设置

#myBarPrice

位置：

HTML代码：

Your costs for this round are:
<div id="myCosts">
  <div id="costLine">{{player.cost}}</div>
</div>
Current price is:
<div id="myProgress">
  <div id="myBar">$200</div>
  <div id=myBarPrice></div>
</div>

您这一轮的成本是：
{{player.cost}
目前的价格是：
$200

...
    document.getElementById("costLine").innerHTML = "$"+cost;
    document.getElementById("costLine").style.width = cost-100+'%';
    document.getElementById("myBarPrice").style.right = cost+'%'; // <===== 
    function startAuction(){
        document.getElementById("stop_button").disabled = false;
        document.getElementById("start_button").disabled = true;
...

#myProgress {
  width: 100%;
  background-color: #ddd;
  position: relative;
}
#myCosts {
  width: 100%;
  background-color: #ddd;
}
#myBar {
  width: 80%;
  height: 30px;
  background-color: #40bf80;
  text-align: center;
  line-height: 30px;
  color: white;
}
#myBarPrice {
  background-color: #FF0000;
  width: 2px;
  height: 100%;
  position: absolute;
  right: 40%;
  top: 0;
}
#costLine{
  width: 60%;
  height: 30px;
  background-color: #FF0000;
  text-align: center;
  line-height: 30px;
  color: white;
}
.bg-info{
    background-color: #ddd;
}

Your costs for this round are:
<div id="myCosts">
  <div id="costLine">{{player.cost}}</div>
</div>
Current price is:
<div id="myProgress">
  <div id="myBar">$200</div>
  <div id=myBarPrice></div>
</div>