用事件监听器实现更换文本颜色

好的，下面是用事件监听器实现更换文本颜色的代码：

HTML代码：

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

JavaScript代码：

const text = document.getElementById('text');
const btn = document.getElementById('btn');

btn.addEventListener('click', function() {
  const colors = ['red', 'blue', 'green', 'orange', 'purple'];
  const randomIndex = Math.floor(Math.random() * colors.length);
  const randomColor = colors[randomIndex];
  text.style.color = randomColor;
});

当用户点击按钮时，事件监听器会触发一个函数，该函数会在颜色数组中随机选择一种颜色，并将文本颜色设置为该颜色。

相关问题

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

好的，根据你的要求，我来为你还原这五个功能的键盘输入：

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);
}

javascript用事件监听实现更换文本颜色

好的，以下是使用事件监听器实现更换文本颜色的 JavaScript 代码：

// 获取文本元素
var text = document.getElementById("text");

// 添加鼠标移入事件监听器
text.addEventListener("mouseenter", function() {
  // 生成随机颜色
  var color = "#" + Math.floor(Math.random() * 16777215).toString(16);

  // 设置文本颜色
  text.style.color = color;
});

// 添加鼠标移出事件监听器
text.addEventListener("mouseleave", function() {
  // 恢复文本颜色
  text.style.color = "black";
});

代码中，我们首先通过 `document.getElementById()` 方法获取文本元素，然后给文本元素添加鼠标移入和移出事件监听器。当鼠标移入文本元素时，会执行回调函数中的代码，生成一个随机颜色并将其设置为文本颜色。当鼠标移出文本元素时，会执行另一个回调函数，将文本颜色恢复为黑色。这样就实现了鼠标移入时更换文本颜色，移出时恢复原来颜色的效果。