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 相关文章推荐
JavaScript中yield实用简洁实现方式
Jun 12 Javascript
JavaScript对象和字串之间的转换实例探讨
Apr 21 Javascript
setinterval()与clearInterval()JS函数的调用方法
Jan 21 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
Mar 04 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
Jul 12 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
Sep 28 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
Oct 20 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 Javascript
vue 设置proxyTable参数进行代理跨域
Apr 09 Javascript
vue组件通信传值操作示例
Jan 08 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
Mar 06 Javascript
ES6基础之字符串和函数的拓展详解
Aug 22 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
php5 图片验证码实现代码
2009/12/11 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
Windows下的PHP安装文件线程安全和非线程安全的区别
2014/04/23 PHP
php对数组内元素进行随机调换的方法
2015/05/12 PHP
javascript面向对象编程代码
2011/12/19 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
2013/01/24 Javascript
js取得url地址参数实例
2013/02/22 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
JavaScript实现页面实时显示当前时间的简单实例
2013/07/20 Javascript
在HTML代码中使用JavaScript代码的例子
2014/10/16 Javascript
node.js中的fs.writeSync方法使用说明
2014/12/15 Javascript
JavaScript判断数组是否包含指定元素的方法
2015/07/01 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
2015/12/07 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
Vue自定义指令拖拽功能示例
2017/02/17 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
2017/02/27 Javascript
js实现HTML中Select二级联动的实例
2018/01/05 Javascript
解决vue打包css文件中背景图片的路径问题
2018/09/03 Javascript
详解服务端预渲染之Nuxt(介绍篇)
2019/04/07 Javascript
原生javascript中this几种常见用法总结
2020/02/24 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk
2017/04/03 DOTA
python以环状形式组合排列图片并输出的方法
2015/03/17 Python
Python EOL while scanning string literal问题解决方法
2020/09/18 Python
Python+Opencv识别两张相似图片
2020/03/23 Python
python数据封装json格式数据
2018/03/04 Python
python 读写文件,按行修改文件的方法
2018/07/12 Python
Python3.6实现根据电影名称(支持电视剧名称),获取下载链接的方法
2019/08/26 Python
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
波兰在线杂货店:Polski Koszyk
2019/11/02 全球购物
实体的生命周期
2013/08/31 面试题
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
渠道运营商合作协议书范本
2014/10/06 职场文书
捐款感谢信
2015/01/20 职场文书
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
2021/05/30 Javascript