前端实现时间刷新

2023-05-24 Vue | 呆头呆脑 | 技术笔记 | Html | CSS 528字 3 min read 繁

前端实现个时间刷新的案例：

script

const updateTime = () => {
  const currentDate = new Date();
  const year = String(currentDate.getFullYear());
  const month = String(currentDate.getMonth() + 1).padStart(2, '0');
  const date = String(currentDate.getDate()).padStart(2, '0');
  const hours = String(currentDate.getHours()).padStart(2, '0');
  const minutes = String(currentDate.getMinutes()).padStart(2, '0');
  const seconds = String(currentDate.getSeconds()).padStart(2, '0');
  dataForm.currentTime = `${year}年${month}月${date}日  ${hours}:${minutes}:${seconds}`;
};

这里主要调用的是 Date();的前端的方法。

然后我们设置定时器一秒刷新一次。

setInterval(() => {
  updateTime();
}, 1000);

这是根据人人开源项目做二次开发写的，其实二次开发真的有些难受。

如果要根据vue的方式来写就是这样的

<script>
export default {
  data() {
    return {
      currentTime: ''
    };
  },
  mounted() {
    // 更新时间
    this.updateTime();

    // 每秒钟更新一次时间
    setInterval(() => {
      this.updateTime();
    }, 1000);
  },
  methods: {
    updateTime() {
  const currentDate = new Date();
  const year = currentDate.getFullYear();
  const month = String(currentDate.getMonth() + 1).padStart(2, '0');
  const day = String(currentDate.getDate()).padStart(2, '0');
  const hours = String(currentDate.getHours()).padStart(2, '0');
  const minutes = String(currentDate.getMinutes()).padStart(2, '0');
  const seconds = String(currentDate.getSeconds()).padStart(2, '0');
  this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }
  }
};
</script>

在mounted生命周期钩子中，我们通过调用updateTime方法来初始化时间，并使用setInterval函数每秒钟更新一次时间。

updateTime方法会获取当前时间并更新currentTime的值，然后将其显示在页面中。

getYear方法返回的是四位数的年份，getMonth方法返回的是从0开始的月份（需要加1），getDate方法返回的是月份中的日期。我们将它们转换为字符串并使用padStart方法进行补零操作，以保证两位数的格式。

最后，我们将年、月、日、时、分和秒拼接为一个完整的日期时间字符串，并将其赋值给currentTime，用于在页面中显示。

其中有个点就是在获取日期时，getDay()方法返回的是星期几（0-6），而不是日期。今天就犯糊涂了，用了getday()

另外推荐一个很好的拟态风格的css生成网站，简直不要太好用！！！！

https://neumorphism.io/#e0e0e0

- 标签
- script

Del Levin‘s blog

前端实现时间刷新

标签

script