Question

经过几天研究和挣扎这个项目后，我想请求一些帮助。不执行的代码段是最后一个代码，当运行clearInterval方法时，breaktime应该停止。

此外，我不知道当您在红色圆圈内单击时，如何防止倒计时多次执行。

我是一个新手所以代码是原始的，但我正在尝试。

Codepen链接：https://codepen.io/Seonatic/pen/zRPygV

    class LoginPage extends Component {

    constructor(props) {
        super(props);
        this.state = {
            login: true, //switch between Login and SignUp
            email: '',
            password: '',
            firstName: '',
            lastName: '',
            loading: false,
            error: ''
        };
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleInputChange = this.handleInputChange.bind(this);
    }

    handleSubmit(){
        this.setState({loading: true, error: ''});
        this._confirm();
    }

    handleInputChange(event) {
        const target = event.target;
        const value = target.value;
        const name = target.name;

        this.setState({
          [name]: value
        });
      }

    render(){

        return (
                <div>
                    <div>
                        {this.state.loading ? 
                        <CircularProgress size={60} thickness={7} /> :
                        this.state.login ? 
                            <LoginForm onSubmit={this.handleSubmit} onChange={this.handleInputChange}/> 
                            : 
                            <RegisterForm />
                        }
                    </div>
                    {this.state.error ? <div className="error">{this.state.error}</div> : ''}
                    <a
                        onClick={() => this.setState({ login: !this.state.login })}
                    >
                    {this.state.loading ? 
                    '' : this.state.login ? 
                            'Besoin d\'un compte ?' : 'Déjà un compte ?'
                    }
                    </a>
                </div>
        )
    }

    _confirm = ()  => {
      const { firstName, lastName, email, password } = this.state;
      if (this.state.login) {
        this.props.loginMutation({
          variables: {
            email,
            password,
          }
        })
        .then(({data}) => {
          this.setState({loading: false});
          const { token } = data.loginUser;
          this._saveUserData(token);
          checkAuth.authenticate();
        })
        .then(() => {
          this.props.history.push(`/`);
        }).catch((error) => {
          this.setState({loading: false, error: error});
        });
      }
    }

       _saveUserData = (token) => {
        localStorage.setItem('token', token);
      }
    }   

    const LOGIN_MUTATION = gql`
        mutation loginMutation($email: String!, $password: String!) {
        loginUser(email: $email, password: $password) {
           token
           user {
            id
            firstName
            lastName
           }
        }
     }
    `

    export default compose(graphql(LOGIN_MUTATION, { name: 'loginMutation' }))(LoginPage)

Answer 1

据我了解你的问题，这应该做的工作：

＆＃13;

basic_string_view

＆＃13;

var val = 1;

function add() {
  val++;
  x = val;
  if (val >= 1) {
    document.getElementById("count").value = +x;
  }
}

function minus() {
  val--;
  x = val;
  if (val >= 1) {
    document.getElementById("count").value = +x;
  }
}

function add2() {
  val++;
  x = val;
  if (val >= 1) {
    document.getElementById("break").value = x;
  }
}

function minus2() {
  val--;
  x = val;
  if (val >= 1) {
    document.getElementById("break").value = x;
  }
}

var isCountdownRunning = false;
var myVar;

function countdown() {
  var session = document.getElementById("count").value;
  var time = (document.getElementById("input").value = +session * 60);
  var breakm = document.getElementById("break").value;
  var breaktime = (document.getElementById("input").value = +breakm * 60);
  var display = document.getElementById("input").value;
  var sec = 1;

  if (isCountdownRunning === false) {
    myVar = setInterval(myTimer, 1000);
    isCountdownRunning = true;
  }

  function myTimer() {
    document.getElementById("input").value = time--;
    if (time === 0) {
      clearInterval(myVar);
      var myVar2 = setInterval(increase, 1000);

      function increase() {
        document.getElementById("input").value = breaktime--;
        if (breaktime === 0) {
          clearInterval(myVar2);
          isCountdownRunning = false;
        }
      }
    }
  }
}

＆＃13;

h1 {
  font-family: 'Righteous', cursive;
  font-size: 68px;
  position: relative;
  top: 2px;
  font-weight: bold;
  color: red;
  text-align: center;
}

