SoFunction
Updated on 2025-04-08

Implementation of React Registration Countdown Function

1. React version

16.4.1

2. The specific code is as follows

Set state properties

  constructor(props){
    super(props);
     = {
      btnText:'Get verification code',
      seconds: 60, //Initialization of the number      liked: true //Get verification code document    }
  }

2. Countdown

  // Get the verification code  sendCode = () => {
    let siv = setInterval(() => {
      ({
        liked:false,
        seconds: - 1,  
      },() => {
        if( == 0){
          clearInterval(siv);
          ({
            liked:true,
            secounds:60
          })
        }
      });  
    },1000);  
  }

Code

      <FormItem
       {...formItemLayout}
       label="Verification Code"
      >
       <Row gutter={8}>
        <Col span={6}>
         {getFieldDecorator('captcha', {
          rules: [{ required: true, message: 'Please enter the SMS verification code!' }],
         })(
          <Input />
         )}
        </Col>
        <Col span={12}>
          <Button onClick={} disabled={!}>
          {
            
            ?
             <span>{}</span>
             :
             <span>{ + ' s resend'}</span>
          }
          </Button>
        </Col>
       </Row>
      </FormItem>

It's obviously very simple, but it looks like some codes on the Internet are very complicated. Of course, you can also use react-related plug-ins, but I think this is more concise.

ps: react to get the server-side time countdown

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

export default class Timer extends Component {

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

 componentDidMount() {
  ()
 }

 async start() {
   && clearTimeout() // Clear the timer first to avoid being called multiple times  // Initiate any server request and then get server time from headers  let leftTime = await ('/').then(response => {
   return new Date().getTime() - new Date().getTime() // Time difference between server and countdown  }).catch(error => {
   (error)
   return 0 // The server request sent here failed. Set to 0  })

  // Countdown   = setInterval(() => {
   leftTime = leftTime - 1000
   let { bool, days = '0', hours = '00', minutes = '00', seconds = '00' } = (leftTime)
   if (bool) { // End countdown    clearTimeout()
   }
   ({
    bool,
    days,
    hours,
    minutes,
    seconds
   })
  }, 1000)
 }

 /**
   * Countdown
   * @param leftTime Timestamp to count down
   */
 countdown(leftTime) {
  let bool = false
  if (leftTime <= 0) {
   bool = true
   return { bool }
  }
  var days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10) //Calculate the remaining days  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()
 }

 render() {
  let { bool, days, hours, minutes, seconds } = 
  return (
   <div>
    {
     bool ?
      <div>The event has ended</div> :
      <div>
       {days} sky {hours} : {minutes} : {seconds}
      </div>
    }
   </div>
  )
 }
}

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.