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动画(animate)简单引擎代码示例
Dec 04 Javascript
jquery时间下拉框小例子
Apr 15 Javascript
JS去除右边逗号的简单方法
Jul 03 Javascript
javascript怎么禁用浏览器后退按钮
Mar 27 Javascript
JavaScript设计模式之工厂方法模式介绍
Dec 28 Javascript
jQuery的事件委托实例分析
Jul 15 Javascript
AngularJS 最常用的功能汇总
Feb 17 Javascript
jQuery zTree加载树形菜单功能
Feb 25 Javascript
浅谈js多维数组和hash数组定义和使用
Jul 27 Javascript
详解react如何在组件中获取路由参数
Jun 15 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
Jul 20 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
Nov 16 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处理restful请求的路由类分享
2014/02/27 PHP
PHP使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
既简单又安全的PHP验证码 附调用方法
2016/06/02 PHP
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
拖动布局之保存布局页面cookies篇
2010/10/29 Javascript
Javascript对象属性方法汇总
2013/11/21 Javascript
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
一些实用性较高的js方法
2016/04/19 Javascript
jQuery实现6位数字密码输入框
2016/12/29 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
vue脚手架中配置Sass的方法
2018/01/04 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
2018/03/29 Javascript
jQuery 操作 HTML 元素和属性的方法
2018/11/12 jQuery
详解vue 兼容IE报错解决方案
2018/12/29 Javascript
[53:21]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-CDEC
2014/05/22 DOTA
在Python中操作字典之fromkeys()方法的使用
2015/05/21 Python
Perl中著名的Schwartzian转换问题解决实现
2015/06/02 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
解决Django一个表单对应多个按钮的问题
2019/07/18 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
2014/06/23 HTML / CSS
IRO美国官网:法国服装品牌
2018/03/06 全球购物
IWOOT美国:新奇的小玩意
2018/04/27 全球购物
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
幼儿园保教管理制度
2014/02/03 职场文书
文秘档案管理岗位职责
2014/03/06 职场文书
党的群众路线教育实践活动心得体会900字
2014/03/07 职场文书
班组长安全工作职责
2014/07/15 职场文书
2019年手机市场的调研报告2篇
2019/10/10 职场文书
Python使用UDP实现720p视频传输的操作
2021/04/24 Python
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL
Python中文分词库jieba(结巴分词)详细使用介绍
2022/04/07 Python