用react做一个计时_react倒计时重新计时 - 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;
    
    展开全文
  • 但是呢,有一家公司的CTO在国外,没办法对我的技术进行审核,所以他给我发了两套题,第套题呢,是要使用react实现动画倒计时小时钟组件,父级组件通过传递秒、结束回调方法控制时钟组件。   2. 要求: (1)倒...

    1. 这些天也都在面试,面试的内容呢,也大多千篇一律,无外乎vue、react这些框架的一些原理,和使用方法。但是呢,有一家公司的CTO在国外,没办法对我的技术进行审核,所以他给我发了两套题,第一套题呢,是要使用react实现动画倒计时小时钟组件,父级组件通过传递秒、结束回调方法控制时钟组件。

     

    2. 要求:

    (1)倒计时组件调用 :


     

    (2)倒计时组件内部简单结构 :


     

    3. 思考实现过程:

     

    (1)首先实现简单的数字倒计时更改

    (2)最后实现数值更改结合transition运动

     

    4. 具体核心代码实现:

     

    (1)模板结构:

    <div>
    
    <section className="timeBox">
    
    <div className="timeBoxLineWrap">
    
    <div className="timeBoxLine" ref="timeBoxLine">
    
    { this.state.remainingFormattedTime.split('').map((v,index,arr) => (
    
       (<div className="timeBoxLine-Box" key={index}  >
    
           <span className="timeBoxLine-Box-item">{this.state.lastTime[index]}</span>
    
           <span className="timeBoxLine-Box-item">{v}</span>
    
       </div>)
    
    ) 
    
    )}
    
    </div>
    
    </div>
    
    </section>
    
    </div>

     

    (2)生命周期以及执行方法: 

    import React from "react";
    
    import './time.css'
    
    
    
    export default class Countdown extends React.Component {
    
        
    
        constructor(props) {
    
            super(props);
    
            this.second = parseInt(this.props.remainingSecond);
    
            this.timer = null;
    
            this.state = { remainingFormattedTime: this.formatNumber(this.second-1), lastTime: this.formatNumber(this.second)};
    
        }
    
    
    
        componentDidMount() {
    
         //transfer timeTimer
    
        this.timerTime();
    
        }
    
    
    
    
    
        //change time
    
        timerTime = ()=>{
    
         this.timer = setInterval(()=>{
    
                this.compareTimeList();
    
                this.second--;
    
                if( this.second+2 === 0 ){
    
                    this.listenTimeEnd();
    
                }
    
         },1000);
    
        }
    
        
    
        //Formatting a second to a time string
    
        formatNumber = (seconds)=>{
    
         // max : 99:59:59
    
    
    
         let hour = 0;
    
         let minute = 0;
    
         let second = seconds<0 ? 0 : seconds;
    
    
    
         //If it is greater than one second
    
         if(seconds > 59){
    
         second = seconds % 60;
    
         minute = Math.floor(seconds / 60);
    
        
    
         if( minute > 59 ){
    
         hour = Math.floor(minute / 60) > 99 ? 99 : Math.floor(minute / 60);
    
         minute = minute % 60;
    
         }
    
         }
    
    
    
         return (this.addZoom(hour)+':'+this.addZoom(minute)+':'+this.addZoom(second));
    
        }
    
    
    
        //add zoom
    
        addZoom = (num)=>{
    
         if(num*1 > 9){
    
         return num;
    
         }else{
    
         return '0' + num;
    
         }
    
        }
    
    
    
        //time end
    
        listenTimeEnd = ()=>{
    
         clearInterval(this.timer);
    
            this.initTimeBox();
    
            this.setState({ remainingFormattedTime: '00:00:00', lastTime: '00:00:00'});
    
            this.props.onComplete&&this.props.onComplete();
    
        }
    
    
    
        initTimeBox(){
    
            let TimeBoxItems = this.refs.timeBoxLine.children;
    
    
    
            for(var i=0;i
    
                TimeBoxItems[i].style.cssText = "transition:0s ease;transform:translateY(0);";
    
            }
    
        }
    
    
    
        //compare time
    
        compareTimeList = ()=>{
    
         let otime = this.state.lastTime;
    
         let ctime = this.state.remainingFormattedTime;
    
            let TimeBoxItems = this.refs.timeBoxLine.children;
    
            let This = this;
    
            
    
            //clear transform
    
            for(var i=0;i
    
                TimeBoxItems[i].index = i;
    
                TimeBoxItems[i].addEventListener('transitionend',function(){
    
                    This.setState( {remainingFormattedTime: This.formatNumber(This.second) , lastTime: This.formatNumber(This.second+1) } );
    
                    this.style.cssText = 'transition:0s ease;transform:translateY(0)';
    
                });
    
            }
    
            
    
            // set animation
    
         for(var i=0;i
    
         if(otime[i] != ctime[i]){
    
                    TimeBoxItems[i].style.cssText = "transition:ease 0.5s;transform:translateY(-100%);"
    
         }else{
    
                    TimeBoxItems[i].style.cssText = "transition:0s ease;transform:translateY(0);";
    
                }
    
         }
    
    
    
        }
    
    
    
        // render 
    
        render() {
    
            return (
    
             //模板结构
    
            );
    
        } 
    
    }

     

    5. 最需要注意的就是,数据驱动后动画的更改,或者DOM更新后,动画的衔接。

     

    6. 组件开发结束,最终预览效果:

     

    子在川上曰,逝者如斯夫 ~ 

    展开全文
  • 计时组件 import React, { Component } from 'react' import $ from 'jquery' import "../../css/spellTEPayPublic/countDown.css" export default class countDown extends Component{ constructor(props){ super...

    倒计时组件

    import React, {
    Component
    } from 'react'
    import $ from 'jquery'
    import "../../css/spellTEPayPublic/countDown.css"

    export default class countDown extends Component{
    constructor(props){
    super(props);
    this.state={
    day:1,
    hour:0,
    minute:0,
    second:0,
    millisecond:0
    }
    }
    componentDidMount(){
    let endTime= this.props.msg.endTime.replace(/-/g, "/");
    countFun(endTime);
    }
    render(){
    return(



    距离本团结束剩余0
    0
    :
    0
    :
    0


    )
    }
    }
    function countFun(time){
    //if(typeof end_time == "string")
    var end_time = new Date(time).getTime(),//月份是实际月份-1
    //current_time = new Date().getTime(),
    sys_second = (end_time-new Date().getTime());
    var timer = setInterval(function(){
    if (sys_second > 0) {
    sys_second -= 10;
    var day = Math.floor((sys_second /1000/ 3600) / 24);
    var hour = Math.floor((sys_second /1000/ 3600) % 24);
    var minute = Math.floor((sys_second /1000/ 60) % 60);
    var second = Math.floor(sys_second/1000 % 60);
    var haomiao = Math.floor(sys_second%1000);
            $(".day").text(day);//计算天  
            $(".hour").text(hour<10?"0"+hour:hour);//计算小时  
            $(".minute").text(minute<10?"0"+minute:minute);//计算分  
            $(".second").text(second<10?"0"+second+"."+haomiao:second+"."+haomiao);// 计算秒  
        } else {   
            clearInterval(timer);  
        }  
    }, 10);  

    }

    转载于:https://www.cnblogs.com/panax/p/9030694.html

    展开全文
  • import React, { useState, useEffect, useCallback, useRef } from 'react'; const CountDown: React.FC = () => { const intervalRef = useRef<any>(null); const [count, changeCount] = useState...
  • React 实现验证码倒计时功能 export default class Register extends React.Component { constructor(props) { super(props) console.log(props) this.state = { count: 60, // 秒数初始化为60秒 liked:...
  • 使用React Native开发的倒计时App
  • 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 60S倒计时

    2019-10-24 23:43:05
    React 60S倒计时 1.设置状态: 2.函数主体: 3.应用: 4..效果图: ...
  • 场景:获取验证码按钮,点击获取...import React, { useState, useEffect } from 'react'; import { Button } from 'antd'; let timeChange; const Btn = () => { const [time, setTime] = useState(60); co...
  • 封装的一个计时按钮,仅仅使用TouchableOpacity,View和Text. 安装 npm i react-native-zycountdown 或者 yarn add react-native-zycountdown 使用 两个使用方式样式分别对应下面...
  • react-native-CountDowntimer react native countdown timer component which Only ...倒计时控件,只需要添加一个结束时间。 https://github.com/jackuhan/react-native-CountDowntimer A simple countdown co
  • 1.在state中定义倒计时时间; constructor(props){ super(props); this.state={ time: 60, } } 2.添加定时器方法; // 倒计时 time = () =&gt; { // 清除可能存在的定时器 clearInterval(this.timer...
  • 1.其实在react中实现倒计时的跳转方法有很多中,其中我认为较为好用的就是通过定时器更改state中的时间值。 首先在constructor中设置10秒的时间值: constructor () { super() this.state={ seconds: 3, }; ...
  • 一个非常简单的react native计时器demo 因为最近在学习react native,所以自己也一边学习,一边记下自己的笔记。今天看到定时器,所以写了一个简单的计时器。 定时器: setTimeout, clearTimeoutsetInterval, ...
  • function tick() { const element = ( &lt;div&gt; &lt;h1&gt;Hello, world!&lt;/h1&gt; &lt;h2&gt;It is {new Date().toLocaleTimeString()}.&... ReactDOM....
  • http://blog.csdn.net/liudao7994/article/details/71480235 有图
  • react实现简单倒计时

    2019-07-06 15:43:34
    今天遇到一个简单的小功能,看网上的一些方法感觉不太适合,所以就手敲了一个,直接上代码!!! 1 import React, { Component } from 'react'; 2 3 class NoTimeContent extends Component { 4 ...
  • React Hook 倒计时

    2020-07-14 00:47:22
    useEffect(() => { setTimeout(() => { if (count > 0) { setCount((c: number) => c - 1); // ✅ 在这不依赖于外部的 `count` 变量 } }, 1000);... // ✅ 我们的 effect 不适用组件...
1 2 3 4 5 ... 20
收藏数 3,177
精华内容 1,270
关键字:

用react做一个计时