使用Math函数,产生一个1-80的随机整数,并在页面上显示。。 I 2. 点击开始按钮后,使用定时函数每隔60 毫秒产生一个随机整数。。 3. 点击停止按钮后,停止定时器的使用 这些条件的完整代码
时间: 2024-10-09 08:01:51 浏览: 27
在网页前端,我们可以使用JavaScript配合HTML来实现这个功能。这里是一个简单的例子:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Random Number Generator</title>
<style>
#result {
font-size: 24px;
margin-top: 20px;
}
</style>
</head>
<body>
<button id="startBtn">开始</button>
<button id="stopBtn" disabled>停止</button>
<div id="result"></div>
<script>
let timerId = null;
// 获取DOM元素
const startBtn = document.getElementById('startBtn');
const stopBtn = document.getElementById('stopBtn');
const resultDiv = document.getElementById('result');
// 开始生成随机数
function generateRandomNumber() {
const min = 1;
const max = 80;
const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
resultDiv.textContent = `当前随机数: ${randomNumber}`;
}
// 启动定时器
startBtn.addEventListener('click', () => {
if (!timerId) {
timerId = setInterval(generateRandomNumber, 60);
stopBtn.disabled = false;
startBtn.innerText = '停止';
}
});
// 停止定时器
stopBtn.addEventListener('click', () => {
clearInterval(timerId);
timerId = null;
startBtn.disabled = true;
stopBtn.innerText = '开始';
});
</script>
</body>
</html>
```
在这个代码中,我们创建了两个按钮,一个用于开始生成随机数,另一个用于停止。点击开始按钮后,会每60毫秒调用`generateRandomNumber`函数生成一个新的随机数并在结果区域显示。当用户点击停止按钮时,我们会清除定时器并禁用开始按钮。
阅读全文