如何实现下图的效果呢?

作者站长头像
站长
· 阅读数 5

如何实现下图的效果呢?

回复
1个回答
avatar
test
2024-06-26

1.设置一个外层div元素盒子A,元素A的宽度为屏幕宽度2.以整个时间段(图中为10:00-16:00)为维度获得计量时间 按小时的话为6小时,按分钟的话为360分钟,然后A的宽度/360 获得每分钟占用的元素宽度 W3.根据车辆的进入时间-开始时间(图中为10:00)得到分钟差值,比如某车辆10:40分进入,10:40与10:00的差值就是40分钟。将40分钟*每分钟占用的元素宽度W即可得到该车辆元素距离外层div元素A的padding值4.根据步骤3得到的动态padding值设置车辆元素的左内边距值5.以此类推,车辆元素的宽度可以通过计算车辆离开时间-车辆进入时间的差值得到,从而根据这个插值设置车辆元素的宽度

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容