制作如图2所示页面,使用数组存放四条信息,在页面加载时的文本域显 示第一条信息,根据数组实际存放信息数在文本框中显示“共有几条”,单击 T 【阅读】按钮显示下一条信息,当显示最后一条信息后,再次单击
时间: 2024-10-13 22:05:58 浏览: 16
要制作如您所描述的页面,我们可以使用HTML、CSS和JavaScript来实现这个功能。首先,创建一个基本的HTML结构,并包含一个文本域(textarea)、一个按钮(button)以及一个用于显示信息计数的文字标签。
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>数组信息显示</title>
<style>
.container {
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<textarea id="infoDisplay" rows="5" placeholder="第一条信息"></textarea>
<span id="totalCount">共有几条:</span>
</div>
<button onclick="showNextItem()">阅读</button>
<!-- JavaScript 代码将放在这里 -->
<script>
// 假设我们有一个名为data的数组,存储四条信息
const data = ["信息1", "信息2", "信息3", "信息4"];
let currentIndex = 0;
function showNextItem() {
if (currentIndex < data.length) {
document.getElementById("infoDisplay").value = data[currentIndex];
currentIndex++;
} else {
document.getElementById("infoDisplay").value = "已是最后一条";
document.getElementById("totalCount").textContent = `共${data.length}条`;
}
}
// 页面加载时显示第一条信息
showNextItem();
</script>
</body>
</html>
```
在这个示例中,HTML部分设置了初始显示的第一条信息,点击按钮`showNextItem`会通过JavaScript获取数组中的下一条信息并更新文本域。如果已经到达数组末尾,就显示提示信息并更新计数。
阅读全文