如何使用 ReactJS 创建倒数计时器？

在本文中，我们将了解如何使用 React JS 创建倒数计时器。基本上，倒数计时器将显示报价或事件的结束或开始时间。它主要用于即将到来的销售或我们应该发生的大事。

方法：

我们可以在 React JS 中使用以下方法来使用倒数计时器。

getTimeRemaining：这将计算目标计时器与我们拥有的当前时间之间的差异。此函数将通过计算检查目标计时器的剩余时间，并返回小时、分钟和秒的总数。
StartTimer：此函数将从 getTimeRemaining函数获取小时、分钟和秒的总数开始计时。
ClearTimer ：此函数用于重置计时器，意味着如果您重新启动计时器，它将清除上一次倒计时的剩余时间，否则它会开始并行两次计时，否则可能会相互崩溃。
getDeadTimer：此函数提供计时器的截止日期，这意味着它给出了您想要开始倒计时的时间。在这方面，如果你想延长，你必须增加时间。我们在两个场景中使用了这个，第一个是页面加载时，第二个是有人点击重置按钮。

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序：
```
npx create-react-app foldername
```
第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：
```
cd foldername
```

项目结构：它将如下所示。

示例：现在让我们看看如何在 Reactjs 中创建倒数计时器。 App.js 的代码如下所示。

App.js

import React, { useState, useRef, useEffect } from 'react'
  
  
const App = () => {
  
    // We need ref in this, because we are dealing
    // with JS setInterval to keep track of it and
    // stop it when needed
    const Ref = useRef(null);
  
    // The state for our timer
    const [timer, setTimer] = useState('00:00:00');
  
  
    const getTimeRemaining = (e) => {
        const total = Date.parse(e) - Date.parse(new Date());
        const seconds = Math.floor((total / 1000) % 60);
        const minutes = Math.floor((total / 1000 / 60) % 60);
        const hours = Math.floor((total / 1000 * 60 * 60) % 24);
        return {
            total, hours, minutes, seconds
        };
    }
  
  
    const startTimer = (e) => {
        let { total, hours, minutes, seconds } 
                    = getTimeRemaining(e);
        if (total >= 0) {
  
            // update the timer
            // check if less than 10 then we need to 
            // add '0' at the begining of the variable
            setTimer(
                (hours > 9 ? hours : '0' + hours) + ':' +
                (minutes > 9 ? minutes : '0' + minutes) + ':'
                + (seconds > 9 ? seconds : '0' + seconds)
            )
        }
    }
  
  
    const clearTimer = (e) => {
  
        // If you adjust it you should also need to
        // adjust the Endtime formula we are about
        // to code next    
        setTimer('00:00:10');
  
        // If you try to remove this line the 
        // updating of timer Variable will be
        // after 1000ms or 1sec
        if (Ref.current) clearInterval(Ref.current);
        const id = setInterval(() => {
            startTimer(e);
        }, 1000)
        Ref.current = id;
    }
  
    const getDeadTime = () => {
        let deadline = new Date();
  
        // This is where you need to adjust if 
        // you entend to add more time
        deadline.setSeconds(deadline.getSeconds() + 10);
        return deadline;
    }
  
    // We can use useEffect so that when the component
    // mount the timer will start as soon as possible
  
    // We put empty array to act as componentDid
    // mount only
    useEffect(() => {
        clearTimer(getDeadTime());
    }, []);
  
    // Another way to call the clearTimer() to start
    // the countdown is via action event from the
    // button first we create function to be called
    // by the button
    const onClickReset = () => {
        clearTimer(getDeadTime());
    }
  
    return (
        
            {timer}
            
        
    )
}
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：