話不多說，先上圖
已經過去的時間段用藍色，正在進行的用綠色表示，還沒有進行的用灰色表示，當時間標軸移動會自動變化。
外面樣式是用element寫的，el-card卡片屬性，布局用到彈性布局
思路：
一、先布局，讓整個div設定成絕對定位，時間標軸設定成相對定位，這樣標軸就可以根據left屬性來移動了，布局和css如下
}
6:00
12:00
18:00
24:00
6:00
市前檢查
= 117.58? (move < 182.24? '#339900':'#6699ff'):'#f7f7f7'}">開市
= 183.24? (move < 387.94? '#339900':'#6699ff'):'#f7f7f7'}">交易
= 388.94? (move < 453.6? '#339900':'#6699ff'):'#f7f7f7'}">閉市
= 454.6? (move < 582.91? '#339900':'#6699ff'):'#f7f7f7'}">清算
= 583.91? '#339900' : '#f7f7f7'}">夜市
#con
#one
#two
#three
#fourth
#five
#tally
#tallyz
#check
#open
#pay
#clos
#sum
#night
二、獲取當前系統時間，獲取時間的時候將時間顯示，然後將時間轉成分鐘，為啥要轉成分鐘呢？因為得到分鐘就可以計算出每分鐘移動多少畫素了。6：00的時候標軸不移動，也就是left:0px,當6：01的時候，分鐘數就是：（6-6）*60 + 01 = 1分鐘 ，用總畫素/6：00到24：00的時長1080分鐘） = 每分鐘要走的畫素數，這裡24：00之前的分鐘數和之後的是分開算的，因為系統時間表示24：00是00：00，所以用(0-6)*60 +minute就不對了。
var ve = new vue(
methods:,1000);
},//獲取時間的時候，不足兩位數的補零
fnw(str),
//獲取當前系統時間，只獲取時和分
nowtime()else
},
//定時器，每隔1分鐘增加一次畫素
getmove(),60000);
},//增加的畫素，因為div長度不一致,所以每分鐘移動的畫素不一樣，以24：00做分界線
moveadd()
}else}},
//獲取當前標軸的位置ve.minutes * (582 / 1080)
getpx()else
ve.getmove();
},}；
ve.gettime();
ve.getpx();
}
}
分享乙個前輩的NPOIhelper
即拿即用 using npoi.hpsf using npoi.hssf.usermodel using npoi.ss.usermodel using npoi.ss.util 下面是主要方法 public class npoihelper datatable匯出到excel的memorystre...
分享乙個合適的理由
馬上大二了，21歲的小夥子，很多人問我為什麼還不談戀愛。學生時代，周圍接觸最多的人都年齡相仿，所以價值觀都差不多，都想著將來有個好工作，有個好戀人。正因為理想差不多，所以2個人在一起會很開心，也就很容易走到了一起。至於戀愛是否會影響學習，這裡就不說了，因為既有促進作用，也有消極作用，因人而異。但是，...
Tip分享 js判斷當前時間是否在乙個時間段內
判斷當前時間14 40是否在12 00和18 00這個時間段內，在的話返回true，不在返回false。可用於狀態判斷！直接上 time range begintime,endtime var stre endtime.split if stre.length 2 var b new date va...