首页 > 网络编程 > JavaScript > 基于vue实现8小时带刻度的时间轴根据当前时间实时定位功能

基于vue实现8小时带刻度的时间轴根据当前时间实时定位功能

福牛 5月 17, 2023 14 0

效果图：

-1

需求：

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

html:

  1. <div class=“time-axis”>
  2.      <div class=“startTime”>{{start_time}}</div>
  3.      <div class=“endTime”>{{end_time}}</div>
  4.      <!– 小时刻度 –>
  5.      <div class=“hourLine”>
  6.          <div class=“line” v-for=“index of 8” :key=“index” :style=“{left: `${90*(index-1)}px`}“>
  7.          <div class=“secondLine”>
  8.              <div class=“second” v-for=“index of 4” :key=“index” :style=“{left: `${18*(index-1)}px`}“></div>
  9.          </div>
  10.          </div>
  11.      </div>
  12.      <!– 指针 –>
  13.      <div class=“point” :style=“{left: `${current_position}px`}“ v-if=“pointFlag”>
  14.          <div class=“currentTime”>{{current_time}}</div>
  15.          <img src=“@/assets/img/gateway/timeLine_point.png” alt=“基于vue实现8小时带刻度的时间轴根据当前时间实时定位功能”>
  16.      </div>
  17.      </div>

js:

  1. props: {
  2.      start_time: {
  3.          type: String,
  4.          default: ”,
  5.      },
  6.      end_time: {
  7.          type: String,
  8.          default: ”,
  9.      },
  10.      currentTimeFromP: {
  11.          type: String,
  12.          default: ”,
  13.      },
  14.      },
  15.      data() {
  16.      return {
  17.          current_time: ’10:00:00′,
  18.          allSecond: 0,
  19.          st_second: ”,
  20.          et_second: ”,
  21.          current_second: ”,
  22.          current_position: ”,
  23.          timer: null,
  24.          pointFlag: true,
  25.      }
  26.      },
  27.      beforeDestroy() {
  28.      if(this.timer) {
  29.          clearInterval(this.timer);
  30.      }
  31.      },
  32.      mounted() {
  33.      this.st_second = this.hmsToS(this.start_time)
  34.      this.et_second = this.hmsToS(this.end_time)
  35.      // 8小时总秒
  36.      this.allSecond = this.hmsToS(this.end_time) – this.hmsToS(this.start_time)
  37.      // 计算当前位置
  38.      this.current_position = this.bibliography() * 722
  39.      // 判断当前时间是否超过结束时间或者小于开始时间
  40.      if(this.current_second>=this.et_second || this.current_second<this.st_second ) {
  41.          this.$message.warning(‘当前时间不在服务范围内’)
  42.          this.pointFlag = false
  43.      } else {
  44.          this.timer = setInterval(() => {
  45.          if(this.current_second>=this.et_second || this.current_second<this.st_second ) {
  46.              clearInterval(this.timer)
  47.              this.$message.warning(‘当前时间不在服务范围内’)
  48.              this.pointFlag = false
  49.          }
  50.          this.current_position = this.bibliography() * 722
  51.          }, 5000)
  52.      }
  53.      },
  54.      methods: {
  55.      // 比例 = (当前时间 – 开始时间) / 总秒数
  56.      bibliography() {
  57.          // 当前时间秒数
  58.          this.current_second = this.hmsToS(this.nowDataToHMS())
  59.          let key = (this.current_second – this.st_second) / this.allSecond
  60.          return key
  61.      },
  62.      // 时分秒转化秒
  63.      hmsToS(e) {
  64.          var time = e;
  65.          var len= time.split(‘:’)
  66.          if(len.length==3){
  68.          var hour = time.split(‘:’)[0];
  69.          var min = time.split(‘:’)[1];
  70.          var sec = time.split(‘:’)[2];
  71.          return Number(hour*3600) + Number(min*60) + Number(sec);
  72.          }
  73.          if(len.length==2){
  74.          var min = time.split(‘:’)[0];
  75.          var sec = time.split(‘:’)[1];
  76.          return Number(min*60) + Number(sec);
  77.          }
  78.          if(len.length==1){
  79.          var sec = time.split(‘:’)[0];
  80.          return Number(sec);
  81.          }
  82.      },
  83.      // 当前时间时分秒
  84.      nowDataToHMS() {
  85.          let myDate = new Date()
  86.          let str = myDate.toTimeString()
  87.          this.current_time = str.substring(0,8)
  88.          return this.current_time
  89.      },
  90.      },

css:

  1. .time–axis {
  2.      position: relative;
  3.      height: 26px;
  4.      border–left: 2px solid rgba(255,255,255,.6);
  5.      border–right: 2px solid rgba(255,255,255,.6);
  6.      width: 720px;
  7.      background: rgba(0,0,0,.2);
  8.      color: #fff;
  9.      .startTime {
  10.      position: absolute;
  11.      top: –20px;
  12.      left: –25px;
  13.      color: #fff;
  14.      }
  15.      .endTime {
  16.      position: absolute;
  17.      top: –20px;
  18.      right: –25px;
  19.      color: #fff;
  20.      }
  21.      .hourLine {
  22.      height: 70%;
  23.      width: 100%;
  24.      position: absolute;
  25.      bottom: 0;
  26.      display: Flex;
  27.      .line {
  28.          position: absolute;
  29.          width: 90px;
  30.          height: 100%;
  31.          border–right: 1px solid rgba(255,255,255,.6);
  32.          &:nth–child(8) {
  33.          border–right: none;
  34.          }
  35.          .secondLine {
  36.          height: 50%;
  37.          width: 100%;
  38.          position: absolute;
  39.          bottom: 0;
  41.          display: flex;
  42.          .second{
  43.              position: absolute;
  44.              width: 18px;
  45.              height: 100%;
  46.              border–right: 1px solid rgba(255,255,255,.3);
  47.          }
  48.          }
  49.      }
  50.      }
  51.      .point {
  52.      position: absolute;
  53.      left: –8px;
  54.      .currentTime {
  55.          position: absolute;
  56.          bottom: –10px;
  57.          left: –18px;
  58.          color: #00D4FF;
  59.      }
  60.      img {
  61.          width: 16px;
  62.          height: 46px;
  63.      }
  64.      }
  65. }

 

到此这篇关于基于vue实现8小时带刻度的时间轴根据当前时间实时定位功能的文章就介绍到这了,更多相关vue带刻度时间轴内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

标签

相关推荐

发表评论