react的中秋放假倒计时的小demo

站长

2023年09月28日 21:01 · 阅读数 48

双节将至, 实在无聊, 正好最近在看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>

最终效果如图, 简陋了些. 谢谢各位看官的捧场

react的中秋放假倒计时的小demo

更新

原来只能在代码中去修改结束时间, 增加了输入框功能
- 按提示将指定格式粘贴到输入框, 并按该格式修改为自己想要的时间
- 将输入时间转成时间戳,后继续之前的功能(格式校验没有做,输入小心)
- 以下是完整代码

<!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>

更新后的页面如下, 太简陋了

react的中秋放假倒计时的小demo

转载自:https://juejin.cn/post/7283434831961997348