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 相关文章推荐
使Ext的Template可以解析二层的json数据的方法
Dec 22 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
Nov 30 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
Feb 06 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
Oct 17 Javascript
JS实现进入页面时渐变背景色的方法
Feb 25 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
Jun 12 Javascript
基于jquery二维码生成插件qrcode
Jan 07 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
Jul 07 Javascript
JavaScript实现多重继承的方法分析
Jan 09 Javascript
es6新特性之 class 基本用法解析
May 05 Javascript
vue实现扫码功能
Jan 17 Javascript
详解Anyscript开发指南绕过typescript类型检查
Sep 23 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
PHP无法访问远程mysql的问题分析及解决
2013/05/16 PHP
PHP strstr 函数判断字符串是否否存在的实例代码
2013/09/28 PHP
Laravel 5.3 学习笔记之 安装
2016/08/28 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
PHP使Laravel为JSON REST API返回自定义错误的问题
2018/10/16 PHP
实例讲解PHP中使用命名空间
2019/01/27 PHP
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
2014/01/09 Javascript
使用jQueryMobile实现滑动翻页效果的方法
2015/02/04 Javascript
jQuery结合ajax实现动态加载文本内容
2015/05/19 Javascript
IE浏览器下PNG相关功能
2015/07/05 Javascript
Javascript验证方法大全
2015/09/21 Javascript
JavaScript事件类型中UI事件详解
2016/01/14 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
vue.js 表格分页ajax 异步加载数据
2016/10/18 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
layui中select,radio设置不生效的解决方法
2019/09/05 Javascript
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
[00:35]DOTA2上海特级锦标赛 VP战队宣传片
2016/03/04 DOTA
[29:59]完美世界DOTA2联赛PWL S3 Forest vs access 第二场 12.11
2020/12/13 DOTA
python+splinter自动刷新抢票功能
2018/09/25 Python
python 制作自定义包并安装到系统目录的方法
2018/10/27 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
jupyter实现重新加载模块
2020/04/16 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
int和Integer有什么区别
2013/05/25 面试题
食品厂厂长岗位职责
2014/01/30 职场文书
医师定期考核实施方案
2014/05/07 职场文书
公务员爱岗敬业演讲稿
2014/08/26 职场文书
主要领导对照检查材料
2014/08/26 职场文书
科学发展观活动总结
2014/08/28 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
环卫处个人工作总结
2015/03/04 职场文书
产品调价通知函
2015/04/20 职场文书
mysql函数全面总结
2021/11/11 MySQL