blob: 61503d17610efaacb5ae9707e9bfad77f0ca45c2 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
import { useEffect, useState } from 'react'
const CountDown2 = ({ initialTime }) => {
const hours = Math.floor(initialTime / 3600)
const minutes = Math.floor((initialTime % 3600) / 60)
const seconds = initialTime % 60
const [timeLeft, setTimeLeft] = useState({
hour: hours,
minute: minutes,
second: seconds
})
useEffect(() => {
const timer = setInterval(() => {
const totalSeconds = timeLeft.hour * 3600 + timeLeft.minute * 60 + timeLeft.second
const secondsLeft = totalSeconds - 1
if (secondsLeft < 0) {
clearInterval(timer)
} else {
const hours = Math.floor(secondsLeft / 3600)
const minutes = Math.floor((secondsLeft % 3600) / 60)
const seconds = secondsLeft % 60
setTimeLeft({ hour: hours, minute: minutes, second: seconds })
}
}, 1000)
return () => clearInterval(timer)
}, [timeLeft])
return (
<div className='flex justify-between gap-x-2'>
<div className='flex flex-col items-center'>
<span className='bg-red-200 border border-red-500 text-black font-sm w-10 h-8 flex items-center justify-center rounded'>
{timeLeft.hour.toString().padStart(2, '0')}
</span>
</div>
<div className='flex flex-col items-center'>
<span className='bg-red-200 border border-red-500 text-black font-sm w-10 h-8 flex items-center justify-center rounded'>
{timeLeft.minute.toString().padStart(2, '0')}
</span>
</div>
<div className='flex flex-col items-center'>
<span className='bg-red-200 border border-red-500 text-black font-sm w-10 h-8 flex items-center justify-center rounded'>
{timeLeft.second.toString().padStart(2, '0')}
</span>
</div>
</div>
)
}
export default CountDown2
|
