国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

React注冊倒計時功能的實現

2019-11-19 13:00:38
字體:
來源:轉載
供稿:網友

一、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>  ) }}

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 浪卡子县| 涟源市| 佛坪县| 柏乡县| 广西| 阳西县| 呼和浩特市| 兴业县| 泽州县| 台州市| 浠水县| 咸阳市| 巫溪县| 湖南省| 阿尔山市| 深州市| 库尔勒市| 比如县| 辽阳市| 东兰县| 霞浦县| 定日县| 侯马市| 海阳市| 华坪县| 田东县| 望谟县| 蒙自县| 浮梁县| 桦川县| 永嘉县| 奈曼旗| 司法| 兴义市| 奉化市| 思南县| 永顺县| 通许县| 卫辉市| 北安市| 泊头市|