用react如何写倒计时_react写一个token倒计时 - CSDN
  • 1、问题背景 利用React实现一个计时器的效果,改变时间为1s2、实现源码 React之简单入门实例(计时器) var ea = React.createClass({ render: function() { var elapsed = Math....

    1、问题背景

         利用React实现一个计时器的效果,改变时间为1s


    2、实现源码

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>React之简单入门实例(计时器)</title>
    		<link rel="stylesheet" href="css/base.css" />
    		<script type="text/javascript" src="js/react.js" ></script>
    		<script type="text/javascript" src="js/react-dom.js" ></script>
    		<script>
    			var ea = React.createClass({
    		        render: function() {
    		          var elapsed = Math.round(this.props.elapsed  / 100);
    		          var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
    		          var message = '开始计时:' + seconds + ' 秒';
    		
    		          return React.DOM.p(null, message);
    		        }
    		    });
    		
    		    var eaf = React.createFactory(ea);
    		    var startTime = new Date().getTime();
    		      setInterval(function() {
    		        ReactDOM.render(
    		          eaf({elapsed: new Date().getTime() - startTime}),document.getElementById('timer')
    		        );
    		    }, 1000);
    		</script>
    	</head>
    	<body>
    		<div id="timer"></div>
    	</body>
    </html>
    

    3、实现结果

     

    展开全文
  • 最近在项目中使用计时器一个倒计时按钮时,一开始没理清关系,后来终于找到了关键,做一个小demo备忘。 先把效果图贴上: 想做的效果如上,点击按钮后,按钮设为禁用,开始倒计时10s,倒计时结束即恢复。 思路...

    最近在项目中使用计时器写一个倒计时按钮时,一开始没理清关系,后来终于找到了关键,做一个小demo备忘。
    先把效果图贴上:
    在这里插入图片描述
    想做的效果如上,点击按钮后,按钮设为禁用,开始倒计时10s,倒计时结束即恢复。
    思路如下:
    1,将控制按钮状态、按钮文字和计时的秒数放在state中,用以改变状态。
    2,写一个计时器方法,如setInterval(clock,1000);,将clock方法每隔一秒执行一次,在clock方法中写更新状态的操作。
    3,设一个变量值为计时的秒数,用以进行更新操作。这一步很关键,之前我就直接使用了state中的秒数来更新,但是发现state中的秒数在render()中是实时更新的,但它在一个方法中并不会更新,所以要赋值给一个变量来进行更新。
    4,计时器方法执行到预期值时要关闭计时器方法,再将原状态更新回去。

    把整体代码贴在下面:

    import React, { PureComponent } from 'react';
    import router from 'umi/router';
    import { connect } from 'dva';
    import {WingBlank, WhiteSpace,List, InputItem,Button,Toast} from 'antd-mobile';
    import styles from './index.less';
    
    const Item = List.Item;
    class Demo extends PureComponent {
    
      state = {
        time: 10,
        btnDisable:false,
        btnContent: '发送验证码'
      };
    
      render() {
    
        let timeChange;
        let ti = this.state.time;
        //关键在于用ti取代time进行计算和判断,因为time在render里不断刷新,但在方法中不会进行刷新
        const clock =()=>{
          if (ti > 0) {
            //当ti>0时执行更新方法
             ti = ti - 1;
             this.setState({
                time: ti,
                btnContent: ti + "s之内不能再次发送验证码",
              });
             console.log(ti);
          }else{
            //当ti=0时执行终止循环方法
            clearInterval(timeChange);
            this.setState({
              btnDisable: false,
              time: 10,
              btnContent: "发送验证码",
            });
          }
        };
    
        const sendCode = () =>{
          this.setState({
            btnDisable: true,
            btnContent: "10s之内不能再次发送验证码",
          });
          //每隔一秒执行一次clock方法
          timeChange = setInterval(clock,1000);
        };
    
        return (
          <div>
            <WhiteSpace size='xl' />
            <WingBlank>
             <WhiteSpace size='lg' style={{backgroundColor: '#f5f5f9'}}/>
              <Button type="primary" className={styles.send}  inline onClick={sendCode} disabled={this.state.btnDisable}>{this.state.btnContent}</Button>
            </WingBlank>
          </div>
        );
      }
    }
    export default Demo;
    
    展开全文
  • React 60S倒计时

    2019-10-24 23:43:05
    React 60S倒计时 1.设置状态: 2.函数主体: 3.应用: 4..效果图: ...

     React 60S倒计时

     

    1.设置状态:

     

    2.函数主体:

     

    3.应用:

     

    4..效果图:

     


    更多专业前端知识,请上【猿2048】www.mk2048.com
    展开全文
  • react 倒计时

    2019-09-21 22:53:21
    话不多说,代码如下(样式就不贴...// 倒计时 import React, { Component } from 'react'; import PropTypes from 'prop-types'; export default class CountDown extends Component { static propTypes = ...

    话不多说,代码如下(样式就不贴了,大家都懂的):

    // 倒计时
    
    import React, { Component } from 'react';
    import PropTypes from 'prop-types';
    
    export default class CountDown extends Component {
        static propTypes = {
            deadline: PropTypes.number.isRequired // 截止日期的时间戳
        }
        constructor(props) {
            super(props);
            this.state = {
                day: '00',
                hours: '00',
                minutes: '00',
                seconds: '00'
                // milliseconds: '00'
            }
        }
    
        componentDidMount() {
            this._countDown();
        }
    
        componentWillUnmount() {
            this.time && clearTimeout(this.time);
        }
    
        _countDown = () => {
            const currTime = +new Date();
            const deadline = this.props.deadline;
            const dTime = deadline - currTime;
            if (dTime <= 0) {
                // 这样做更精确
                clearTimeout(this.time);
                this.setState({
                    day: '00',
                    hours: '00',
                    minutes: '00',
                    seconds: '00'
                });
                return;
            }
            this.time = setTimeout(() => {
                this.setState(this._formatTime(dTime));
                this._countDown();
            }, 1000);
        }
    
        _formatTime = (time) => {
            const day = Math.floor(time / (1000 * 60 * 60 * 24)).toString().padStart(2, '0');
            const hours = Math.floor(( time / (1000 * 60 * 60)) % 24).toString().padStart(2, '0');
            const minutes = Math.floor(( time / (1000 * 60)) % 60).toString().padStart(2, '0');
            const seconds = Math.floor(( time / 1000) % 60).toString().padStart(2, '0');
            // const milliseconds = Math.floor(time % 1000);
            return ({day, hours, minutes, seconds });
        }
        render() {
            const { day, hours,  minutes,  seconds } = this.state;
            return (
                <div className="count-down">
                    <span>{day}</span>:
                    <span>{hours}</span>:
                    <span>{minutes}</span>:
                    <span>{seconds}</span>
                </div>
            );
        }
    }

    实现效果如下:

     

    转载于:https://www.cnblogs.com/LXY02/p/9351201.html

    展开全文
  • React倒计时组件

    2018-09-29 10:22:49
    React倒计时组件 倒计时组件只精确到秒。 效果: import React, {Component} from 'react' export default class countDown extends Component { constructor(props) { super(props); this.state = { day: 0, ...

    React倒计时组件

    倒计时组件只精确到秒。

    效果:
    在这里插入图片描述

    import React, {Component} from 'react'
    
    export default class countDown extends Component {
      constructor(props) {
        super(props);
        this.state = {
          day: 0,
          hour: 0,
          minute: 0,
          second: 0
        }
      }
      componentDidMount() {
        if(this.props.endTime){
          let endTime = this.props.endTime.replace(/-/g, "/");
          this.countFun(endTime);
        }
      }
      //组件卸载取消倒计时
      componentWillUnmount(){
        clearInterval(this.timer);
      }
      
      countFun = (time) => {
        let end_time = new Date(time).getTime(),
        sys_second = (end_time - new Date().getTime());
        this.timer = setInterval(() => {
        //防止倒计时出现负数
          if (sys_second > 1000) {
            sys_second -= 1000;
            let day = Math.floor((sys_second / 1000 / 3600) / 24);
            let hour = Math.floor((sys_second / 1000 / 3600) % 24);
            let minute = Math.floor((sys_second / 1000 / 60) % 60);
            let second = Math.floor(sys_second / 1000 % 60);
            this.setState({
              day:day,
              hour:hour < 10 ? "0" + hour : hour,
              minute:minute < 10 ? "0" + minute : minute,
              second:second < 10 ? "0" + second : second
            })
          } else {
            clearInterval(this.timer);
            //倒计时结束时触发父组件的方法
            //this.props.timeEnd();
          }
        }, 1000);
      }
      render() {
        return (
          <span>{this.state.day}{this.state.hour}:{this.state.minute}:{this.state.second}</span>
        )
      }
    }
    
    
    展开全文
  • 1.在state中定义倒计时时间; constructor(props){ super(props); this.state={ time: 60, } } 2.添加定时器方法; // 倒计时 time = () =&gt; { // 清除可能存在的定时器 clearInterval(this.timer...
  • 封装的一个倒计时按钮,仅仅使用TouchableOpacity,View和Text. 安装 npm i react-native-zycountdown 或者 yarn add react-native-zycountdown 使用 两个使用方式样式分别对应下面...
  • React Hook 倒计时

    2020-07-14 00:47:22
    useEffect(() => { setTimeout(() => { if (count > 0) { setCount((c: number) => c - 1); // ✅ 在这不依赖于外部的 `count` 变量 } }, 1000);... // ✅ 我们的 effect 不适用组件...
  • 但是呢,有一家公司的CTO在国外,没办法对我的技术进行审核,所以他给我发了两套题,第一套题呢,是要使用react实现动画倒计时小时钟组件,父级组件通过传递秒、结束回调方法控制时钟组件。   2. 要求: (1)...
  • React 实现验证码倒计时功能 export default class Register extends React.Component { constructor(props) { super(props) console.log(props) this.state = { count: 60, // 秒数初始化为60秒 liked:...
  • React Native倒计时

    2017-03-28 09:50:37
    在开发电商相关的APP的时候,经常会有秒杀,团购的倒计时的需求,跟大家推荐一个开源的倒计时组件: github地址:https://github.com/jackuhan/react-native-CountDowntimer 该组件只需要添加一个结束时间即可,...
  • import React, { useState, useEffect, useCallback, useRef } from 'react'; const CountDown: React.FC = () => { const intervalRef = useRef<any>(null); const [count, changeCount] = useState...
  • 想实现这样的倒计时怎么破,求大神指教![图片说明](https://img-ask.csdn.net/upload/201602/23/1456208054_301384.jpg)
  • 使用React Native开发的倒计时App
  • react实现简单倒计时

    2019-07-06 15:43:34
    今天遇到一个简单的小功能,看网上的一些方法感觉不太适合,... 1 import React, { Component } from 'react'; 2 3 class NoTimeContent extends Component { 4 constructor(props) { 5 super(props) 6...
  • react native 倒计时控件

    2018-03-14 17:57:40
    程序包下载地址:...//in package.json "dependencies": { "react_native_countdowntimer":"1.0.2" } //in your js code import CountDownTimer from ...
  • 场景:获取验证码按钮,点击获取...import React, { useState, useEffect } from 'react'; import { Button } from 'antd'; let timeChange; const Btn = () => { const [time, setTime] = useState(60); co...
  • 第一步: 最后一步:清除定时器 好了
  • /* ...endTimeUp: 倒计时结束的回调 */ export const CountDown = ({ endTime, endTimeUp }) => { const [day, setDay] = useState(0) const [hour, setHour] = useState(0) const [minu...
  • react验证码倒计时

    2019-09-18 14:58:16
    本文由两部分组成,思路和代码 ...2.这里倒计时setTimeout,不能setInterval。 代码: componentWillReceiveProps(next){ //短信验证码倒计时 if(next.isTimerStart && next.tim...
1 2 3 4 5 ... 20
收藏数 1,353
精华内容 541
关键字:

用react如何写倒计时