快捷導(dǎo)航

基于vue實現(xiàn)8小時帶刻度的時間軸根據(jù)當(dāng)前時間實時定位功能

更新時間：2023年05月16日 17:19:27 作者：小馨

這篇文章主要介紹了基于vue實現(xiàn)8小時帶刻度的時間軸根據(jù)當(dāng)前時間實時定位功能,開始時間、結(jié)束時間可配置，根據(jù)當(dāng)前時間初始化位置，本文通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下

效果圖：

需求：

1 開始時間、結(jié)束時間可配置
2 時差固定8小時
3 根據(jù)當(dāng)前時間初始化位置
4 每隔5s刷新位置
5 超過結(jié)束時間停止刷新

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)
    // 計算當(dāng)前位置
    this.current_position = this.bibliography() * 722
    // 判斷當(dāng)前時間是否超過結(jié)束時間或者小于開始時間
    if(this.current_second>=this.et_second || this.current_second<this.st_second ) {
      this.$message.warning('當(dāng)前時間不在服務(wù)范圍內(nèi)')
      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('當(dāng)前時間不在服務(wù)范圍內(nèi)')
          this.pointFlag = false
        }
        this.current_position = this.bibliography() * 722
      }, 5000)
    }
  },
  methods: {
    // 比例 = (當(dāng)前時間 - 開始時間) / 總秒數(shù)
    bibliography() {
      // 當(dāng)前時間秒數(shù)
      this.current_second = this.hmsToS(this.nowDataToHMS())
      let key = (this.current_second - this.st_second) / this.allSecond
      return key
    },
    // 時分秒轉(zhuǎn)化秒
    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);
      }
    },
    // 當(dāng)前時間時分秒
    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;
    }
  }
}

到此這篇關(guān)于基于vue實現(xiàn)8小時帶刻度的時間軸根據(jù)當(dāng)前時間實時定位功能的文章就介紹到這了,更多相關(guān)vue帶刻度時間軸內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: