带垂直线的进度条

Question

我正在 otree 中实现荷兰语和英语拍卖的模拟。
对于界面，我使用进度条来显示供应商获得的价格。
在英式拍卖中，价格每半秒增加一次，在荷兰式拍卖中，价格每半秒减少一次。

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

<style>

#myProgress {

  width: 100%;

  background-color: #ddd;

}

#myCosts {

  width: 100%;

  background-color: #ddd;

}

#myBar {

  width: 100%;

  height: 30px;

  background-color: #40bf80;

  text-align: center;

  line-height: 30px;

  color: white;

}

#costLine{

  width: 0%;

  height: 30px;

  background-color: #FF0000;

  text-align: center;

  line-height: 30px;

  color: white;

}

.bg-info{

    background-color: #ddd;

}

</style>

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>

Answer 1

添加一个子元素<div id=myBarPrice></div>到<div id="myProgress">.向选择器添加position: relative;属性#myProgress。为新元素添加新样式块：#myBarPrice {&nbsp; background-color: #FF0000;&nbsp; width: 2px;&nbsp; height: 100%;&nbsp; position: absolute;&nbsp; right: 100%;&nbsp; top: 0;}#myBarPrice用js设置位置：...&nbsp; &nbsp; document.getElementById("costLine").innerHTML = "$"+cost;&nbsp; &nbsp; document.getElementById("costLine").style.width = cost-100+'%';&nbsp; &nbsp; document.getElementById("myBarPrice").style.right = cost+'%'; // <=====&nbsp;&nbsp; &nbsp; function startAuction(){&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("stop_button").disabled = false;&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("start_button").disabled = true;...这是 codepen.io 中的一个模型CSS代码：#myProgress {&nbsp; width: 100%;&nbsp; background-color: #ddd;&nbsp; position: relative;}#myCosts {&nbsp; width: 100%;&nbsp; background-color: #ddd;}#myBar {&nbsp; width: 80%;&nbsp; height: 30px;&nbsp; background-color: #40bf80;&nbsp; text-align: center;&nbsp; line-height: 30px;&nbsp; color: white;}#myBarPrice {&nbsp; background-color: #FF0000;&nbsp; width: 2px;&nbsp; height: 100%;&nbsp; position: absolute;&nbsp; right: 40%;&nbsp; top: 0;}#costLine{&nbsp; width: 60%;&nbsp; height: 30px;&nbsp; background-color: #FF0000;&nbsp; text-align: center;&nbsp; line-height: 30px;&nbsp; color: white;}.bg-info{&nbsp; &nbsp; background-color: #ddd;}HTML 代码：Your costs for this round are:<div id="myCosts">&nbsp; <div id="costLine">{{player.cost}}</div></div>Current price is:<div id="myProgress">&nbsp; <div id="myBar">$200</div>&nbsp; <div id=myBarPrice></div></div>