一、需求分析
1.点击出题按钮开始倒计时60秒，同时随机生成题目
2.每次出题20道，且题目中的数据和运算符皆是随机生成的
3.倒计时60秒结后，弹出提示框，提示答题已结束，并在显示答题情况
4.每道提供一个用于输入答案的文本框，用于输入答案，输入答案后，点击提交按钮，显示对，错以及未填，但不显示正确答案
二、项目搭建
创建项目，并在项目根目录文件下创建存放资源的对应文件夹以及HTML文件index.html
CSS：用于存放项目的CSS文件
img：用于存放项目的图片
JS：用于存放项目的JS文件
如图所示：
由于项目使用到了JQuery框架，所以需要在项目的JS文件夹中引入JQuery的JS文件
同时创建用于存放页面JS代码的index.js
如图所示：
官网下载地址：jQuery
进入首页，点击Download
选择下载：Download the uncompressed, development jQuery 3.7.0
在新打开的页面，同时按住Ctrl和 S，或者在空白处右击，选择另存为，在弹出的弹窗内，选择保存路径，将JS文件保存到本地
三、构建页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
//引入JQuery框架的JS文件
<script type="text/javascript" charset="UTF-8" src="./JS/jquery-3.7.0.js"></script>
//引入页面的JS文件
<script type="text/javascript" charset="UTF-8" src="js/index.js"></script>
//编写样式，美化页面
<style>
#content {
width: 800px;
margin: 0 auto;
text-align: center;
}
#tbl_count {
margin: 20px 0px;
}
.div_result {
margin: 10px 0px;
}
</style>
</head>
<body>
<div id="content">
//标题
<h1>20以内加减运算辅助工具</h1>
//倒计时
<h3 id="txt_time">60秒倒计时：60</h3>
//出题按钮
<button type="button" id="btnStart">出题</button>
//表格，由于题目是由JS代码控制，随机出题，所以页面中只需要编写表头部分的代码
<table id="tbl_count" width="800px" border="1px" cellpadding="5px" cellspacing="0px">
<tr>
<th>编号</th>
<th>计算题</th>
<th>你的答案</th>
<th>提交答案</th>
<th>结果</th>
</tr>
</table>
//显示答题情况
<div class="div_result" id="div_correct">答对：</div>
<div class="div_result" id="div_error">答错：</div>
<div class="div_result" id="div_empty">未答：</div>
</div>
</body>
</html>
页面效果如图所示：
