制作页面:使用数组存放四条信息,在页面加载时的文本域显示第一条信息,根据数组实际存放信息数在文本框中显示“共有几条”,单击【阅读】按钮显示下一条信息,当显示最后一条信息后,再次单击【阅读】按钮则提示“已经是最后一条信息了!”
时间: 2024-09-25 22:05:08 浏览: 28
制作这样的页面通常涉及前端HTML、CSS和JavaScript编程。以下是简要步骤:
1. **HTML结构**:
- 创建一个包含四个文本域的容器,用于显示数组中的信息。
- 添加一个文本框显示总条数,并一个按钮用于点击显示下一条信息。
- 设置一个隐藏的元素(如span),用于保存当前显示的信息索引。
```html
<div id="info-container">
<input type="text" id="current-item" class="hidden" value="0">
<textarea id="message-box"></textarea>
<p id="total-count">共有几条</p>
<button id="read-btn">阅读</button>
</div>
```
2. **JavaScript处理**:
- 在`window.onload`事件中,获取数组并初始化文本框内容。
- 创建函数`showNextItem()`,根据当前索引从数组中获取信息,更新文本框和显示总数。
- 给`read-btn`绑定点击事件,每次点击递增索引并调用`showNextItem()`。
```javascript
let items = ['信息1', '信息2', '信息3', '信息4'];
let currentIndex = 0;
window.onload = function() {
showNextItem();
}
function showNextItem() {
let message = items[currentIndex];
document.getElementById('message-box').innerText = message;
document.getElementById('current-item').value = currentIndex + 1;
document.getElementById('total-count').innerText = `共有${items.length}条`;
if (currentIndex === items.length - 1) {
document.getElementById('read-btn').addEventListener('click', () => {
alert("已经是最后一条信息了!");
});
} else {
document.getElementById('read-btn').removeEventListener('click');
}
}
```
阅读全文