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 getComputedStyle获取和设置style的原理
Oct 10 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
Mar 13 Javascript
Extjs407 getValue()和getRawValue()区别介绍
May 21 Javascript
自己使用js/jquery写的一个定制对话框控件
May 02 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
Aug 01 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
Sep 07 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 Javascript
在vue中使用css modules替代scroped的方法
Mar 10 Javascript
深入理解移动前端开发之viewport
Oct 19 Javascript
在vue里使用codemirror遇到的问题
Nov 01 Javascript
微信小程序动态添加和删除组件的现实
Feb 28 Javascript
js实现无缝轮播图
Mar 09 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
DOTA2 6.87版本后新眼位详解攻略
2020/04/20 DOTA
刚才在简化php的库,结果发现很多东西
2006/12/31 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
window.open的功能全解析
2006/10/10 Javascript
javascript编程起步(第六课)
2007/01/10 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
2012/02/03 Javascript
生成二维码方法汇总
2014/12/26 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
浅谈jQuery中setInterval()方法
2015/07/07 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
令按钮悬浮在(手机)页面底部的实现方法
2017/05/02 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
2017/12/12 Javascript
vue.js element-ui validate中代码不执行问题解决方法
2017/12/18 Javascript
jQuery中内容过滤器简单用法示例
2018/03/31 jQuery
VUE+Element环境搭建与安装的方法步骤
2019/01/24 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
2019/08/27 jQuery
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
jQuery实现简单评论区功能
2020/10/26 jQuery
vue 组件基础知识总结
2021/01/26 Vue.js
Python实现数据库并行读取和写入实例
2017/06/09 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
解决django的template中如果无法引用MEDIA_URL问题
2020/04/07 Python
Python实现快速大文件比较代码解析
2020/09/04 Python
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
电子商务专业应届生求职信
2014/05/28 职场文书
党性教育心得体会
2014/09/03 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
小学生禁毒教育心得体会
2016/01/15 职场文书
如何用JavaScript检测当前浏览器是无头浏览器
2021/04/27 Javascript