html上机实验三 1. 设计网页实现输入两个数,对这两个数求和, 将表达式及结果显示在本页内。 2. 输入一行文本,将输入的文本中的大写字母改 为小写字母并显示在本页内。 3.点击按钮更换文本颜色,例3-3。 4.用事件监听器实现更换文本颜色,例3-4。 5. 添加、删除列表的内容,例3-5。 注:所有事件调用自定义函数完成功能。

好的，我可以为你提供一些 HTML 代码和 JavaScript 代码，帮助你完成这五个实验。

1. 设计网页实现输入两个数,对这两个数求和, 将表达式及结果显示在本页内。

HTML代码：

<input type="number" id="num1">
<input type="number" id="num2">
<button onclick="sum()">求和</button>
<p id="result"></p>

JavaScript代码：

function sum() {
  var num1 = parseInt(document.getElementById("num1").value);
  var num2 = parseInt(document.getElementById("num2").value);
  var result = num1 + num2;
  document.getElementById("result").innerHTML = num1 + " + " + num2 + " = " + result;
}

2. 输入一行文本,将输入的文本中的大写字母改为小写字母并显示在本页内。

HTML代码：

<input type="text" id="text">
<button onclick="convert()">转换</button>
<p id="result"></p>

JavaScript代码：

function convert() {
  var text = document.getElementById("text").value;
  var result = text.toLowerCase();
  document.getElementById("result").innerHTML = result;
}

3. 点击按钮更换文本颜色,例3-3。

HTML代码：

<p id="text">这是一段文本</p>
<button onclick="changeColor()">更换颜色</button>

JavaScript代码：

function changeColor() {
  document.getElementById("text").style.color = "red";
}

4. 用事件监听器实现更换文本颜色,例3-4。

HTML代码：

<p id="text">这是一段文本</p>
<button id="btn">更换颜色</button>

JavaScript代码：

document.getElementById("btn").addEventListener("click", function() {
  document.getElementById("text").style.color = "red";
});

5. 添加、删除列表的内容,例3-5。

HTML代码：

<input type="text" id="item">
<button onclick="addItem()">添加</button>
<button onclick="removeItem()">删除</button>
<ul id="list"></ul>

JavaScript代码：

function addItem() {
  var item = document.getElementById("item").value;
  var node = document.createElement("li");
  var textnode = document.createTextNode(item);
  node.appendChild(textnode);
  document.getElementById("list").appendChild(node);
}

function removeItem() {
  var list = document.getElementById("list");
  list.removeChild(list.lastChild);
}

希望这些代码可以帮助你完成实验！