zoukankan      html  css  js  c++  java

  • PSP4则运算

    四则运算

    页面代码:

    采用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链接
  • 相关阅读:
    编码问题
    僵尸进程与孤儿进程
    进程理论 阻塞非阻塞 同步异步 I/O操作
    浏览器上网流程以及套接字介绍
    OSI七层模型
    JsonResponse返回中文乱码问题
    查看源码所在位置
    linux ssh登录的小知识
    centos7安装python3.6
    Jquery的使用
  • 原文地址：https://www.cnblogs.com/lalalala-fan/p/15316962.html
Copyright © 2011-2022 走看看