带垂直线的进度条
Progressbar with vertical line
我正在 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">0</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" />
- 将子元素
<div id=myBarPrice></div>
添加到 <div id="myProgress">
。
- 将
position: relative;
属性添加到 #myProgress
选择器。
- 为新元素添加新样式块:
#myBarPrice {
background-color: #FF0000;
width: 2px;
height: 100%;
position: absolute;
right: 100%;
top: 0;
}
- 用js设置
#myBarPrice
位置:
...
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">0</div>
<div id=myBarPrice></div>
</div>
我正在 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">0</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" />
- 将子元素
<div id=myBarPrice></div>
添加到<div id="myProgress">
。 - 将
position: relative;
属性添加到#myProgress
选择器。 - 为新元素添加新样式块:
#myBarPrice {
background-color: #FF0000;
width: 2px;
height: 100%;
position: absolute;
right: 100%;
top: 0;
}
- 用js设置
#myBarPrice
位置:
...
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">0</div>
<div id=myBarPrice></div>
</div>