Javascript 创建倒计时计时器

我想在React Js中创建一个倒计时计时器，其中我将使用户启动（开始倒计时）、停止（停止倒计时）和重置（重置计时器），如图示例所示

作为React JS和javascript的初学者，我从测试按钮开始。之后，我创建了一个函数“secondPass”来计算剩余时间，然后显示剩余时间。“countDown”变量用于在“clearInterval（countDown）”之后停止“setinterval”

问题是，我在“codesandbox”平台中得到了一条错误消息，如图所示。如果有人能解释我的错误，如果没有，请帮助我编写一个非常简单的代码来实现我的项目

:

下面是React代码：

import React from "react";

export default class Timer extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      timer: 90
    };
  }

  var seconds = 1200, // Number Of Seconds

  countDown = setInterval(function() {
    secondPass();
  }, 1000);

  function secondPass() {

  var minutes = Math.floor(seconds / 60),  // To Determine The Minutes 

  var remSeconds = seconds % 60;   // To Determine The Seconds

}

  resetTime() {
    this.setState({ timer: 0 });
  }
  render() {
    const { timer } = this.state;
    return (
      <div className="App">
        <h2>{timer}</h2>
        <button onClick={() => this.resetTime()}>Reset</button>
      </div>
    );
  }
}

从“React”导入React；
导出默认类计时器扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
计时器：90
};
}
var seconds=1200，//秒数
倒计时=设置间隔（函数（）{
第二遍（）；
}, 1000);
函数secondPass（）{
var minutes=Math.floor（秒/60），//确定分钟数
var remSeconds=seconds%60；//确定秒数
}
重置时间（）{
this.setState（{timer:0}）；
}
render（）{
const{timer}=this.state；
返回(
{计时器}
此参数为.resetTime（）}>Reset
);
}
}

删除

第二次传递

函数的

关键字。如果要在类中声明函数，则不需要函数关键字

让它像

export default class Timer extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      timer: 90
    };
  }

  var seconds = 1200, // Number Of Seconds

  countDown = setInterval(function() {
    secondPass();
  }, 1000);

  secondPass() {

    var minutes = Math.floor(seconds / 60),  // To Determine The Minutes 

    var remSeconds = seconds % 60;   // To Determine The Seconds

  }

  resetTime() {
    this.setState({ timer: 0 });
  }
  render() {
    const { timer } = this.state;
    return (
      <div className="App">
        <h2>{timer}</h2>
        <button onClick={() => this.resetTime()}>Reset</button>
      </div>
    );
  }
}

导出默认类计时器扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
计时器：90
};
}
var seconds=1200，//秒数
倒计时=设置间隔（函数（）{
第二遍（）；
}, 1000);
第二关（）{
var minutes=Math.floor（秒/60），//确定分钟数
var remSeconds=seconds%60；//确定秒数
}
重置时间（）{
this.setState（{timer:0}）；
}
render（）{
const{timer}=this.state；
返回(
{计时器}
此参数为.resetTime（）}>Reset
);
}
}
这是因为
secondPass
是
Timer
类主体中定义的成员函数。在JS中，您不需要在其前面使用
函数
，只需像render一样声明它：将
函数secondPass
更改为
secondPass
在类中为secondPass函数声明函数时，不需要使用function关键字。这是新的ES6语法。
什么是倒计时？你需要用关键字初始化它。尝试将let置于倒计时之前=…您有一些语法错误。基本上，您不能像这样定义变量（
seconds
）和方法，这是错误的语法。在定义
secondPass（）
方法时，如果不使用
函数
关键字，您可能会发现此链接非常有用。