欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

React注册倒计时功能的实现

程序员文章站 2023-12-02 08:30:58
一、react版本 16.4.1 二、具体代码如下 设置state属性 constructor(props){ super(pro...

一、react版本

16.4.1

二、具体代码如下

设置state属性

  constructor(props){
    super(props);
    this.state = {
      btntext:'获取验证码',
      seconds: 60, //称数初始化
      liked: true //获取验证码文案
    }
  }

2.倒计时

  // 获取验证码
  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="验证码"
      >
       <row gutter={8}>
        <col span={6}>
         {getfielddecorator('captcha', {
          rules: [{ required: true, message: '请输入短信验证码!' }],
         })(
          <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 后重新发送'}</span>
          }
          </button>
        </col>
       </row>
      </formitem>

明明很简单的,但是看网上有的代码搞得很复杂一样,当然也可以用react相关插件,不过我觉得这样更简洁。

ps:react 获取服务器端时间倒计时

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) // 先清除一遍定时器,避免被调用多次
  // 发起任意一个服务器请求, 然后从headers 里获取服务器时间
  let lefttime = await axios.get('/').then(response => {
   return new date(this.props.date).gettime() - new date(response.headers.date).gettime() // 服务器与倒计时的 时间差
  }).catch(error => {
   console.log(error)
   return 0 // 这里发送的服务器请求失败 设为0
  })

  // 倒计时
  this.timer = setinterval(() => {
   lefttime = lefttime - 1000
   let { bool, days = '0', hours = '00', minutes = '00', seconds = '00' } = this.countdown(lefttime)
   if (bool) { // 结束倒计时
    cleartimeout(this.timer)
   }
   this.setstate({
    bool,
    days,
    hours,
    minutes,
    seconds
   })
  }, 1000)
 }

 /**
  * 倒计时
  * @param lefttime 要倒计时的时间戳
  */
 countdown(lefttime) {
  let bool = false
  if (lefttime <= 0) {
   bool = true
   return { bool }
  }
  var days = parseint(lefttime / 1000 / 60 / 60 / 24, 10) //计算剩余的天数
  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>活动已结束</div> :
      <div>
       {days} 天 {hours} : {minutes} : {seconds}
      </div>
    }
   </div>
  )
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。