#circle {
  top: 35px;
  left: 37%;
  background: #FF2600;
  background: -moz-radial-gradient(center, #FF2600 0%, #BF1010 94%, #7A1B1B 100%);
  background: -webkit-radial-gradient(center, #FF2600 0%, #BF1010 94%, #7A1B1B 100%);
  background: radial-gradient(ellipse at center, #FF2600 0%, #BF1010 94%, #7A1B1B 100%);
  position: relative;
  display: block;
  height: 400px;
  width: 400px;
  border-radius: 100%;
  border: 1.2px solid black;
}

#icon {
  position: relative;
  top: 30px;
}

#contador {
  position: relative;
  top: -20px;
  left: 38%;
  background-color: white;
  display: block;
  height: 120px;
  width: 350px;
  border: 0.9px dotted white;
}

#pausa {
  position: relative;
  top: -59px;
  float: left;
  left: 50%;
  background-color: white;
  display: block;
  height: 60px;
  width: 175px;
  border: 0.1px black;
}

#sesion {
  font-family: 'Russo One', sans-serif;
  font-size: 65px;
  text-align: center;
}

#pausa {
  position: relative;
  top: -96px;
  background-color: black font-family: 'Russo One', sans-serif;
  font-size: 30px;
  text-align: center;
}

#contador {
  position: relative;
  top: -20px;
  font-family: 'Russo One', sans-serif;
  font-size: 0px;
  text-align: left;
  color: black;
}

#tp {
  position: relative;
  top: 9px;
  left: -136px;
  width: 30px;
  height: 30px;
  border-radius: 70%;
  border: 1px dotted black;
  background-color: red;
  color: white;
}

#tm {
  position: relative;
  top: 9px;
  left: -54px;
  width: 30px;
  height: 30px;
  background-color: red;
  color: white;
  border-radius: 70%;
  border: 1px dotted black;
}

#bp {
  position: relative;
  top: 96px;
  left: -31px;
  width: 30px;
  height: 30px;
  border-radius: 80%;
  border: 1px dotted black;
  background-color: red;
  color: white;
}

#bm {
  position: relative;
  top: 94px;
  left: 42px;
  width: 30px;
  height: 30px;
  background-color: red;
  color: white;
  border-radius: 70%;
  border: 1px dotted black;
}

#ct {
  font-size: 20px;
  position: relative;
  top: 10px;
  left: 45px;
}

#bt {
  position: relative;
  font-size: 20px;
  position: relative;
  top: 3px;
  left: 5px;
}

#count {
  position: relative;
  top: -190px;
  left: 85px;
  background-color: white;
  color: black;
  width: 70px;
  height: 60px;
  text-align: center;
  font-family: 'Russo One', sans-serif;
  font-size: 38px;
}

#break {
  position: relative;
  top: -19px;
  left: 5px;
  background-color: white;
  color: black;
  width: 70px;
  height: 60px;
  text-align: center;
  font-family: 'Russo One', sans-serif;
  font-size: 38px;
}

#input {
  position: relative;
  top: 150px;
  left: -80px;
  width: 200px;
  height: 60px;
  font-family: 'Russo One', sans-serif;
  font-size: 28px;
  text-align: center;
  border-radius: 5%;
  border-width: 2.2px;
  border-color: red;
  -webkit-box-shadow: inset 1px -1px 15px 1px rgba(0, 0, 0, 0.84);
  box-shadow: inset 1px -1px 15px 1px rgba(0, 0, 0, 0.54);
}

#pause {
  position: relative;
  top: 150px;
  left: 60px;
  width: 120px;
  height: 40px;
  font-family: 'Russo One', sans-serif;
  font-size: 28px;
  text-align: center;
  border-radius: 5%;
  border-width: 4px;
  border-color: red;
  background-color: yellow;
  -webkit-box-shadow: inset 1px -1px 15px 1px rgba(0, 0, 0, 0.84);
  box-shadow: inset 1px -1px 15px 1px rgba(0, 0, 0, 0.54);
}

＆＃13;

因为您忘记了工具，这是一种检查倒计时是否已经开始运行的方法，所以时间间隔已经结束，一遍又一遍。

当休息时间为0时，番茄钟不会停止

1 个答案: