我用带有setTimeout函数的Java脚本编写了随机数生成器的代码.代码如下所示.
const [number, setnumber] = useState();
function randomNumber() {
let number1 = Math.floor(Math.random() * 21 + 1);
setnumber(number1);
}
setInterval(() => {
randomNumber();
}, 6000);
但它在几秒钟后就会无限地随机化.
要求在20秒超时后生成数字,并在接下来的4秒内保持随机化数字,直到时钟重置为零.
循环是连续的
<CircularProgress
trackColor="inherit"
capIsRound
thickness={'6px'}
className="circlular progress"
value={80}
size={'500px'}
color={'#20fc94'}
alignItems={'center'}
justifyContent={'center'}
display={'flex'}
>
<CircularProgressLabel
className="circlular progress lable"
borderRadius={'full'}
alignItems={'center'}
justifyContent={'center'}
display={'flex'}
>
<Stack
border={'5px solid #20FC9D'}
borderRadius={'full'}
h={'385px'}
w={'385px'}
align={'center'}
justify={'center'}
>
<Stack
border={'5px solid #13cee6'}
borderRadius={'full'}
h={'350px'}
w={'350px'}
boxShadow={'0 0 25px #13cee6'}
align={'center'}
justify={'center'}
>
<Stack
className="text"
h={'full'}
w={'full'}
p={'12'}
align={'center'}
justify={'center'}
>
<Text
flex={'2'}
h={'fit-content'}
w={'fit-content'}
fontSize={'1.4em'}
background={
'radial-gradient(circle, rgba(201,18,191,1) 0%, rgba(134,40,206,1) 51%)'
}
backgroundClip={'text'}
style={{ WebkitTextStroke: '1px #20fc9d' }}
>
{number}
</Text>
<Text flex={'2'} color={'#FCA120'} px={'4'} fontSize={'md'}>
Will the next number be Higher or Lower
</Text>
</Stack>
</Stack>
</Stack>
</CircularProgressLabel>
</CircularProgress>
下面是循环进度和数字生成器函数调用的代码.