创建一个生成并展示随机数的Web应用。
时间: 2024-10-16 16:21:44 浏览: 25
创建一个生成并展示随机数的Web应用通常涉及前端和后端两部分技术。以下是简单的步骤:
**前端(HTML、JavaScript和CSS)**:
1. 使用HTML构建页面结构,包括显示随机数的区域和一个按钮用于触发生成新的随机数。
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<title>Random Number Generator</title>
</head>
<body>
<h1>随机数生成器</h1>
<p id="random-number"></p>
<button onclick="generateRandomNumber()">点击获取新随机数</button>
<script src="script.js"></script>
</body>
</html>
```
2. 使用JavaScript编写函数`generateRandomNumber()`,它会从服务器请求一个新的随机数,并更新显示区域的内容。
```javascript
function generateRandomNumber() {
fetch('/api/random', {method: 'GET'})
.then(response => response.json())
.then(data => document.getElementById('random-number').textContent = data.random);
}
```
**后端(例如Node.js + Express)**:
1. 安装必要的库如Express (`npm install express`) 和 body-parser (`npm install body-parser`),用于处理HTTP请求。
2. 创建一个简单的Express服务器,设置一个路由处理生成随机数的请求。
```javascript
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
// API endpoint for generating random number
app.get('/api/random', (req, res) => {
const randomNumber = Math.floor(Math.random() * 100); // Generate a random number between 0 and 99
res.json({ random: randomNumber });
});
const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Server running on port ${port}`));
```
**部署和运行**:
将上述代码保存到两个文件(如index.html和server.js),然后使用命令行启动后端服务。通过浏览器访问 `http://localhost:<your-port>/api/random` 就能看到前端动态生成的随机数。
阅读全文