四则运算
页面代码:
采用HTML + CSS 进行操作
- 字体则是采用Noto Sans SC、 open Sans
- 样式则是采用Bootstrap
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>四则运算测试</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300&family=Open+Sans:wght@300&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="stylelalalalaqaq.css">
</style>
</head>
<body>
<!-- 头部信息 -->
<div class="header">
<span id="id_M">00</span>
<span id="id_S">00</span>
</div>
<section id="tip">
<div class="container">
<div class="col-md-12 text-center">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
这是一个四则运算小实验，祝你好运
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
只有10小题，点击下一页即为直接开始
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
重要提示1
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
速算要点：冷静专注高度集中
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
重要提示2
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
错了没关系，人之常情
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 出题内容 -->
<section id="mark">
<div class="container">
<div class="content">
<div class="col-md-12 text-center">
<ol class="list-group list-group-numbered">
<li class="list-group-item">
<span class="sp">3 + 3 = </span>
<input type="text" class="answer" value="" />
</li>
<li class="list-group-item">
<span class="sp">3 + 3 = </span>
<input type="text" class="answer" value="" />
</li>
<li class="list-group-item">
<span class="sp">3 + 3 = </span>
<input type="text" class="answer" value="" />
</li>
<li class="list-group-item">
<span class="sp">3 + 3 = </span>
<input type="text" class="answer" value="" />
</li>
<li class="list-group-item">
<span class="sp">3 + 3 = </span>
<input type="text" class="answer" value="" />
</li>
<li class="list-group-item">
<span class="sp">3 + 3 = </span>
<input type="text" class="answer" value="" />
</li>
<li class="list-group-item">
<span class="sp">3 + 3 = </span>
<input type="text" class="answer" value="" />
</li>
<li class="list-group-item">
<span class="sp">3 + 3 = </span>
<input type="text" class="answer" value="" />
</li>
<li class="list-group-item">
<span class="sp">3 + 3 = </span>
<input type="text" class="answer" value="" />
</li>
<li class="list-group-item">
<span class="sp">3 + 3 = </span>
<input type="text" class="answer" value="" />
</li>
</ol>
</div>
</div>
</div>
</section>
<!-- 底部标签 -->
<div class="col-md-12 text-center">
<form action="" method="">
<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
<button type="button" class="btn btn-outline-primary" id="bt1" >判断</button>
<button type="button" class="btn btn-outline-secondary" id="bt2" >下一页</button>
</div>
</form>
</div>
</body>
</html>
Css代码，对骨架进行调整
body{
margin: 0;
padding: 0;
}
.header{
margin-top: -30px;
height: 135px;
40%;
margin-left: auto;
margin-right: auto;
/* margin: 30px auto; */
background-position:-30px -42px;
/* border: red 1px solid; */
}
h1,h2,h3,h4,h5,h6,p{
font-family: 'Noto Sans SC', sans-serif;
}
a,li,ul{
font-family: 'Open Sans', sans-serif;
}
.content{
height: 510px;
40%;
margin-left: auto;
margin-right: auto;
/* border: red 1px solid; */
}
.content-1{
100%;
height: 50px;
/* border: red 1px solid; */
line-height: 50px;
margin-left: 250px;
}
.content-1 span{
font-size: 18px;
}
form{
25%;
height: 20px;
/* border: red 1px solid; */
margin-left: auto;
margin-right: auto;
margin-top: 10px;
position: relative;
}
#tip .container{
padding: 35px;
}
.container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{
max- 1060px;
}
input {
outline:none;
}
JS代码，出题逻辑脚本
- 题目逻辑
- 生成是产生随机数进行编写
- 通过空格连接形成字符串
- 用计时变量来计算做题时间
- 对题目计算
- 用“ ”（空格）切个字符串，逐个元素进行拆解
- 拆解后再进行逻辑判断
<!-- JS脚本 -->
<script type="text/javascript">
// 计时变量
var c = 0
var timer = null
var oBt1 = document.getElementById("bt1")
var oBt2 = document.getElementById("bt2")
var oContent = document.getElementsByClassName("sp")
var Answer = document.getElementsByClassName("answer")
var id_S = document.getElementById("id_S")
var id_M = document.getElementById("id_M")
// console.log(Answer)
// strs = str.split(",")
// console.log(oContent)
oBt1.onclick = function(){
var count = 0
for(var i = 0;i < oContent.length;i++){
strs = oContent[i].innerHTML.split(" ")
Ans = Answer[i].value
// console.log(Ans)
var add1 = strs[0]
var operator = strs[1]
var add2 = strs[2]
// console.log(strs)
// console.log(operator)
if(operator == "+"){
// alert(222)
if(Number(add1) + Number(add2) == Number(Ans)){
count++;
}else{
Answer[i].style.backgroundColor = "red";
}
}
if(operator == "-"){
if(Number(add1) - Number(add2) == Number(Ans)){
count++;
}else{
Answer[i].style.backgroundColor = "red";
}
}
}
// 新增计时功能，结束计时
c = 0
//数据清零
Min = id_M.innerText
S = id_S.innerText
id_S.innerHTML = "00"
id_M.innerHTML = "00"
alert("恭喜你答对了"+count+"题!"+"共用时"+Min+"分"+S+"秒！")
}
// 下一页 开始计时
oBt2.onclick = function(){
alert("success")
for(var i = 0;i < oContent.length;i++){
Answer[i].style.backgroundColor = "white";
Answer[i].value = " "
var add1 = parseInt(Math.random()*100)
var add2 = parseInt(Math.random()*100)
var ope = Math.round(Math.random())
strs = oContent[i].innerHTML.split(" ")
if(ope == 0){
strs[1] = "+"
}
if(ope == 1){
strs[1] = "-"
}
// console.log(oContent[i].innerText)
// console.log(strs)
strs[0] = add1
strs[2] = add2
// console.log(strs)
oContent[i].innerText = strs[0]+" "+strs[1]+" "+strs[2]+" "+strs[3]+" "+strs[4]+" "
}
// 新增计时功能，开始计时
timer = setInterval(function() {
c++;
// console.log(c)
// 需要改变页面上时分秒的值
// console.log($("id_S"))
id_S.innerHTML = showNum(c % 60)
id_M.innerHTML = showNum(parseInt(c / 60) % 60)
},1000)
}
//封装一个处理单位数字的函数
function showNum(num) {
if (num < 10) {
return '0' + num
}
return num
}
</script>
psp流程展示
| 预计耗时（分钟） | 实际耗时（分钟） | ||
|---|---|---|---|
| Planning | 计划 | 20 | 20 |
| Estimate | 估计这个任务需要多少时间 | 90 | 90 |
| Development | 开发 | 120 | 90 |
| Analysis | 需求分析 | 10 | 10 |
| Design Spec | 生成设计文档 | / | / |
| Design Review | 设计复审（和同事审核设计文档） | / | / |
| Coding Standerd | 代码规范（为目前的开发制定合适的规范） | / | / |
| Design | 具体设计 | 30 | 30 |
| Coding | 具体编码 | 100 | 100 |
| Code Review | 代码复审 | 10 | 15 |
| Text | 测试（自测，修改代码，提交修改） | 20 | 20 |
| Reporting | 报告 | 20 | 20 |
| Text Report | 测试报告 | 10 | 10 |
| Size Measurement | 计算工作量 | 5 | 5 |
| Postmortem & Process Improvement Plan | 事后总结，并提出过程改进计划 | 5 | 5 |
| Sum | 合计 | 440 | 415 |
总结
理论上来说，只是完成了一个试卷的编写以及判断对错，做起来并没有像什么试卷开发系统，更像一个小程序而已
本来想用gitee挂上gitee page服务的，但是我已经挂了博客网站，就不开放此服务了
阿里云的配置耗时耗力耗钱
Tomcat服务器又有点呆滞
暂时先这样吧
github链接