1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374 |
- import { useState, useEffect } from "react";
- function Timer({sec}) {
- const [count, setCount] = useState(sec);
- const [isPaused, setIsPaused] = useState(false);
- useEffect(() => {
- let timer;
- if (count > 0 && isPaused === true) {
- timer = setTimeout(() => setCount(count - 1), 1000);
- }
- return () => {
- clearTimeout(timer);
- };
- }, [count, isPaused]);
- useEffect(() => {
- setCount(sec);
- }, [sec]);
- const onBtnPauseClick = () => {
- setIsPaused(!isPaused);
- };
- const h = Math.floor(count / 3600);
- const s = count % 60;
- const min = Math.floor(count % 3600 / 60);
- return (
- <div>
- <div>{h < 10 ? '0' + h : h}:{min < 10 ? '0' + min : min}:{s < 10 ? '0' + s : s}</div>
- <button
- className="buttonForTimer"
- onClick={onBtnPauseClick}>
- {isPaused ? 'Pause' : 'Start'}
- </button>
- </div>
- );
- }
- function TimerControle() {
- const [sec, setSec] = useState(0);
- const [min, setMin] = useState(0);
- const [hours, setHours] = useState(0);
- return (
- <div>
- <input
- name="hours"
- type="number"
- placeholder="Часы"
- onChange={(e) => setHours(+e.target.value)}
- />
- <input
- name="minutes"
- type="number"
- placeholder="Минуты"
- onChange={(e) => setMin(+e.target.value)}
- />
- <input
- name="sec"
- type="number"
- placeholder="Секунды"
- onChange={(e) => setSec(+e.target.value)}
- />
- <Timer sec={hours * 3600 + min * 60 + sec} />
- </div>
- );
- }
- export default TimerControle;
|