js计算位置的问题？

Question

比如我有一个高度为374px的盒子

<div ></div>

然后高度374px===24小时

就是如果我传时间00:00-0:29进去，他能在对应位置展示一个黑条，我传00:30-00:59也是

简单画个图

不知道我说明白了没有。。。

https://codepen.io/wangshaoji...

Answer 1

计算 top 和 height，可以考虑用百分比，不受容器高度影响

关键计算代码

--s: calc(var(--sh) * 60 + var(--sm));
--e: calc(var(--eh) * 60 + var(--em));
top: calc(var(--s) / 1440 * 100%);
height: calc((var(--e) - var(--s) + 1) / 1440 * 100%);

效果

Pen: https://codepen.io/mannix-zho...

Answer 2

根据时间段算出top和bottom

function getPosition(time){
    // '00:30-00:59'
    let [st, et] = time.split('-')

    let [sh, sm] = st.split(':')
    let [eh, em] = et.split(':')
    
    let top = (sh * 60 + Number(sm)) / (24 * 60) * 374
    let bottom = (eh * 60 + Number(em)) / (24 * 60) * 374

    return {top, bottom}
}