React注册倒计时功能的实现


Posted in Javascript onSeptember 06, 2018

一、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>
  )
 }
}

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

Javascript 相关文章推荐
js URL参数的拼接方法比较
Feb 15 Javascript
JQuery文字列表向上滚动的代码
Nov 13 Javascript
JavaScript语言对Unicode字符集的支持详解
Dec 30 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
Feb 28 Javascript
Node.js的npm包管理器基础使用教程
May 26 Javascript
JS判断时间段的实现代码
Jun 14 Javascript
vue router下的html5 history在iis服务器上的设置方法
Oct 18 Javascript
深入剖析Node.js cluster模块
May 23 Javascript
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
vue + typescript + video.js实现 流媒体播放 视频监控功能
Jul 07 Javascript
JavaScript实现页面动态验证码的实现示例
Mar 23 Javascript
JS监听Esc 键触发事键
Apr 14 Javascript
node.js 模块和其下载资源的镜像设置的方法
Sep 06 #Javascript
Vue文件配置全局变量的实例
Sep 06 #Javascript
Vue中保存数据到磁盘文件的方法
Sep 06 #Javascript
jQuery超简单遮罩层实现方法示例
Sep 06 #jQuery
Vue实现表格中对数据进行转换、处理的方法
Sep 06 #Javascript
vue生成文件本地打开查看效果的实例
Sep 06 #Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 #Javascript
You might like
提问的智慧(2)
2006/10/09 PHP
Apache 配置详解(最好的APACHE配置教程)
2010/07/04 PHP
探讨Smarty中如何获取数组的长度以及smarty调用php函数的详解
2013/06/20 PHP
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
详谈PHP编码转换问题
2015/07/28 PHP
JavaScript版代码高亮
2006/06/26 Javascript
javascript语言结构小记(一)
2011/09/10 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
JS和Jquery获取和修改label的值的示例代码
2014/01/15 Javascript
jquery实现表格本地排序的方法
2015/03/11 Javascript
jQuery+CSS3实现3D立方体旋转效果
2015/11/10 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
微信小程序开发之map地图实现教程
2017/06/08 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
bootstrap table服务端实现分页效果
2017/08/10 Javascript
webpack4 处理SCSS的方法示例
2018/09/03 Javascript
React实现全局组件的Toast轻提示效果
2018/09/21 Javascript
vue router的基本使用和配置教程
2018/11/05 Javascript
python中的yield使用方法
2014/02/11 Python
python复制与引用用法分析
2015/04/08 Python
用C++封装MySQL的API的教程
2015/05/06 Python
更换Django默认的模板引擎为jinja2的实现方法
2018/05/28 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
python编写猜数字小游戏
2019/10/06 Python
聊聊Python pandas 中loc函数的使用,及跟iloc的区别说明
2021/03/03 Python
期末自我鉴定
2014/01/23 职场文书
教师批评与自我批评(群众路线)
2014/10/15 职场文书
党组织领导班子整改方案
2014/10/25 职场文书
幼儿园中班个人总结
2015/02/28 职场文书
美容院管理规章制度
2015/08/05 职场文书
初中政治教师教学反思
2016/02/23 职场文书
JavaScript文档对象模型DOM
2021/11/20 Javascript