zoukankan      html  css  js  c++  java
  • 如何在react中实现一个倒计时组件

    倒计时组件

    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);  
    

    }

  • 相关阅读:
    第一章 Shell基础知识
    keepalived与LVS实现高可用
    集群简介
    基于NFS v4版本搭建NFS服务器
    LDAP安装步骤
    Nginx配置阿里云https服务
    zabbix基础
    Apache、Nginx和Tomcat之虚拟主机配置
    标准盒模型和怪异盒模型的区别
    js中数组扁平化处理
  • 原文地址:https://www.cnblogs.com/panax/p/9030694.html
Copyright © 2011-2022 走看看