前端实现时间刷新

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

## 标签

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

## script

```typescript
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();的前端的方法。

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

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

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

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

```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