首頁猿問帶垂直線的進度條

帶垂直線的進度條

JavaScript

阿晨1998 2023-07-14 14:47:04

我正在 otree 中實現荷蘭語和英語拍賣的模擬。對于界面，我使用進度條來顯示供應商獲得的價格。在英式拍賣中，價格每半秒增加一次，在荷蘭式拍賣中，價格每半秒減少一次?，F在我想為供應商的成本添加一條垂直線，該線每輪都會變化。如何在進度條上添加垂直線？<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>

查看完整描述

1 回答

溫溫醬

TA貢獻1752條經驗獲得超4個贊

添加一個子元素<div id=myBarPrice></div>到<div id="myProgress">.
向選擇器添加position: relative;屬性#myProgress。
為新元素添加新樣式塊：

#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="costLine">{{player.cost}}</div>

</div>

Current price is:

</div>

反對回復 2023-07-14

1 回答
0 關注
138 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

帶垂直線的進度條

帶垂直線的進度條

1 回答

添加回答