📚✨ PHP小课堂:轻松搞定上一题 & 下一题!✨📚
在学习编程的路上,做题是必不可少的环节。今天用 JavaScript 来实现一个有趣的功能——点击“上一题”或“下一题”,就能自动切换题目内容!💡
假设你有一个题目列表,每个题目都有编号和对应的内容。通过简单的 HTML 和 JS,我们能轻松完成这个功能。首先创建一个按钮来触发事件,然后用 `document.getElementById()` 获取当前题目索引,再结合数组下标操作,轻松实现上下切换!
举个栗子:如果你有 5 道题目,点击“下一题”时,程序会从当前题目跳转到下一个;点击“上一题”则返回上一题。这样既方便又高效,适合用来制作在线测试系统!🎯
快来试试吧!👇👇
🌟 HTML 示例代码
```html
```
🌟 JavaScript 示例代码
```javascript
let questions = ["第一题内容", "第二题内容", "第三题内容"];
let currentIndex = 0;
function showQuestion(index) {
document.getElementById("question").innerText = questions[index];
}
function nextQuestion() {
currentIndex = (currentIndex + 1) % questions.length;
showQuestion(currentIndex);
}
function prevQuestion() {
currentIndex = (currentIndex - 1 + questions.length) % questions.length;
showQuestion(currentIndex);
}
```
🎉 点击几下,就能体验“上一题”&“下一题”的乐趣啦!快来试试吧!💪
免责声明:本答案或内容为用户上传,不代表本网观点。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。 如遇侵权请及时联系本站删除。