react 倒计时 countDown
因为项目需要做一个react倒计时组件,网络上也有,但是感觉不是很好,兼容性不高,于是自己写了一个:
1.包含 天,时,分,秒。可以根据特定的场景选择相应的展示方式;
2.提供回调函数。
1 import React from 'react' 2 3 export class CountDown extends React.Component { 4 constructor(props) { 5 super(props); 6 this.state = { 7 day: 0, 8 hour: 0, 9 minute: '00', 10 second: '00' 11 } 12 } 13 componentDidMount() { 14 if(this.props.endTime){ 15 let endTime = this.props.endTime.replace(/-/g, "/"); 16 this.countFun(endTime); 17 } 18 } 19 //组件卸载时,取消倒计时 20 componentWillUnmount(){ 21 clearInterval(this.timer); 22 } 23 24 countFun = (time) => { 25 let end_time = new Date(time).getTime(), 26 sys_second = (end_time - new Date().getTime()); 27 this.timer = setInterval(() => { 28 //防止倒计时出现负数 29 if (sys_second > 1000) { 30 sys_second -= 1000; 31 let day = Math.floor((sys_second / 1000 / 3600) / 24); 32 let hour = Math.floor((sys_second / 1000 / 3600) % 24); 33 let minute = Math.floor((sys_second / 1000 / 60) % 60); 34 let second = Math.floor(sys_second / 1000 % 60); 35 this.setState({ 36 day:day, 37 hour:hour < 10 ? "0" + hour : hour, 38 minute:minute < 10 ? "0" + minute : minute, 39 second:second < 10 ? "0" + second : second 40 }) 41 } else { 42 clearInterval(this.timer); 43 //倒计时结束时,触发父组件的方法 44 if(this.props.timeOver){ 45 this.props.timeOver() 46 } 47 48 } 49 }, 1000); 50 } 51 render() { 52 return ( 53 <span> {this.props.type == 'day' ?<span>{this.state.day}天{this.state.hour}:</span> :""}{this.props.type == 'hour' ? <span>{this.state.hour}:</span>:""}{this.state.minute}:{this.state.second}</span> 54 ) 55 } 56 }
父组件:
转载于:https://www.cnblogs.com/wyq186/p/9934088.html
react 倒计时 countDown相关推荐
- react倒计时组件
如图 效果是 :后面时间倒计时 import React, { useState, useEffect } from 'react'; import moment from 'moment'; / ...
- react中创建一个组件_如何使用React和MomentJS创建一个Countdown组件
react中创建一个组件 Recently I had to create a Countdown for one of my other projects, and I thought that i ...
- Taro(React)实现具有滚动效果的倒数计时器
Taro(React)实现具有滚动效果的倒数计时器 Taro获取节点方法的封装 import Taro from "@tarojs/taro"; import { NodesRef ...
- react native 安装插件
RN插件 1.字体库icons npm i react-native-vector-icons --save (要关联 rnpm link) 2.字符串string npm i query-strin ...
- html 倒计时 插件,JavaScript使用小插件实现倒计时的方法讲解
CountDown.js 一个用来实现简单页面倒计时的轻量级工具 API CountDown.openTimeCountBySeconds()根据要计时的秒数打开一个显示剩余时间的倒计时 参数: El ...
- 微信小程序之15分钟倒计时(附带天数和时钟的实现方法在文章中)
这是制作的订单支付前倒计时,如果客户在规定时间内没能 支付,则系统自动删除,这样就以便有些商品冗余,当然了,这里只有分钟和秒钟,天数和时钟我写在了最底下,最后代码的显示第七行,可以看一下,然后带入到相 ...
- 【js】日时分秒倒计时
<div class="widgetDock" style="height: 5px;"><!-- 倒计时 --><div cla ...
- uni-app 中文档阅读倒计时
文章很长,文章下面的倒计时按钮,倒计时的时候不能点击,倒计时结束,按钮能点击的效果 倒计时事件 // 按钮的倒计时countdown() {const that = this//修改倒计时时间 这里写 ...
- uniapp实现倒计时
首先我们需要对时间戳进行格式化处理,处理成距离现在时间还有多少时分秒,00.00.00,小时.分钟.秒的格式,可以对格式转换做一个简单的封装处理 // 将时间戳转化为时分秒的格式,一般用作倒计时 fu ...
最新文章
- swoole实现数据库连接池
- OC-NSString从文件中读取字符串
- 【技术累积】【点】【java】【27】@JSONField
- php如何修改文件名,php修改文件名的实现方法_后端开发
- Flask项目--爱家租房项目结构图
- C++ STL stirng的复制比较
- 如何精通java_如何精通java技术
- 【git】Git 提示fatal: remote origin already exists 错误解决办法
- 微信小程序直播插件live-player-plugin使用
- 程序员职场突破——建立优势策略,找到职业突破发力点
- AD16原理图库加封装报Footprint not found
- 创建新用户时的相关缺省设置
- 红米note5刷android,红米Note5 安卓9.0 解锁Bootloader-刷入第三方TWRP_Recovery 获取完整ROOT教程...
- win7 iis php mysql_windows7和iis配置的php phpinfo()中没有mysql组件
- Java 后端服务的跨域处理
- web部署到服务器显示404,WAR包部署到服务器的tomcat下404报错
- 任意多边形面积—有向面积
- 单例模式的四种实现方式(饿汉模式、懒汉模式、静态内部类、枚举类)
- 4.18耶稣受难日黄金持续跌势(附黄金原油操作建议)
- js处理有序列表、js处理无序列表
热门文章
- Spring学习(七)bean装配详解之 【通过注解装配 Bean】【自动装配的歧义解决】...
- 最新版Kubernetes常用命令大全
- 根据时间格式字符串取出时分秒各自的数值
- imx6 android SD卡启动
- 前后台传值乱码问题解决
- iOS设计模式 - 命令模式
- 每日记载内容总结22
- 在C#里调用C++的dll时需要注意的一些问题转
- Joint Detection and Identification Feature Learning for Person Search
- 【虾说区块链】入门区块链,先学分布式系统!一文说明分布式系统与区块链的关系...