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 相关文章推荐
IE关闭时判断及AJAX注销案例学习
Feb 18 Javascript
解析瀑布流布局:JS+绝对定位的实现
May 08 Javascript
jQuery获取样式中颜色值的方法
Jan 29 Javascript
jQuery封装的tab选项卡插件分享
Jun 16 Javascript
jquery实现清新实用的网页菜单效果
Aug 28 Javascript
基于jQuery实现的无刷新表格分页实例
Feb 17 Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
Jun 22 Javascript
js for循环倒序输出数组元素的实例
Mar 01 Javascript
JS实现返回上一页并刷新页面的方法分析
Jul 16 Javascript
Vue.js下拉菜单组件使用方法详解
Oct 19 Javascript
JS如何监听div的resize事件详解
Dec 03 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
DOMXML函数笔记
2006/10/09 PHP
set_include_path在win和linux下的区别
2008/01/10 PHP
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装最快的解决办法
2010/08/01 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
js删除所有的cookie的代码
2010/11/25 Javascript
Javascript 遍历页面text控件详解
2014/01/06 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
自编jQuery插件实现模拟alert和confirm
2014/09/01 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
JS继承与闭包及JS实现继承的三种方式
2017/10/15 Javascript
详解IWinter 一个路由转控制器的 Nodejs 库
2017/11/15 NodeJs
JS实现显示当前日期的实例代码
2018/07/03 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
[01:46]2020完美世界全国高校联赛秋季赛报名开启
2020/10/15 DOTA
Python的面向对象思想分析
2015/01/14 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
Python Image模块基本图像处理操作小结
2019/04/13 Python
Python3内置模块之json编解码方法小结【推荐】
2020/12/09 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
Python爬虫 bilibili视频弹幕提取过程详解
2019/07/31 Python
台湾家适得:Homeget
2019/02/11 全球购物
美国浴缸、水槽和水龙头购物网站:Vintage Tub & Bath
2019/11/05 全球购物
写自荐信要注意什么
2013/12/26 职场文书
运动会获奖感言
2014/02/11 职场文书
运动会入场词200字
2014/02/15 职场文书
珍惜时间演讲稿
2014/05/14 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS
新手必备Python开发环境搭建教程
2021/05/28 Python
动视暴雪取消疫苗禁令 让所有员工返回线下工作
2022/04/03 其他游戏
Golang 并发编程 SingleFlight模式
2022/04/26 Golang
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers
python数字图像处理实现图像的形变与缩放
2022/06/28 Python