带垂直线的进度条

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

1. 添加一个子元素<div id=myBarPrice></div>到<div id="myProgress">.

2. 向选择器添加position: relative;属性#myProgress。

3. 为新元素添加新样式块：

#myBarPrice {

  background-color: #FF0000;

  width: 2px;

  height: 100%;

  position: absolute;

  right: 100%;

  top: 0;

}

#myBarPrice用js设置位置：

...

    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;

...

这是 codepen.io 中的一个模型

CSS代码：

#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;

}

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>