1、编写一htm|网页, 其内容包含有2个按钮,一个段落,点击一个按钮可将段落内容改写为hello,点击另外一个将段落改写为goodbye. 2、结合html和nodejs,编写一前后端程序,前端页面有2个超链接,点击第一个超链接,页面返回当前时间,点击另一个超链接,页面返回当前年月日。
时间: 2024-03-25 09:40:39 浏览: 169
新建文件夹_我的第一个网页_
好的,让我来回答你的问题。
针对你的第一个问题,可以按照以下步骤来编写一个包含两个按钮的HTML页面:
1. 创建一个HTML文件,比如 "index.html",并打开它。
2. 在HTML文件中添加一个段落标签,比如 `<p>`,并输入一些文本,比如 "原始文本",然后在标签中添加一个唯一的ID,比如 "text",以便在JavaScript中引用它。
3. 在HTML文件中添加两个按钮标签,比如 `<button>`,并为它们添加一个唯一的ID,比如 "btn1" 和 "btn2",以便在JavaScript中引用它们。
4. 在HTML文件中添加一个JavaScript脚本标签,比如 `<script>`,并在其中编写一个函数,用于根据按钮的点击事件来更改段落文本。比如:
```javascript
function changeTextToHello() {
document.getElementById("text").innerHTML = "Hello";
}
function changeTextToGoodbye() {
document.getElementById("text").innerHTML = "Goodbye";
}
document.getElementById("btn1").addEventListener("click", changeTextToHello);
document.getElementById("btn2").addEventListener("click", changeTextToGoodbye);
```
5. 最后,保存HTML文件并在浏览器中打开它,就可以看到两个按钮和一个段落文本。点击按钮时,段落文本将会更改为 "Hello" 或 "Goodbye"。
针对你的第二个问题,可以按照以下步骤来编写一个基于Node.js的前后端程序:
1. 创建一个新的文件夹,比如 "node-app",并在其中创建两个文件,一个用于前端HTML,一个用于后端Node.js代码。比如 "index.html" 和 "server.js"。
2. 在 "index.html" 文件中添加两个超链接标签,比如 `<a>`,并为它们添加一个唯一的ID,比如 "link1" 和 "link2",以便在JavaScript中引用它们。
3. 在 "server.js" 文件中引入必要的Node.js模块,比如 `http` 和 `url`,并创建一个HTTP服务器,监听来自客户端的请求。比如:
```javascript
const http = require('http');
const url = require('url');
const server = http.createServer((req, res) => {
const path = url.parse(req.url, true).pathname;
if (path === '/time') {
const currentTime = new Date().toLocaleTimeString();
res.write(currentTime);
} else if (path === '/date') {
const currentDate = new Date().toLocaleDateString();
res.write(currentDate);
}
res.end();
});
server.listen(3000, () => {
console.log('Server running on port 3000');
});
```
4. 在 "index.html" 文件中编写一个JavaScript函数,用于根据超链接的点击事件向服务器发送不同的请求,并将服务器响应显示在页面上。比如:
```javascript
function getTime() {
fetch('/time')
.then(response => response.text())
.then(data => {
document.getElementById('result').innerHTML = data;
});
}
function getDate() {
fetch('/date')
.then(response => response.text())
.then(data => {
document.getElementById('result').innerHTML = data;
});
}
document.getElementById('link1').addEventListener('click', getTime);
document.getElementById('link2').addEventListener('click', getDate);
```
5. 最后,在终端中切换到 "node-app" 文件夹,并运行 "node server.js" 命令,启动服务器。然后在浏览器中打开 "index.html" 文件,就可以看到两个超链接。点击链接时,页面将向服务器发送请求,并在页面上显示服务器响应。
希望这些步骤能够帮助你解决问题。如果还有其他问题,请随时问我。
阅读全文