循环打印当前时间的前七个小时

最新推荐文章于 2024-07-22 15:19:55 发布

live for myself

最新推荐文章于 2024-07-22 15:19:55 发布

阅读量385

点赞数 6

分类专栏： Vue 文章标签：前端

本文链接：https://blog.csdn.net/crystal4000/article/details/135519735

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了ES6中新增的字符串处理方法padStart和padEnd，展示了如何在JavaScript中使用它们来格式化时间和生成时间数组。

摘要由CSDN通过智能技术生成

padStart和padEnd是es6中新增的语法
只能对字符串使用，是新增的方法不会修改原字符串

str.padStart(MaxLength,‘填充的内容’) // 当str的长度没有达到MaxLength，会将第二个参数填充到这个str前直到达到MaxLength
str.padEnd(MaxLength,‘填充的内容’) // 当str的长度没有达到MaxLength，会将第二个参数填充到这个str后直到达到MaxLength

<template>
  <div>
    <!-- 获取当前时间 -->
    <p>{{ currentTime }}</p>
    
    <!-- 循环打印当前时间的前7个小时 -->
    <ul>
      <li v-for="hour in hours" :key="hour">{{ hour }}:00</li>
    </ul>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      currentTime: '', // 存放当前时间
      hours: []       // 存放前7个小时的数组
    };
  },
  
  mounted() {
    this.getCurrentTime();
    this.generateHoursArray();
  },
  
  methods: {
    getCurrentTime() {
      const date = new Date();
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      const seconds = date.getSeconds().toString().padStart(2, '0');
      
      this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    
    generateHoursArray() {
      for (let i = -6; i <= 0; i++) {
        let time = new Date();
        
        if (i !== 0) {
          time.setHours(time.getHours() + i);
        }
        
        const hour = time.getHours().toString().padStart(2, '0');
        this.hours.push(`${hour}:00`);
      }
    }
  }
};
</script>