vue8小时带刻度的时间轴，根据当前时间实时定位

效果图：

需求：

1 开始时间、结束时间可配置
2 时差固定8小时
3 根据当前时间初始化位置
4 每隔5s刷新位置
5 超过结束时间停止刷新

HTML:

  <div class="time-axis">
    <div class="startTime">{{start_time}}</div>
    <div class="endTime">{{end_time}}</div>
    <!-- 小时刻度 -->
    <div class="hourLine">
      <div class="line" v-for="index of 8" :key="index" :style="{left: `${90*(index-1)}px`}">
        <div class="secondLine">
          <div class="second" v-for="index of 4" :key="index" :style="{left: `${18*(index-1)}px`}"></div>
        </div>
      </div>
    </div>
    <!-- 指针 -->
    <div class="point" :style="{left: `${current_position}px`}" v-if="pointFlag">
      <div class="currentTime">{{current_time}}</div>
      <img src="@/assets/img/gateway/timeLine_point.png" alt="">
    </div>
  </div>

JS:

props: {
    start_time: {
      type: String,
      default: '',
    },
    end_time: {
      type: String,
      default: '',
    },
    currentTimeFromP: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      current_time: '10:00:00',
      allSecond: 0,
      st_second: '',
      et_second: '',
      current_second: '',
      current_position: '',
      timer: null,
      pointFlag: true,
    }
  },
  beforeDestroy() {
    if(this.timer) {
      clearInterval(this.timer);
    }
  },
  mounted() {
    this.st_second = this.hmsToS(this.start_time)
    this.et_second = this.hmsToS(this.end_time)
    // 8小时总秒
    this.allSecond = this.hmsToS(this.end_time) - this.hmsToS(this.start_time)
    // 计算当前位置
    this.current_position = this.bibliography() * 722
    // 判断当前时间是否超过结束时间或者小于开始时间
    if(this.current_second>=this.et_second || this.current_second<this.st_second ) {
      this.$message.warning('当前时间不在服务范围内')
      this.pointFlag = false
    } else {
      this.timer = setInterval(() => {
        if(this.current_second>=this.et_second || this.current_second<this.st_second ) {
          clearInterval(this.timer)
          this.$message.warning('当前时间不在服务范围内')
          this.pointFlag = false
        }
        this.current_position = this.bibliography() * 722
      }, 5000)
    }
  },
  methods: {
    // 比例 = (当前时间 - 开始时间) / 总秒数
    bibliography() {
      // 当前时间秒数
      this.current_second = this.hmsToS(this.nowDataToHMS())
      let key = (this.current_second - this.st_second) / this.allSecond
      return key
    },
    // 时分秒转化秒
    hmsToS(e) {
      var time = e;
      var len= time.split(':')
      if(len.length==3){
        var hour = time.split(':')[0];
        var min = time.split(':')[1];
        var sec = time.split(':')[2];
        return  Number(hour*3600) + Number(min*60) + Number(sec);
      }
      if(len.length==2){
        var min = time.split(':')[0];
        var sec = time.split(':')[1];
        return Number(min*60) + Number(sec);
      }
      if(len.length==1){
        var sec = time.split(':')[0];
        return Number(sec);
      }
    },
    // 当前时间时分秒
    nowDataToHMS() {
      let myDate = new Date()
      let str = myDate.toTimeString()
      this.current_time = str.substring(0,8)
      return this.current_time
    },
  },

CSS:

.time-axis {
  position: relative;
  height: 26px;
  border-left: 2px solid rgba(255,255,255,.6);
  border-right: 2px solid rgba(255,255,255,.6);
  width: 720px;
  background: rgba(0,0,0,.2);
  color: #fff;
  .startTime {
    position: absolute;
    top: -20px;
    left: -25px;
    color: #fff;
  }
  .endTime {
    position: absolute;
    top: -20px;
    right: -25px;
    color: #fff;
  }
  .hourLine {
    height: 70%;
    width: 100%;
    position: absolute;
    bottom: 0;
    display: flex;
    .line {
      position: absolute;
      width: 90px;
      height: 100%;
      border-right: 1px solid rgba(255,255,255,.6);
      &:nth-child(8) {
        border-right: none;
      }
      .secondLine {
        height: 50%;
        width: 100%;
        position: absolute;
        bottom: 0;
        display: flex;
        .second{
          position: absolute;
          width: 18px;
          height: 100%;
          border-right: 1px solid rgba(255,255,255,.3);
        }
      }
    }
  }
  .point {
    position: absolute;
    left: -8px;
    .currentTime {
      position: absolute;
      bottom: -10px;
      left: -18px;
      color: #00D4FF;
    }
    img {
      width: 16px;
      height: 46px;
    }
  }
}

***如有转载请注明出处！！！