如何在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);
}
如何在react中实现一个倒计时组件的更多相关文章
- 在React中写一个Animation组件,为组件进入和离开加上动画/过度
问题 在单页面应用中,我们经常需要给路由的切换或者元素的挂载和卸载加上过渡效果,为这么一个小功能引入第三方框架,实在有点小纠结.不如自己封装. 思路 原理 以进入时opacity: 0 --> ...
- 如何在react中实现一个table切换?
废话不说,直接贴代码,供新手参考 <!DOCTYPE html> export default class TabComponent extends Component { constru ...
- [Web 前端] 如何在React中做Ajax 请求?
cp from : https://segmentfault.com/a/1190000007564792 如何在React中做Ajax 请求? 首先:React本身没有独有的获取数据的方式.实际上, ...
- React 深入系列1:React 中的元素、组件、实例和节点
文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加深对React的理解,以及在项目中 ...
- React中的高阶组件,无状态组件,PureComponent
1. 高阶组件 React中的高阶组件是一个函数,不是一个组件. 函数的入参有一个React组件和一些参数,返回值是一个包装后的React组件.相当于将输入的React组件进行了一些增强.React的 ...
- React中的高阶组件
高阶组件(HOC, High-Order Component)是React中用于重组组件逻辑的高级技术,是一种编程模式而不是React的api. 直观来讲,高阶组件是以某一组件作为参数返回一个新组件的 ...
- Vue3语法快速入门以及写一个倒计时组件
Vue3写一个倒计时组件 vue3 beta版本发布已有一段时间了,文档也大概看了一下,不过对于学一门技术,最好的方法还是实战,于是找了一个比较简单的组件用vue3来实现,参考的是vant的count ...
- 如何在JAVA中实现一个固定最大size的hashMap
如何在JAVA中实现一个固定最大size的hashMap 利用LinkedHashMap的removeEldestEntry方法,重载此方法使得这个map可以增长到最大size,之后每插入一条新的记录 ...
- 如何在idea中引入一个新maven项目
如何在idea中引入一个新的maven项目,请参见如下操作:
随机推荐
- 数据库(二)—— MySQL索引优化
目录 MySQL的索引优化 一.MySQL 5.7的初始化配置 二.MySQL配置文件 1.配置 2.配置文件作用 三.多实例 1.创建相关的目录 2.创建实例的配置文件 3.初始化 4.授权 5.启 ...
- Tomcat启动脚本(2)catalina.bat
@echo off rem Licensed to the Apache Software Foundation (ASF) under one or more rem contributor lic ...
- 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 ...
- android中的国际化
java国际化步骤: 定义资源文件: baseName_language_country.properties baseName_language.properties baseName.proper ...
- C语言交换两个数的值
#include<stdio.h> int main() { //交换两个数的值 // 方法一 可读性最好 ; ; int temp ; temp = a; a = b; b = temp ...
- 关于PCB的Mark点
关于PCB的Mark PCB板子做好后,需要贴装元器件,现在元器件的贴装都是通过机器来完成的(SMT).SMT中会用到mark点. 一.什么是Mark点 Mark点也叫基准点或者光学定位点,为贴装工艺 ...
- 【BZOJ5093】图的价值
题面 Description "简单无向图"是指无重边.无自环的无向图(不一定连通). 一个带标号的图的价值定义为每个点度数的k次方的和. 给定n和k,请计算所有n个点的带标号的简 ...
- PHP中session存储及删除变量的方法
Session 变量保存的信息是单一用户的,并且可供应用程序中的所有页面使用.但是session会话信息是临时的,在用户离开网站后就会被删除.如果需要永久储存信息,就需要把数据存储在数据库中. < ...
- 阿里linux-Centos各版本下载
https://mirrors.aliyun.com/centos/7/isos/x86_64/ Index of /centos/7/isos/x86_64/ ../ 0_README.txt 16 ...
- linux POSIX信号量
POSIX信号量机制是3种IPC机制之一,3种IPC机制源于POSIX.1的实时扩展. 创建一个新的命名信号量或者使用一个现有信号量 #include <fcntl.h> #include ...