第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

帶垂直線的進(jìn)度條

帶垂直線的進(jìn)度條

阿晨1998 2023-07-14 14:47:04
我正在 otree 中實(shí)現(xiàn)荷蘭語和英語拍賣的模擬。對于界面,我使用進(jìn)度條來顯示供應(yīng)商獲得的價(jià)格。在英式拍賣中,價(jià)格每半秒增加一次,在荷蘭式拍賣中,價(jià)格每半秒減少一次?,F(xiàn)在我想為供應(yīng)商的成本添加一條垂直線,該線每輪都會變化。如何在進(jìn)度條上添加垂直線?<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貢獻(xiàn)1752條經(jīng)驗(yàn) 獲得超4個贊

  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設(shè)置位置:

...

    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>


查看完整回答
反對 回復(fù) 2023-07-14
  • 1 回答
  • 0 關(guān)注
  • 149 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號