我刚刚在这里制作了一个简单的 Javascript 测验脚本:
/* Dade Lamkins. 2011. */
var Questions = [
{ Question: "What is 5+2?", Values: ["7", "9", "10", "6"], Answer: 1 },
{ Question: "What is the square root of 16?", Values: ["7", "5", "4", "1"], Answer: 3 },
{ Question: "What is the answer to life?", Values: ["7", "42", "4", "47"], Answer: 2 }
];
var currentSession={ Questions: [], TotalPoints: 0 }
var Letters = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
function createQuestions(id) {
var tReturn="<form style=\"text-align: left;width: 33.33333%;background-color: lightblue;border=1px solid #000000;padding: 10px\">";
tReturn=tReturn+"<b>Questions "+(id+1)+":</b><br /> <i>"+Questions[id].Question+"</i><br /><br />";
for (var i=0;i<(Questions[id].Values).length;i++) {
tReturn=tReturn+"<input onClick=\"checkAnswer("+id+","+i+",this)\" type=\"button\" value=\""+Letters[i]+"\" style=\"width:50px\" />. "+Questions[id].Values[i]+"<br />";
}
tReturn=tReturn+"</form>";
return tReturn;
}
function updateScore() {
var currentPoints=0;
for (var i=0;i<currentSession.Questions.length;i++) {
currentPoints+=currentSession.Questions[i].Score;
}
document.getElementById('quiz_score').innerHTML='%'+Math.round((currentPoints/currentSession.TotalPoints)*100);
}
function initializeQuiz() {
for (var i=0;i<Questions.length;i++) {
var elem=document.getElementById('quiz_section');
currentSession.TotalPoints+=parseInt(elem.getAttribute('chances'));
elem.innerHTML=elem.innerHTML+createQuestions(i)+"<br />";
currentSession.Questions[i]={ Chances: elem.getAttribute('chances'), Answered: false, Score: parseInt(elem.getAttribute('chances')) };
}
updateScore();
}
function finalizeAnswer(bttn,c,questionId) {
if (c) {
bttn.parentNode.style.backgroundColor="lightgreen";
bttn.parentNode.innerHTML="<b>QUESTION "+(questionId+1)+":</b> Correct!";
} else {
bttn.parentNode.style.backgroundColor="pink";
bttn.parentNode.innerHTML="<b>QUESTION "+(questionId+1)+":</b> Wrong!";
}
updateScore();
}
function checkAnswer(questionId,answerId,bttn) {
if (Questions[questionId].Answer==(answerId+1)) {
finalizeAnswer(bttn,true,questionId);
return 0;
} else {
bttn.setAttribute('value','x');
bttn.setAttribute('disabled','true');
}
currentSession.Questions[questionId].Chances--;
currentSession.Questions[questionId].Score--;
if (currentSession.Questions[questionId].Chances<=0) {
finalizeAnswer(bttn,false,questionId);
} else {
updateScore();
}
}
然后你把这是另一个 html 页面:
<html>
<head>
<title>HTML QUIZ</title>
<script language="javascript" src="Quiz.js"></script>
</head>
<body onload='javascript:initializeQuiz()' bgcolor="#CCFFFF">
<b>Your Score Is Currently: </b><span id="quiz_score"></span>
<br />
<br />
<center><span style="width:100%" id="quiz_section" chances="1" quizid="1"></span></center>
</body>
</html>
我的问题是，我在这里使用的所有方法都被普遍接受吗？
最佳答案
您对 innerHTML 的使用可能会让您受到 JavaScript 样式警察的访问，除此之外它看起来还不错。在客户端构建 HTML 的最安全可靠的方法是使用 document.createElement 制作 DOM 元素 https://developer.mozilla.org/en/DOM/document.createElement和 Node.appendChild https://developer.mozilla.org/En/DOM/Node.appendChild .
关于javascript - 这个脚本是否遵循通用标准？ (Javascript/HTML)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5639997/