使用数组存放四条信息,在页面加载时的文本域显示第一条信息,根据数组实践存放信息数在文本框中显示“共有几条”,单击【阅读】按钮显示下一条信息
时间: 2024-10-13 14:05:18 浏览: 20
要在网页上实现这样的功能,我们可以使用JavaScript来动态操作DOM元素并管理数组中的数据。首先,你需要创建一个HTML结构,包含一个文本域、一个显示信息数量的元素以及一个阅读按钮。然后,用JavaScript处理数组并在必要时更新这些元素。
HTML部分(index.html):
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Array Display</title>
</head>
<body>
<h1 id="message"></h1>
<p id="totalMessages">共有几条:</p>
<input type="text" id="currentMessage" disabled>
<button onclick="showNextMessage()">阅读</button>
<script src="script.js"></script>
</body>
</html>
```
JavaScript部分(script.js):
```javascript
// 假设我们有这样一个数组
const messages = ['第一条信息', '第二条信息', '第三条信息', '第四条信息'];
// 初始值
let currentMessageIndex = 0;
let totalMessagesText = document.getElementById('totalMessages');
let currentMessageInput = document.getElementById('currentMessage');
// 显示第一条信息
function displayInitialMessage() {
const messageElement = document.getElementById('message');
messageElement.textContent = messages[currentMessageIndex];
currentMessageInput.value = messages[currentMessageIndex];
}
// 显示下一条消息
function showNextMessage() {
if (currentMessageIndex < messages.length - 1) {
currentMessageIndex++;
updateDisplay();
} else {
currentMessageInput.value = "已达末条";
}
}
// 更新显示信息的数量
function updateTotalMessages() {
totalMessagesText.textContent = `共有${messages.length}条`;
}
// 初始化显示
displayInitialMessage();
updateTotalMessages();
// 绑定事件
document.addEventListener('DOMContentLoaded', function () {
// 页面加载完成后再进行上述操作
});
```
这个示例中,`displayInitialMessage` 函数用于初始化文本域显示第一条信息,`showNextMessage` 函数在点击按钮时切换到下一条信息,同时更新显示的信息数量。`updateTotalMessages` 更新文本显示总共有多少条信息。
当页面加载完成后,会自动调用这些函数来设置初始状态。
阅读全文