1、编写一html网页,其内容包含有2个按钮,一个段落,点击一个按钮可将段落内容改写为hello,点击另外一个将段落改 写为goodbye。 2、结合html和nodejs,编写一前后端程序,前端页面有2个超链接,点击第一个超链接,页面返回当前时间,点击另一个超链接,页面返回当前年月日。
时间: 2024-03-05 14:49:01 浏览: 56
1. 编写 HTML 网页,包含两个按钮,一个段落
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Button Example</title>
</head>
<body>
<p id="text">Original Text</p>
<button onclick="changeText('hello')">Say Hello</button>
<button onclick="changeText('goodbye')">Say Goodbye</button>
<script>
function changeText(newText) {
document.getElementById("text").innerHTML = newText;
}
</script>
</body>
</html>
```
在这个 HTML 网页中,我们定义了一个段落和两个按钮。当用户点击一个按钮时,JavaScript 会调用 `changeText()` 函数并将段落内容替换为相应的新文本。
2. 结合 HTML 和 Node.js,编写前后端程序,返回当前时间和当前年月日
前端 HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Date Example</title>
</head>
<body>
<a href="#" onclick="getCurrentTime()">Get Current Time</a>
<a href="#" onclick="getCurrentDate()">Get Current Date</a>
<p id="result"></p>
<script>
function getCurrentTime() {
fetch('/time')
.then(response => response.text())
.then(data => {
document.getElementById("result").innerHTML = data;
})
}
function getCurrentDate() {
fetch('/date')
.then(response => response.text())
.then(data => {
document.getElementById("result").innerHTML = data;
})
}
</script>
</body>
</html>
```
在这个 HTML 网页中,我们定义了两个超链接和一个段落。当用户点击一个超链接时,JavaScript 会调用 `fetch()` 函数并向服务器发送请求,获取当前时间或当前年月日。当服务器返回响应时,JavaScript 会将结果显示在段落中。
后端 Node.js 代码:
```javascript
const express = require('express');
const app = express();
app.get('/time', (req, res) => {
const now = new Date();
res.send(now.toLocaleTimeString());
});
app.get('/date', (req, res) => {
const now = new Date();
res.send(now.toLocaleDateString());
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
```
在这个 Node.js 代码中,我们创建了一个 Express 应用,并定义了两个路由:'/time' 和 '/date'。当客户端向这些路由发送 GET 请求时,服务器会返回当前时间或当前年月日的字符串。我们在端口 3000 上启动服务器,并在控制台输出启动成功的消息。
启动 Node.js 服务器:
```
node app.js
```
在浏览器中访问 http://localhost:3000,即可查看前端页面。
阅读全文