PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛

春节打工计时

介绍

这个项目是关于 春节打工计时 的一个项目。可以延伸什么倒计时之类的东西。

身为打工仔的我，感叹时间的流逝，通过这个项目来刺激下自己，顺便学习下新知识 Dayjs 的使用。

技术：通过 Vite2，Vue3 快速搭建一个项目。里面用到鼠标点击事件产生烟花爆炸效果，css 动画效果，Dayjs等。

项目演示：

计时.gif

实现效果

这里要实现的效果需求点：

页面布局展示
字体使用
鼠标点击页面产生烟花爆炸效果
Dayjs 讲解
定时使用

技术

创建项目，输入命令后，选择vue，清空页面里的无关东西
```
    npm init @vitejs/app
```
页面布局

主要是通过 flex 快速进行布局，这个知识点就不多讲解。
css 样式

这里有3个重要的知识点，字体选择，css animation 动画，字体间隔
- 如何引入并使用自定义字体
```
  @font-face {
    font-family: myFont;
    src: url('./assets/ttf/a.ttf');
  }

  .button-text{
    font-family: myFont;
    font-size: 50px;
  }
```
- css animation 动画的使用
  
  这个是熟练度的问题，可以通过看mdn上的animation，也可以直接看相关例子进行学习
- 文字间隔
  
  letter-spacing 属性增加或减少字符间的空白（字符间距），可以为负数，会让字母之间更紧，可以是 px,em,rem
js
- Dayjs
  
  为什么要说这个 Dayjs，还是因为这段时间公司项目在升级，发现一些框架中已经开始移除 Momentjs，开始使用 Dayjs，我也赶紧看了下 Dayjs 的官方文档和相关资料。
  
  主要是还是轻量，只有 2KB，与 200多KB的 Momentjs 相比，100倍这个差距，还是很心动的，想让人想看看。
  
  安装
```
npm install dayjs --save
```
  下面简单写了下常用的方法：
```
  console.log('  ')
  console.log('开始使用 dayjs')
  console.log('  ')
  console.log('new Date() :', new Date())
  console.log('dayjs() :', dayjs())
  console.log('dayjs().year() :', dayjs().year())
  console.log('dayjs().month() + 1 :', dayjs().month() + 1)
  console.log('dayjs().date() :', dayjs().date())

  console.log('dayjs().hour() :', dayjs().hour())
  console.log('dayjs().minute() :', dayjs().minute())
  console.log('dayjs().second() :', dayjs().second())

  console.log('dayjs().day() :', dayjs().day())

  console.log('  ')
  console.log('下面是 dayjs 格式化')
  console.log('  ')

  console.log('dayjs().format() :', dayjs().format())
  console.log("dayjs().format('YYYY-MM-DD HH:mm:ss') :", dayjs().format('YYYY-MM-DD HH:mm:ss'))
```
  还有三个API add ， subtract ，diff ，分别为增加，减少和比对，值得注意，它们三个的作用还是很大的，例如项目中说，时间只能查看前七日数据，或者时间只能选择未来1年内的日期。此时就用到这三个API了，感兴趣可以了解下具体介绍。
- 鼠标点击页面产生烟花爆炸效果
  
  可以查看上篇文章 🔥春节祝福语，不来瞧瞧？，有详细讲解。
- 定时
  
  定时常用的方法就是 setTimeout 和 setInterval 来组合使用，这里介绍一个比较好用的API requestAnimationFrame
  
  还是，想了解 requestAnimationFrame 它是什么及作用的话，先看下 MDN 的简单介绍。每秒60帧，做循环动画更稳定。而且这个 API 在 Three.js 里面被广泛使用。
  
  通过 Dayjs 设置计时的起始时间及结束时间
```
  state.startTime = dayjs('2022-02-07')
  state.endTime = dayjs('2023-01-21')
```
  获取当前时间与结束时间进行比较，查看是否结束循环
```
  const isBeforeBoolean = dayjs().isBefore(state.endTime)
```
  获取当前时间与开始时间进行 diff 对比，获得间隔了几日
```
  state.days = dayjs().diff(state.startTime, 'day')
```
  最终通过 requestAnimationFrame，抛弃了 setTimeout 和 setInterval 来得到循环。
```
  const jiShi = () => {
    const isBeforeBoolean = dayjs().isBefore(state.endTime)

    if (isBeforeBoolean) {
      state.days = dayjs().diff(state.startTime, 'day')
      state.hour = dayjs().hour()
      state.minute = dayjs().minute()
      state.second = dayjs().second()
      window.requestAnimationFrame(jiShi)
    }
  }
```

总结

通过这个春节计时项目，将了解 Dayjs 及 requestAnimationFrame 这两个新知识点的使用，及其他零碎知识点的回顾及总结。

最后 2022 祝大家虎年快乐

🔥春节 打工计时

春节 打工计时

介绍

实现效果

技术

总结

🔥春节打工计时

春节打工计时