效果：
學習交流群：970353786非常勿擾
源碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#app{
width: 800px;
height: 600px;
border: 4px solid green;
margin: 0 auto;
}
#titleBox{
width: 100%;
height: 80px;
/* border: 4px solid green;
margin: -4px; */
border-bottom: 4px solid green;
}
#questionsBox{
width: 100%;
height: 440px;
border-bottom: 4px solid green;
}
#submitBox{
width: 100%;
height: 72px;
line-height: 72px;
text-align: center;
}
#titleBox div{
float: left;
}
#titleBox .div1,#titleBox .div3{
width: 150px;
height: 80px;
line-height: 80px;
/* background-color: aqua; */
text-align: center;
font-size: 30px;
}
#titleBox .div1{
color: green;
cursor: pointer;
}
#titleBox .div3{
color: red;
font-size:25px ;
display: none;
}
#titleBox .div2{
width: 500px;
height: 80px;
text-align: center;
}
#submitBox button{
width: 95%;
height: 40px;
background-color: #008000;
font-size: 28px;
border: none;
border-radius: 28px;
}
#questionsBox ul{
list-style: none;
}
#questionsBox ul li{
float: left;
width: 180px;
font-size: 25px;
text-align: right;
margin-top: 40px;
}
#questionsBox ul li input{
width: 60px;
font-size: 25px;
}
</style>
</head>
<body>
<div id="app">
<div id="titleBox">
<div class="div1">重新出題</div>
<div class="div2">
<h1>自動出題和評分系統</h1>
<h3>(國小生100以内加減法運算)</h3>
</div>
<div class="div3">得分：XXX分</div>
</div>
<div id="questionsBox">
<ul>
<!-- <li>99-77=<input type="text"></li>
<li>1-1=<input type="text"></li>
<li>99-77=<input type="text"></li>
<li>99-77=<input type="text"></li>
<li>2-1=<input type="text"></li>
<li>99-77=<input type="text"></li> -->
</ul>
</div>
<div id="submitBox">
<button>送出</button>
</div>
</div>
</body>
<script type="text/javascript">
getQuestions();
function getQuestions(){
var ul = document.querySelector("#questionsBox ul");
for (var i = 1; i <=20; i++) {
var op = parseInt(Math.random()*2)?"+":"-";
do{
var a = parseInt(Math.random()*100);
var b = parseInt(Math.random()*100);
if(op == "-"){
if (a >= b) {
break;
}
}
if(op == "+"){
if (a + b <= 100) {
break;
}
}
}while(1);
var li = '<li>' + a + op + b + '=<input type="text"></li>';
ul.innerHTML += li;
}
}
//重新出題
document.querySelector("#titleBox .div1").onclick = function(){
window.location.reload();//重新整理
}
//送出，判斷得分
document.querySelector("#submitBox button").onclick = function(){
document.querySelector("#titleBox .div3").style.display = "block"
var score = 0;
//..........計算得分，實作評分功能，補充代碼 score += 5
document.querySelector("#titleBox .div3").innerText = "得分："+ score +"分"
}
</script>
</html>
調了下，這個更全：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#app{
width: 800px;
height: 600px;
border: 4px solid green;
margin: 0 auto;
}
#titleBox{
width: 100%;
height: 80px;
/* border: 4px solid green;
margin: -4px; */
border-bottom: 4px solid green;
}
#questionsBox{
width: 100%;
height: 440px;
border-bottom: 4px solid green;
}
#submitBox{
width: 100%;
height: 72px;
line-height: 72px;
text-align: center;
}
#titleBox div{
float: left;
}
#titleBox .div1,#titleBox .div3{
width: 150px;
height: 80px;
line-height: 80px;
/* background-color: aqua; */
text-align: center;
font-size: 30px;
}
#titleBox .div1{
color: green;
cursor: pointer;
}
#titleBox .div3{
color: red;
font-size:25px ;
display: none;
}
#titleBox .div2{
width: 500px;
height: 80px;
text-align: center;
}
#submitBox button{
width: 95%;
height: 40px;
background-color: #008000;
font-size: 28px;
border: none;
border-radius: 28px;
}
#questionsBox ul{
list-style: none;
}
#questionsBox ul li{
float: left;
width: 180px;
font-size: 25px;
text-align: right;
margin-top: 40px;
}
#questionsBox ul li input{
width: 60px;
font-size: 25px;
}
</style>
</head>
<body>
<div id="app">
<div id="titleBox">
<div class="div1">重新出題</div>
<div class="div2">
<h1>自動出題和評分系統</h1>
<h3>(國小生100以内加減法運算)</h3>
</div>
<div class="div3">得分：XXX分</div>
</div>
<div id="questionsBox">
<ul>
<!-- <li>99-77=<input type="text"></li>
<li>1-1=<input type="text"></li>
<li>99-77=<input type="text"></li>
<li>99-77=<input type="text"></li>
<li>2-1=<input type="text"></li>
<li>99-77=<input type="text"></li> -->
</ul>
</div>
<div id="submitBox">
<button>送出</button>
</div>
</div>
</body>
<script type="text/javascript">
getQuestions();
function getQuestions(){
var ul = document.querySelector("#questionsBox ul");
for (var i = 1; i <=20; i++) {
var op = parseInt(Math.random()*2)?"+":"-";
do{
var a = parseInt(Math.random()*100);
var b = parseInt(Math.random()*100);
if(op == "-"){
if (a >= b) {
break;
}
}
if(op == "+"){
if (a + b <= 100) {
break;
}
}
}while(1);
var li = '<li>' + a + op + b + '=<input type="text"></li>';
ul.innerHTML += li;
}
}
//重新出題
document.querySelector("#titleBox .div1").onclick = function(){
window.location.reload();//重新整理
}
//送出，判斷得分
document.querySelector("#submitBox button").onclick = function(){
document.querySelector("#titleBox .div3").style.display = "block"
var score = 0;
//擷取所有li
var liArr = document.querySelectorAll("#questionsBox ul li");
console.log(liArr);
//周遊所有li
for (var i = 0; i < liArr.length; i++) {
var li = liArr[i];
//一、擷取标準答案
//擷取li的内容字元串
var str = li.innerText;
console.log(str);
//擷取算術式，截取等号左邊的式子
var mathStr = str.substring(0,str.length-1);
console.log(mathStr);
//計算标準答案
var answer = eval(mathStr);
console.log(answer);
// 二、擷取學生答案
//擷取input框
var input = li.getElementsByTagName("input")[0];
console.log(input);
//擷取input框中輸入的内容，得到學生答案
var studentAnswer = input.value;//""
console.log(studentAnswer);
//三、判斷對錯，計算得分
//先确定學生是否填了答案，如果填了答案
if (studentAnswer != "") {
//再判斷所填是否正确
if (answer == studentAnswer) {
score += 5;//答案正确，加分
}
}
}
document.querySelector("#titleBox .div3").innerText = "得分："+ score +"分"
}
</script>
</html>
![強大的HTML5幻燈片系統：H5Slides[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)