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

下面是基于Vue实现8小时带刻度的时间轴根据当前时间实时定位功能的完整攻略：

1.需求分析

• 时间轴分为8个小时
• 时间轴刻度需对应具体时刻，如每小时1个刻度
• 时间轴需根据当前实际时间进行实时定位，可自动滚动到相应时刻

2. 实现方式

使用Vue框架实现，具体步骤如下：

2.1 创建Vue项目

创建一个新项目，命名为time-axis，安装所需依赖：

// 安装Vue
npm install vue
// 安装Vue-cli脚手架
npm install -g @vue/cli
// 创建新项目
vue create time-axis

2.2 创建时间轴组件

创建一个名为TimeAxis.vue的组件，用于展示时间轴的UI布局。

在组件中，使用v-for指令遍历8个小时，并使用v-if判断当前小时数是否需要显示小时标签。

时间轴中的刻度条和当前时间的标记，可以使用CSS样式进行实现。

<template>
  <div class="time-axis">
    <div class="time-axis-hour" v-for="i in 8" :key="i" v-if="isShowHour(i)">
      {{ i }}:00
    </div>
    <div class="time-axis-line"></div>
    <div class="time-axis-cursor" ref="cursor"></div>
  </div>
</template>

<script>
export default {
  name: 'TimeAxis',
  methods: {
    isShowHour(hour) {
      if ((new Date().getHours() + hour > 8) || (new Date().getHours() + hour < 1)) {
        return false
      } else {
        return true
      }
    },
    setCursorPosition() {
      let currentHour = new Date().getHours()
      let currentMinute = new Date().getMinutes()
      let currentSecond = new Date().getSeconds()
      let currentWidth =
        (currentHour - 1) * 100 + currentMinute * 1.67 + currentSecond * 0.03
      this.$refs.cursor.style.width = `${currentWidth}px`
    }
  },
  mounted() {
    setInterval(() => {
      this.setCursorPosition()
    }, 1000)
  }
}
</script>

<style>
.time-axis {
  position: relative;
}
.time-axis-hour {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(12.5% * (var(--screen-width, 1920px) / 1920));
  padding-left: calc((var(--screen-height, 1080px) / 1080) * 10px);
  font-size: calc((var(--screen-height, 1080px) / 1080) * 14px);
  color: #999;
}
.time-axis-hour::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  z-index: 100;
  background-color: #ddd;
}
.time-axis-line {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 1px;
  background-color: #ddd;
  z-index: 50;
}
.time-axis-cursor {
  position: absolute;
  top: 20%;
  height: 60%;
  background-color: #ccc;
  z-index: 200;
}
</style>

2.3 添加实时定位功能

在TimeAxis组件的methods中添加一个setCursorPosition方法，用于更新当前时间标记的位置。

由于需求为实时定位，需要使用setInterval方法定时更新。

mounted() {
  setInterval(() => {
    this.setCursorPosition()
  }, 1000)
}

在setCursorPosition方法中，获取当前时间的小时、分钟、秒数，并将它们转换为百分比宽度。

setCursorPosition() {
  // 获取当前时间的小时、分钟、秒数
  let currentHour = new Date().getHours()
  let currentMinute = new Date().getMinutes()
  let currentSecond = new Date().getSeconds()
  // 将时间转换为百分比宽度
  let currentWidth =
    (currentHour - 1) * 100 + currentMinute * 1.67 + currentSecond * 0.03
  // 更新当前时间标记的宽度
  this.$refs.cursor.style.width = `${currentWidth}px`
}

2.4 调试和优化

完成代码编写后，可以运行npm run serve命令在本地启动项目进行调试。

在调试和优化过程中，可使用Chrome浏览器自带的开发者工具进行调试。

3. 示例说明

3.1 示例1

例如，在一个在线课堂的页面中，使用TimeAxis组件展示课堂开始后8个小时的时间轴，并根据当前时间实时定位。

<template>
  <div class="classroom">
    <div class="classroom-header">
      <h2>{{ courseName }}</h2>
      <TimeAxis />
    </div>
  </div>
</template>

<script>
import TimeAxis from '@/components/TimeAxis.vue'

export default {
  name: 'Classroom',
  components: {
    TimeAxis
  },
  data() {
    return {
      courseName: 'JavaScript入门课程',
    }
  },
}
</script>

<style>
.classroom {
  width: 100%;
  height: 100%;
}

.classroom-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  height: 80px;
  background-color: #f0f0f0;
}
</style>

3.2 示例2

例如，在一个工作计划的Web应用中，使用TimeAxis组件展示工作日8个小时的时间轴，并根据当前时间实时定位。

<template>
  <div class="workplan">
    <h1>今天的工作计划</h1>
    <TimeAxis />
    <div class="workplan-tasks">
      <div class="workplan-task" v-for="(task, index) in tasks" :key="index">
        <input type="checkbox"
               :id="'task-' + index"
               :checked="task.finished"
               @change="toggleFinishTask(index)"
        >
        <label :for="'task-' + index">
          {{ task.title }}
          <span v-if="task.deadlineAt" class="workplan-task-deadline">{{ task.deadlineAt | formatDate }}</span>
        </label>
      </div>
    </div>
  </div>
</template>

<script>
import TimeAxis from '@/components/TimeAxis.vue'

export default {
  name: 'Workplan',
  components: {
    TimeAxis
  },
  data() {
    return {
      tasks: [
        {
          title: '开会',
          deadlineAt: '2021-08-26 14:00:00',
          finished: false
        },
        {
          title: '写周报',
          deadlineAt: '2021-08-26 17:00:00',
          finished: false
        },
        {
          title: '健身',
          deadlineAt: '',
          finished: false
        }
      ]
    }
  },
  methods: {
    toggleFinishTask(index) {
      this.tasks[index].finished = !this.tasks[index].finished
    }
  },
  filters: {
    formatDate(dateStr) {
      const date = new Date(dateStr)
      return date.getHours() + ':' + date.getMinutes()
    }
  }
}
</script>

<style>
.workplan {
  max-width: 1000px;
  margin: 0 auto;
  padding: 30px 0;
}

.workplan-tasks {
  margin-top: 20px;
}

.workplan-task {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  margin-bottom: 10px;
}

.workplan-task input[type=checkbox] {
  margin-right: 10px;
  transform: translateY(3px);
}

.workplan-task label {
  position: relative;
}

.workplan-task-deadline {
  position: absolute;
  right: 0;
  font-size: 12px;
  color: #999;
}
</style>

以上就是使用Vue实现8小时带刻度的时间轴根据当前时间实时定位功能的完整攻略，希望对你有所帮助。