倒计时组件

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

}

如何在react中实现一个倒计时组件的更多相关文章

  1. 在React中写一个Animation组件,为组件进入和离开加上动画/过度

    问题 在单页面应用中,我们经常需要给路由的切换或者元素的挂载和卸载加上过渡效果,为这么一个小功能引入第三方框架,实在有点小纠结.不如自己封装. 思路 原理 以进入时opacity: 0 --> ...

  2. 如何在react中实现一个table切换?

    废话不说,直接贴代码,供新手参考 <!DOCTYPE html> export default class TabComponent extends Component { constru ...

  3. [Web 前端] 如何在React中做Ajax 请求?

    cp from : https://segmentfault.com/a/1190000007564792 如何在React中做Ajax 请求? 首先:React本身没有独有的获取数据的方式.实际上, ...

  4. React 深入系列1:React 中的元素、组件、实例和节点

    文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加深对React的理解,以及在项目中 ...

  5. React中的高阶组件,无状态组件,PureComponent

    1. 高阶组件 React中的高阶组件是一个函数,不是一个组件. 函数的入参有一个React组件和一些参数,返回值是一个包装后的React组件.相当于将输入的React组件进行了一些增强.React的 ...

  6. React中的高阶组件

    高阶组件(HOC, High-Order Component)是React中用于重组组件逻辑的高级技术,是一种编程模式而不是React的api. 直观来讲,高阶组件是以某一组件作为参数返回一个新组件的 ...

  7. Vue3语法快速入门以及写一个倒计时组件

    Vue3写一个倒计时组件 vue3 beta版本发布已有一段时间了,文档也大概看了一下,不过对于学一门技术,最好的方法还是实战,于是找了一个比较简单的组件用vue3来实现,参考的是vant的count ...

  8. 如何在JAVA中实现一个固定最大size的hashMap

    如何在JAVA中实现一个固定最大size的hashMap 利用LinkedHashMap的removeEldestEntry方法,重载此方法使得这个map可以增长到最大size,之后每插入一条新的记录 ...

  9. 如何在idea中引入一个新maven项目

    如何在idea中引入一个新的maven项目,请参见如下操作:      

随机推荐

  1. 数据库(二)—— MySQL索引优化

    目录 MySQL的索引优化 一.MySQL 5.7的初始化配置 二.MySQL配置文件 1.配置 2.配置文件作用 三.多实例 1.创建相关的目录 2.创建实例的配置文件 3.初始化 4.授权 5.启 ...

  2. Tomcat启动脚本(2)catalina.bat

    @echo off rem Licensed to the Apache Software Foundation (ASF) under one or more rem contributor lic ...

  3. CentOS6.5下面OpenSSH低版本升级至7.3

    升级前版本: openssl-1.0.1e-48.el6_8.1.x86_64 openssh-5.3p1-118.1.el6_8.x86_64 升级后版本: OpenSSL 1.0.2j OpenS ...

  4. android中的国际化

    java国际化步骤: 定义资源文件: baseName_language_country.properties baseName_language.properties baseName.proper ...

  5. C语言交换两个数的值

    #include<stdio.h> int main() { //交换两个数的值 // 方法一 可读性最好 ; ; int temp ; temp = a; a = b; b = temp ...

  6. 关于PCB的Mark点

    关于PCB的Mark PCB板子做好后,需要贴装元器件,现在元器件的贴装都是通过机器来完成的(SMT).SMT中会用到mark点. 一.什么是Mark点 Mark点也叫基准点或者光学定位点,为贴装工艺 ...

  7. 【BZOJ5093】图的价值

    题面 Description "简单无向图"是指无重边.无自环的无向图(不一定连通). 一个带标号的图的价值定义为每个点度数的k次方的和. 给定n和k,请计算所有n个点的带标号的简 ...

  8. PHP中session存储及删除变量的方法

    Session 变量保存的信息是单一用户的,并且可供应用程序中的所有页面使用.但是session会话信息是临时的,在用户离开网站后就会被删除.如果需要永久储存信息,就需要把数据存储在数据库中. < ...

  9. 阿里linux-Centos各版本下载

    https://mirrors.aliyun.com/centos/7/isos/x86_64/ Index of /centos/7/isos/x86_64/ ../ 0_README.txt 16 ...

  10. linux POSIX信号量

    POSIX信号量机制是3种IPC机制之一,3种IPC机制源于POSIX.1的实时扩展. 创建一个新的命名信号量或者使用一个现有信号量 #include <fcntl.h> #include ...