在HTML中实现随机出题的功能,我们可以结合JavaScript来实现,以下是详细的技术教学:
1、我们需要创建一个HTML文件,然后在文件中添加一个标题和一个用于显示题目的区域。
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF8"> <title>随机出题</title> </head> <body> <h1>随机出题</h1> <div id="question"></div> <button onclick="generateQuestion()">生成新题目</button> <script src="script.js"></script> </body> </html>
2、接下来,我们需要创建一个JavaScript文件(script.js),并在其中编写代码来实现随机出题的功能,我们需要定义一些题目和答案,然后将它们存储在一个数组中。
const questions = [ { question: "计算机的发明者是谁?", answer: "查尔斯·巴贝奇" }, { question: "HTML是什么的缩写?", answer: "超文本标记语言" }, { question: "JavaScript是一种什么类型的编程语言?", answer: "脚本语言" } ];
3、我们需要编写一个函数来随机选择一个题目,我们可以使用Math.random()
函数来生成一个随机数,然后根据这个随机数来从题目数组中选择一个题目。
function getRandomQuestion() { return questions[Math.floor(Math.random() * questions.length)]; }
4、接下来,我们需要编写一个函数来将选中的题目显示在HTML页面上,我们可以使用document.getElementById()
方法来获取题目显示区域的引用,然后修改其innerHTML
属性来显示选中的题目。
function displayQuestion(question) { document.getElementById("question").innerHTML = question.question; }
5、我们需要编写一个函数来处理用户点击“生成新题目”按钮的事件,在这个函数中,我们需要调用前面编写的getRandomQuestion()
和displayQuestion()
函数来实现随机出题的功能。
function generateQuestion() { const randomQuestion = getRandomQuestion(); displayQuestion(randomQuestion); }
6、将以上代码整合到HTML文件中,完整的HTML和JavaScript代码如下:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF8"> <title>随机出题</title> </head> <body> <h1>随机出题</h1> <div id="question"></div> <button onclick="generateQuestion()">生成新题目</button> <script> const questions = [ { question: "计算机的发明者是谁?", answer: "查尔斯·巴贝奇" }, { question: "HTML是什么的缩写?", answer: "超文本标记语言" }, { question: "JavaScript是一种什么类型的编程语言?", answer: "脚本语言" } ]; function getRandomQuestion() { return questions[Math.floor(Math.random() * questions.length)]; } function displayQuestion(question) { document.getElementById("question").innerHTML = question.question; } function generateQuestion() { const randomQuestion = getRandomQuestion(); displayQuestion(randomQuestion); } </script> </body> </html>
现在,当你在浏览器中打开这个HTML文件并点击“生成新题目”按钮时,页面上会随机显示一个题目,你可以根据需要修改题目数组来增加或减少题目数量。
原创文章,作者:酷盾叔,如若转载,请注明出处:https://www.kdun.com/ask/365608.html
本网站发布或转载的文章及图片均来自网络,其原创性以及文中表达的观点和判断不代表本网站。如有问题,请联系客服处理。
发表回复