前端实现时间刷新

2023-05-24 Views Vue | 呆头呆脑 | 技术笔记 | Html | CSS528字3 min read

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

标签

<div style="color:brown; font-size: 1.25rem /* 20/16 */;text-align: right;padding-right: 2.1875rem /* 35/16 */;;">
          {{ dataForm.currentTime }}</div>

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

EOF