帮我用js和css写一个框,框内能不断跳动显示出不同的随机数,最后停在700
时间: 2024-03-14 08:48:25 浏览: 30
好的,我可以为您提供一个简单的示例代码:
HTML:
```html
<div class="box">
<p id="number"></p>
</div>
```
CSS:
```css
.box {
width: 200px;
height: 200px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
}
p {
font-size: 48px;
animation: jump 0.1s ease-in-out infinite;
}
@keyframes jump {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
```
JS:
```js
const numberElem = document.getElementById('number');
function getRandomNumber() {
return Math.floor(Math.random() * 1000) + 1;
}
function animateNumber() {
const number = getRandomNumber();
numberElem.textContent = number;
if (number !== 700) {
requestAnimationFrame(animateNumber);
}
}
requestAnimationFrame(animateNumber);
```
这段代码将在一个200x200的框中显示一个跳动的随机数,并在最终停止在700。您可以根据需要调整CSS和JS代码。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![iso](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)