react的中秋放假倒计时的小demo
站长
· 阅读数 16
双节将至, 实在无聊, 正好最近在看react, 简单摸一个倒计时demo, 没有用到框架,只是一个HTML的页面用的react语法编写的, 各位看官有钱的捧个钱场,没钱捧个人场.
- 因为没有使用框架, 首先要引入相关的代码库
<script src="../js/prop-types.js"></script>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
- 然后就要建立被挂载的DOM节点和准备挂载的Dom元素信息
<div id="test"></div>
<script type="text/babel">
class Test extends React.Component {
render() {
return (
<div>
<div>我是倒计时的时间</div>
<button>倒计时开始</button>
</div>
)
}
}
</script>
- 准备好页面后, 将倒计时换成动态的并在按钮上绑定事件
- 首先获取到下班时间的时间戳
- 定义一个定时器,并在调用前清空上一次的定时器
- 在定时器内获取当前时间并调用将时间戳转成真实时间的函数,传递参数为下班时间-当前时间
- 转换函数是在网上随便找的一个方法
- 将转换好的时间放到state中并在页面实时显示
- 最终将定义好的类组件挂载到页面中完成
<script type="text/babel">
class Test extends React.Component {
render() {
const { endTime } = this.state
return (
<div>
<div>{endTime}</div>
<button onClick={this.beginCount}>倒计时开始</button>
</div>
)
}
state = {
timer: '',
endTime: ''
}
// 按钮开始事件
beginCount = () => {
let endTime = new Date('2023-9-28 17:30:00').getTime()
let {timer} = this.state
clearInterval(timer)
timer = setInterval(() => {
// 获取当前时间并被结束时间减去转换成时分秒
var timestamp = Date.parse(new Date())
let time = this.convent(endTime - timestamp)
this.setState({
endTime: time
})
}, 1000)
}
convent = (data) => {
var s;
var hours = parseInt((data % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = parseInt((data % (1000 * 60 * 60)) / (1000 * 60));
var seconds = (data % (1000 * 60)) / 1000;
s = (hours < 10 ? ('0' + hours) : hours) + ':' + (minutes < 10 ? ('0' + minutes) : minutes) + ':' + (seconds < 10 ? ('0' + seconds) : seconds);
return s
}
}
ReactDOM.render(<Test />, document.getElementById('test'))
</script>
- 最终效果如图, 简陋了些. 谢谢各位看官的捧场
更新
- 原来只能在代码中去修改结束时间, 增加了输入框功能
- 按提示将指定格式粘贴到输入框, 并按该格式修改为自己想要的时间
- 将输入时间转成时间戳,后继续之前的功能(格式校验没有做,输入小心)
- 以下是完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/prop-types.js"></script>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<style>
.testClass {
cursor: pointer;
}
.timeClass {
color: blueviolet;
font-size: 20px;
}
</style>
</head>
<body>
<div id="test"></div>
<script type="text/babel">
class Test extends React.Component {
render() {
const { endTime } = this.state
return (
<div>
<div>请复制格式到输入框: "2023-9-28 17:30:00"</div>
<input type="text" ref={c => this.time = c} name='time' />
<div className="timeClass">{endTime}</div>
<button className="testClass" onClick={this.beginCount}>倒计时开始</button>
</div>
)
}
state = {
timer: '',
endTime: ''
}
// 按钮开始事件
beginCount = () => {
let endTime = this.timeToTimestamp(this.time.value)
let { timer } = this.state
clearInterval(timer)
timer = setInterval(() => {
// 获取当前时间并被结束时间减去转换成时分秒
var timestamp = Date.parse(new Date())
let time = this.convent(endTime - timestamp)
this.setState({
endTime: time
})
}, 1000)
}
// 时间戳转成时间
convent = (data) => {
var s;
var hours = parseInt((data % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = parseInt((data % (1000 * 60 * 60)) / (1000 * 60));
var seconds = (data % (1000 * 60)) / 1000;
s = (hours < 10 ? ('0' + hours) : hours) + ':' + (minutes < 10 ? ('0' + minutes) : minutes) + ':' + (seconds < 10 ? ('0' + seconds) : seconds);
return s
}
// 时间转成时间戳
timeToTimestamp(time) {
let timestamp = Date.parse(new Date(time).toString());
console.log(time + "的时间戳为：" + timestamp);
return timestamp;
}
}
ReactDOM.render(<Test />, document.getElementById('test'))
</script>
</body>
</html>
更新后的页面如下, 太简陋了
