0

我正在 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>
<p></p>
<p id="Message"></p>
<script>
    var left_line = ({{player.cost|json}}-101);
    var right_line = (200-{{player.cost|json}});
    let cost = {{player.cost|json}}
    let bot_stop = {{player.bot_stop|json}};
    let price = {{Constants.start_value|json}};
    var Auction;
    var Auction2;
    document.getElementById("costLine").innerHTML = "$"+cost;
    document.getElementById("costLine").style.width = cost-100+'%';
    function startAuction(){
        document.getElementById("stop_button").disabled = false;
        document.getElementById("start_button").disabled = true;
        Auction = setInterval(function(){
            if(price == bot_stop){
                document.getElementById("Message").innerHTML = 'The other supplier has dropped out. You win with a price of ' + bot_stop;
                document.getElementById("stop_button").innerHTML = 'Next Page'
                stopAuction();
            }
            if(price != bot_stop){
                price = price -1;
                document.getElementById("myBar").innerHTML='$'+price;
                document.getElementById("myBar").style.width = (price-100) +'%';
            }
        },500)

    }
    function stopAuction() {
        document.querySelector("[name=winning_price]").value = price;
        document.getElementById("stop_button").innerHTML = 'Next Page'
        clearInterval(Auction);
    }
</script>
<button type="button" class="otree-btn-next btn btn-primary" id="start_button" onclick="startAuction()">Start Auction</button>
<button class="otree-btn-next btn btn-primary" disabled id="stop_button" onclick="stopAuction()">Drop Out</button>
<p></p>
<p></p>
<input  type="hidden" name="winning_price" />

在此处输入图像描述

4

1 回答 1

0
  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;
}
  1. #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>
于 2020-11-06T22:28:09.707 回答