React注冊倒計(jì)時(shí)功能的實(shí)現(xiàn)

更新時(shí)間：2018年09月06日 14:44:20 作者：garrett

這篇文章主要介紹了React注冊倒計(jì)時(shí)功能的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

一、React版本

16.4.1

二、具體代碼如下

設(shè)置state屬性

  constructor(props){
    super(props);
    this.state = {
      btnText:'獲取驗(yàn)證碼',
      seconds: 60, //稱數(shù)初始化
      liked: true //獲取驗(yàn)證碼文案
    }
  }

2.倒計(jì)時(shí)

  // 獲取驗(yàn)證碼
  sendCode = () => {
    let siv = setInterval(() => {
      this.setState({
        liked:false,
        seconds:this.state.seconds - 1,  
      },() => {
        if(this.state.seconds == 0){
          clearInterval(siv);
          this.setState({
            liked:true,
            secounds:60
          })
        }
      });  
    },1000);  
  }

3.jsx代碼

      <FormItem
       {...formItemLayout}
       label="驗(yàn)證碼"
      >
       <Row gutter={8}>
        <Col span={6}>
         {getFieldDecorator('captcha', {
          rules: [{ required: true, message: '請(qǐng)輸入短信驗(yàn)證碼!' }],
         })(
          <Input />
         )}
        </Col>
        <Col span={12}>
          <Button onClick={this.sendCode} disabled={!this.state.liked}>
          {
            this.state.liked
            ?
             <span>{this.state.btnText}</span>
             :
             <span>{this.state.seconds + ' s 后重新發(fā)送'}</span>
          }
          </Button>
        </Col>
       </Row>
      </FormItem>

明明很簡單的，但是看網(wǎng)上有的代碼搞得很復(fù)雜一樣，當(dāng)然也可以用react相關(guān)插件，不過我覺得這樣更簡潔。

ps：react 獲取服務(wù)器端時(shí)間倒計(jì)時(shí)

import React, { Component } from 'react'
import axios from 'axios'

export default class Timer extends Component {

 constructor(props) {
  super(props)
  this.state = {
   bool: false,
   days: '0',
   hours: '00',
   minutes: '00',
   seconds: '00'
  }
 }

 componentDidMount() {
  this.start()
 }

 async start() {
  this.timer && clearTimeout(this.timer) // 先清除一遍定時(shí)器，避免被調(diào)用多次
  // 發(fā)起任意一個(gè)服務(wù)器請(qǐng)求， 然后從headers 里獲取服務(wù)器時(shí)間
  let leftTime = await axios.get('/').then(response => {
   return new Date(this.props.date).getTime() - new Date(response.headers.date).getTime() // 服務(wù)器與倒計(jì)時(shí)的 時(shí)間差
  }).catch(error => {
   console.log(error)
   return 0 // 這里發(fā)送的服務(wù)器請(qǐng)求失敗 設(shè)為0
  })

  // 倒計(jì)時(shí)
  this.timer = setInterval(() => {
   leftTime = leftTime - 1000
   let { bool, days = '0', hours = '00', minutes = '00', seconds = '00' } = this.countdown(leftTime)
   if (bool) { // 結(jié)束倒計(jì)時(shí)
    clearTimeout(this.timer)
   }
   this.setState({
    bool,
    days,
    hours,
    minutes,
    seconds
   })
  }, 1000)
 }

 /**
  * 倒計(jì)時(shí)
  * @param leftTime 要倒計(jì)時(shí)的時(shí)間戳
  */
 countdown(leftTime) {
  let bool = false
  if (leftTime <= 0) {
   bool = true
   return { bool }
  }
  var days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10) //計(jì)算剩余的天數(shù)
  var hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10)
  if (hours < 10) {
   hours = '0' + hours
  }
  var minutes = parseInt(leftTime / 1000 / 60 % 60, 10)
  if (minutes < 10) {
   minutes = '0' + minutes
  }
  var seconds = parseInt(leftTime / 1000 % 60, 10)
  if (seconds < 10) {
   seconds = '0' + seconds
  }
  return { bool, days, hours, minutes, seconds }
 }

 componentWillUnmount() {
  clearTimeout(this.timer)
 }

 render() {
  let { bool, days, hours, minutes, seconds } = this.state
  return (
   <div>
    {
     bool ?
      <div>活動(dòng)已結(jié)束</div> :
      <div>
       {days} 天 {hours} : {minutes} : {seconds}
      </div>
    }
   </div>
  )
 }
}

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: