javascript - 有什么方法可以在反应js中进行时间倒计时吗？

问题描述

这是我的 main.js 文件，我正在尝试添加倒数计时器，但它显示在第一张卡片中，而不是所有其他卡片中。请帮助我获得解决方案。

    import { Grid } from "@mui/material";
    import Timer from "../MainPage/Timer";
    import Card from "@mui/material/Card";
    import CardContent from "@mui/material/CardContent";
    import Typography from "@mui/material/Typography";
    
    const Main = (props) => {
      const getMain = () => {
        return (
          // return console.log(props);
          <Card sx={{ m: 2, width: 400 }}>
            <CardContent>
              <Grid container spacing={2}>
                <Grid item>
                  <span className="ui top attach label">
                    {/* Match {match["Match"]} */}
                    Match {props.match.Match}
                  </span>
                </Grid>
                <Grid item>
                  <Typography variant="h5" component="div">
                    {/* {match["Team_A"]} */}
                    {props.match.Team_A}
                  </Typography>
                </Grid>
                <Grid item>
                  <Typography sx={{ mb: 1.5 }} color="text.secondary">
                    {/* {match["Date"]}
                     */}
                    {props.match.Date}
                  </Typography>
                  <Typography sx={{ mb: 1.5 }} color="text.secondary">
                    {
                      <Timer
                        remainingDate={props.match.Date}
                        remainingTime={props.match.Time}
                      />
                    }
                  </Typography>
                </Grid>
                <Grid item className="ui right aligned">
                  <Typography variant="h5" component="div">
                    {/* {match["Team_B"]} */}
                    {props.match.Team_B}
                  </Typography>
                </Grid>
              </Grid>
            </CardContent>
          </Card>
        );
      };
      // setInterval(getMain, 1000);
      return getMain();
    };
    export default Main;

Timer.js file 

const Timer = (props) => {
  // console.log(props);

  var countDownDate = new Date(
    props.remainingDate + " " + props.remainingTime
  ).getTime();

  // Update the count down every 1 second
  // var x = setInterval(function () {
  // Get today's date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Output the result in an element with id="demo"
  return days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
};

export default Timer;

如果在没有 setInterval 的情况下使用，它会显示所有卡片中的剩余时间，但是当我使用 setInterval 时，它只显示在第一张卡片上。下面是带有 setInterval 的代码。

不使用 setInterval

计时器.js

const Timer = (props) => {
  // console.log(props);

  var countDownDate = new Date(
    props.remainingDate + " " + props.remainingTime
  ).getTime();

  // Update the count down every 1 second
  var x = setInterval(function () {
    // Get today's date and time
    var now = new Date().getTime();

    // Find the distance between now and the count down date
    var distance = countDownDate - now;

    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor(
      (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
    );
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // Output the result in an element with id="demo"
    document.getElementById("tmr").innerHTML =
      days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
  }, 1000);
  return (
    <div>
      <span id="tmr"></span>
    </div>
  );
};

export default Timer;

使用 setInterval 得到的输出是

标签： javascriptreactjs

javascript - 有什么方法可以在反应js中进行时间倒计时吗？

问题描述

解决方案

推荐阅读