React实现倒计时

2020-09-20

序

看了好几天react的文档, 也还是要写一点dome才能很好的掌握这些技能, 想想就随便写一个倒计时吧, 而且TypeScript与React完全是天生一对, 也可以一起练习一下

创建项目 && 添加 TypeScript

如果直接新建项目的话可以直接运行下面命令就行

1	npx create-react-app my-app --typescript

不过我是以前创建的项目添加TS

首先安装依赖

1	npm install --save typescript @types/node @types/react @types/react-dom @types/jest

创建tsconfig配置文件

1	touch tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

然后将jsx文件改为tsx就可以了

项目开始

创建App.tsx文件, 然后直接再index.tsx文件中引入挂载到页面上

模块拆分

正所谓磨刀不误砍柴工, 我们提出一个想法首先是需要对这个项目进行仔细的分析, 然后拆分功能模块, 然后对系统详细进行设计. 而不是直接开始敲代码, 然后一会儿就不知道做到哪儿了, 接下来应该怎么办

首先这个倒计时的小Dome呢, 我想做成那种动画形式的, 数字是一个一个的滚动下来, 然后日时分秒分开显示, 最后倒计时走完之后它开始正计时

根据我的需求来分析, 我大致把功能分成三个组件:

每一个数字都要做滚动动画, 所以每一个数字都是一个NumRoll组件(可以参考前面我的文章滚动的数字栏)

然后时分秒应该都是最大不超过两位的整数, 只是单位不同, 所有这里我可以复用创建一个ModalBlock组件

最后当然是分块显示日时分秒的TimeBlock啦.

代码实现

NumRoll

滚动的数字可以参考我以前写的那一篇文章, 创建一个 0-9的列表, 设置它的高度只能显示一条数据, 然后把更改列表的样式 transform: translateY(-${ num }em), 就可以实现动画的改变数字.

import React, { useState } from 'react'
...
interface numParams {
  num: number
}

const NumRoll = ({ num = 0}:numParams) =>{
  return(
    <ul style={{transform: `translateY(-${ num }em)`}}>
      {
        /* 通过 new Array().fill() 快速创建一个长度为10数组, 然后map取Index显示再列表上 */ 
        new Array(10).fill(0).map((t,i)=>(<li key={i}>{i}</li>))
      }
    </ul>
  )
}

ModalBlock

这里我们需要显示大于10的数字, 然后再显示一个单位区分不同的模块, 上面的数字模块明细只能显示0-9的内容, 所有再这需要对传进来的数字进行拆分

...
interface modalParams {
  unit: string,
  num: number
}

const ModalBlock = ({ unit, num } : modalParams)=>{
  if(num > 99) return (<p>Error, Num max is 99!</p>)
  /* 取十位 */
  const i:number = ~~(num/10)
  /* 取个位 */
  const j:number = num % 10
  /* 然后分别进行渲染 */
  return (
    <div className="modal_block">
      <div className="scroll-item">
        <NumBlock num={i} />
        <NumBlock num={j} />
      </div>
      <span className="num">{ unit }</span>
    </div>
  )
}

样式部分

.modal_block + .modal_block{
  margin-left: .6em
}
.modal_block{
  display: flex;
  flex-direction: column;
  background-color: #fff;
  width: 2em;
  height: 2.4em;
  align-items: center;
  border-radius: .2em;
  font-family: Comic Sans MS;
  justify-content: space-between;
  padding: .2em;
  padding-top: .4em;
  font-size: 50px
}
.modal_block span{
  font-size: .4em
}
.scroll-item{
  width: 100%;
  height: 1em;
  display: flex;
  overflow:hidden
}
.scroll-item ul{
  flex: 1;
  text-align: center;
  transition:all .3s ease
}
li{ list-style: none;line-height:1em }

TimeModal

这里的视图内容很简单, 就是把ModalBlock分别显示就可以


interface timeParams {
  day: number,
  hours: number,
  minutes: number,
  seconds: number
}
const TimeModal = ({ day, hours, minutes, seconds }:timeParams) => {
  return (<div className="flex-wrap">
    { <ModalBlock  unit="天" num={ day }/> }
    { <ModalBlock  unit="时" num={ hours }/> }
    { <ModalBlock  unit="分" num={ minutes }/> }
    { <ModalBlock  unit="秒" num={ seconds }/> }
  </div>)
}

这里也没啥样式, 主要就是要让里面的元素横向排列

.flex-wrap{
  margin: 0 auto;
  display: flex
}

计时器, 时间计算

react的Hooks真的十用了完全回不去了, 前一篇我照着文档写了一大篇Class, state贼难维护, 又需要super(props), 需要遵循ES6的语法, 需要this.setState

计时器的话直接使用 setInterval 来做处理

时间的话还是转行成时间戳自己来计算吧, 这样后面直接对秒进行运算就可以维护计时器了

Date.parse方法可以处理很多不同格式的时间, 直接转行位时间戳

let timer:any

export default function () {
  /* 判断是否走完 */
  let isTurn:boolean
  const targetTime = '2020-9-21 18:28'
  let time = ~~((Date.parse(targetTime) - Date.now()) / 1e3)
  isTurn = time <= 0
  time = Math.abs(time)
  let day:number = ~~(time / 86400)
  let hours:number = ~~((time - (day * 86400)) / 3600)
  let minutes:number = ~~((time - (day * 86400) - (hours * 3600)) / 60)
  let seconds:number = time % 60
  const [ timeObj, setTime ] = useState({ day, hours, minutes, seconds })
  clearInterval(timer)
  timer = setInterval(()=> {
    if(isTurn){
      if(++seconds > 59) {
        seconds = 0
        if(++minutes > 59){
          minutes = 0
          if(++hours > 23) {
            hours = 0
            ++day
          }
        }
      }
    }else{
      if(seconds-- < 1) {
        seconds = 59
        if(--minutes < 1){
          minutes = 59
          if(--hours < 1) {
            hours = 23
            --day
          }
        }
      }
    }
    setTime({ day, hours, minutes, seconds})
  }, 1e3)
  return(<TimeModal time={timeObj} />)
}

效果图列

TimePicker