react实现简单倒计时
今天遇到一个简单的小功能,看网上的一些方法感觉不太适合,所以就手敲了一个,直接上代码!!!
import React, { Component } from 'react';
class NoTimeContent extends Component {
constructor(props) {
super(props)
this.state = {
day: 0,
hour: 0,
minute: 0,
second: 0
}
}
render() {
return (
<NoTimeCon>
<h2>
<span>限时秒杀</span>
<span>{this.state.day}天 {this.state.hour}:{this.state.minute}:{this.state.second}</span>
</h2>
</NoTimeCon>
)
}
componentDidMount() {
const end = Date.parse(new Date('2018-11-29 24:00'))
this.countFun(end);
}
//卸载组件取消倒计时
componentWillUnmount(){
clearInterval(this.timer);
}
countFun = (end) => {
let now_time = Date.parse(new Date());
var remaining = end - now_time;
this.timer = setInterval(() => {
//防止出现负数
if (remaining > 1000) {
remaining -= 1000;
let day = Math.floor((remaining / 1000 / 3600) / 24);
let hour = Math.floor((remaining / 1000 / 3600) % 24);
let minute = Math.floor((remaining / 1000 / 60) % 60);
let second = Math.floor(remaining / 1000 % 60);
this.setState({
day:day,
hour:hour < 10 ? "0" + hour : hour,
minute:minute < 10 ? "0" + minute : minute,
second:second < 10 ? "0" + second : second
})
} else {
clearInterval(this.timer);
//倒计时结束时触发父组件的方法
//this.props.timeEnd();
}
}, 1000);
}
}
export default NoTimeContent;
react实现简单倒计时的更多相关文章
- react中简单倒计时跳转
其实在react中实现倒计时的跳转方法有很多中,其中我认为较为好用的就是通过定时器更改state中的时间值. 首先在constructor中设置10秒的时间值: constructor () { su ...
- React Hooks简单业务场景实战(非源码解读)
前言 React Hooks 是React 16.7.0-alpha 版本推出的新特性.从 16.8.0 开始,React更稳定的支持了这一新特性. 它可以让你在不编写 class 的情况下使用 st ...
- jQuery简单倒计时插件
一. 效果预览 二. 实现 1. 按照特定的类结构布局. 2. 需要先引入jQuery,再引入此文件. /** * Author: CC11001100 * * 简单倒计时 * * 1. 支持页面内同 ...
- React Native之倒计时组件的实现(ios android)
React Native之倒计时组件的实现(ios android) 一,需求分析 1,app需实现类似于淘宝的活动倒计时,并在倒计时结束时,活动也结束. 2,实现订单倒计时,并在倒计时结束时,订单关 ...
- React 最简单的入门教程
一看就懂的ReactJs入门教程(精华版) 现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual D ...
- react封装简单的浏览器顶部加载进度条全局组件
在项目中经常会有在请求前后加loading或者加加载进度条,一般这些组件都会抽离出来作为全局组件 进度条的插件貌似都不是很符合自己项目中的需求,于是.. 参考nprogress样式,自己在项目中封装组 ...
- js简单倒计时
不想每次用倒计时,都现写代码,比较烦,这里记一下,也顺便分享一些倒计时简单的逻辑. 如果你有更简单方便的代码,可以分享给大家. var method = { countdownObj: { timer ...
- React Router简单Demo
简介 react router是使用react的时候首选的一个路由工具. 安装 react router包含react-router,react-router-dom和react-router-nat ...
- 学习笔记-React的简单介绍&工作原理
一.React简单介绍 1.React起源于Facebook内部项目,与2013年5月 2.是一个用于构建用户界面的JavaScript库 二.React特点 1.声明式设计-React采用声明范式, ...
随机推荐
- 打造终端下mutt收发邮件环境(fbterm,fetchmail,msmtp,procmail,mutt)
实现mutt下收发邮件须要安装,mutt,fbterm,fetchmail,msmtp,procmail 下面是各配置文件.在home文件夹下,隐私信息有马赛克... .muttrc : 当中Mail ...
- T2: 一种能累积计算积分的EC2实例类型
假设您打算在AWS云端执行一个小型的 Web Server,或是一个小型的数据库,平时并没有大量的工作负载.在绝大多数时间里,您的实例并不须要消耗大量的CPU资源.可是,再不怎么受欢迎的博客也可能会有 ...
- iOS应用主流UI架构实现
一.介绍 如今iOS开发过程中,最常见的一种UI架构是:界面底部是四五个tab bar .中间是内容显示.顶部是包括标题及返回等操作button,当点击进入某个模块后可以点击进行返回.这样的架构的应用 ...
- 怎样预置Android 手机 APK
预制APK有下面4种情况: 1, 怎样将带源代码的 APK 预置进系统? 2, 怎样将无源代码的APK预置进系统? 3, 怎样预置APK使得用户能够卸载,恢复出厂设置时不能恢复? 4, 怎样预置APK ...
- BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第12章节--SP 2013中远程Event Receivers 总结
BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第12章节--SP 2013中远程Event Receivers 总结 本章节向你介绍了SP平台上eve ...
- Linux命令(六)——软件包管理(安装应用程序)
与windows安装各种应用程序相似,在linux下也可以安装各种需要的应用程序,通常称为软件包.目前,在linux系统下常见的软件包格式主要有:RPM包.TAR包.bz2包.gz包.deb包.sh结 ...
- DexClassLoader和PathClassLoader类载入机制
0x00 在DexClassLoader和PathClassLoader载入Dex流程一文中,我们分析了dex文件怎样形成了DexFile结构体.本文中解说类载入机制,实际上就是生成ClassObje ...
- sql server中的悲观锁和乐观锁
https://www.cnblogs.com/chenwolong/p/Lock.html https://www.cnblogs.com/dengshaojun/p/3955826.html ht ...
- xenserver 增加新硬盘
xenserver 增加新硬盘 1.XS创建本地存储 首先 分区好的的硬盘接到服务器上 查看所有硬盘了的id ls -l /dev/disk/by-id/ 记下硬盘的全称.接下来开始挂载 xe sr ...
- Oracle性能优化——总体介绍
最近参加Oracle的培训,对Oracle有了更加深入的认识,在此做个学习总结. 1.Oracle数据库调优不能仅指望修改几项数据库参数就能有明显效果,问题更多出在应用方面,教育开发者正确地使用数据库 ...