小学生数学测试系统(js实现)

最新推荐文章于 2023-05-22 15:26:42 发布

weixin_45055194

最新推荐文章于 2023-05-22 15:26:42 发布

阅读量2.2k

点赞数 1

分类专栏：学习园地文章标签： html javascript

本文链接：https://blog.csdn.net/weixin_45055194/article/details/104531914

版权

学习园地专栏收录该内容

1 篇文章 0 订阅

订阅专栏

   闲余时间,使用js做了一个套小学数学测试系统;比较适合刚入门的新手,加深对各个方法的使用,以及对数据类型、做数据比较时数据类型的理解。
   **基本功能：**
   1. 每次点击开始，刷新测试题目；
   2. 对所有测试题计算出答案，和用户输入的答案做对比；这是整个系统的核心，需要对数据类型，数据运算，字符串操作，元素操作有比较熟悉的运用！
   3. 用户提交以后，给出测试结果！

以下时代码，样式部分自己调整下；

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>小学数学测试</title>
  <style>

  @font-face
{
    font-family: simple;
    src: url('./font/simple.ttf')
         
}

body {
	font-family: simple
}
  .header {
  	width: 100%;
  	height: 100px;
  	background-color: AliceBlue;
  	padding: 5px;
  	background-repeat: no-repeat;
  	background-size: 100%;
  	background-image: url('./img/sea.jpg');
  }
  .header h1 {
  	color: #FF00FF;
  	font-size: 40px;
  	text-align: center;
  	letter-spacing: 8px;
  	font-family: simple
  }
   input[type='button'] {
  	color: blue;
  	background-image: url('./img/button.png');
  	background-size: 100%;
  }
  .test {
  	width: 100%;
  	min-height: 500px;
  	background-color: Beige;
  	padding: 10px;
  }

  #content {
  	width: 120px;
  	
  	
  }

  .test ul li input {
  	width: 30px;
  	position: relative;
  	float: right;

  }

  .test ul li{
  	margin: 5px;
  	
  }
  .footer {
  	background-color: AliceBlue;
  	width: 100%;
  }

  </style>
  </head>
<body>
	<div class="header">
		<h1>考考你 <sub style="color:#0000FF;font-size: 24px">更快,更准!</sub></h1>
		<input type="button" name="beiginTest" style="position:relative;top: -30px" id="beiginTest" value="开始测试">
		
	</div>

	<div class="test">
		<ul id="content">
			
		</ul>

		<div id="superMan">
			
		</div>
		
	</div>
	<div class="footer">
		<input type="button" name="" id="subRes" value="提交答案" style="display:block;margin: 0 auto;">
	</div>
	<div class="showRes" style="background-color: Beige;width: 100%;min-height: 100%">
		<div class="res" style="padding: 5px">
			<p id="score" style="font-size: 24px;color: red; margin-left: 34px"></p>
			<p id="errNum" style="margin-left: 34px"></p>
		</div>
	</div>
		
	
		



</body>
<script type="text/javascript">

	var config={
		"asign":['+','-','/','*'],
		"minNum":0,
		"maxNum":100,
		"testNum":20,
	}


		var list= window.localStorage.getItem('superMan');
		
		if (!list) {
			var arr=[];
		}else{
			var arr=JSON.parse(list);
		}



	console.log(arr)
	var ranking=[];
	for(let i=0;i<arr.length;i++){
		

	}
		

		
	

	//开始测试
	document.getElementById('beiginTest').addEventListener('click',function(){
		beginTime= (new Date()).getTime();
		var elem=document.getElementById('content').getElementsByTagName('li');
		if (elem.length>0) {
			document.getElementById('content').innerHTML='';
			document.getElementById('score').innerHTML='';
			document.getElementById('errNum').innerHTML='';
		}
		makeData();
	});
	//提交答案
	document.getElementById('subRes').addEventListener('click',function(){
		var errNum=0;
		var scorePer=parseInt(100/config.testNum);
		var collection=document.getElementById('content').getElementsByTagName('li');
		for(let i=0;i<collection.length;i++){
		var	elem=document.getElementById('content').getElementsByTagName('li')[i];
			var param=getParam(elem.innerText);
		var firstParam=parseInt(param.firstParam);
		var secondParam=parseInt(param.secondParam);
		var sign=param.sign;
		var res=getRes(firstParam,secondParam,sign);
		
		var	myRes=elem.lastChild.value;
		
		if (myRes.indexOf('...')==-1){
			
			myRes=parseInt(elem.lastChild.value)
		}
			
		
			
		if (res!==myRes) {
			errNum+=1
			console.log(elem);
			console.log(firstParam,secondParam,sign);
			console.log(res,myRes,typeof(res),typeof(myRes))
		 }
		}
	 endTime=(new Date()).getTime();	
     useTime=endTime-beginTime;
     var score=(20-errNum)*scorePer;
     console.log(errNum,score,useTime);
     var scoreElem=document.getElementById('score');
     var errNumElem=document.getElementById('errNum');
     	 scoreElem.innerText='您的分数:'+score+','+getTip(score);
     	 errNumElem.innerText="错误数目:"+errNum;
     	 console.log(arr);

     	 arr.push(JSON.stringify({"score":score,"useTime":useTime/1000}));
     	 window.localStorage.setItem('superMan',JSON.stringify(arr));

	})


	function getTip(score){
		var str='';
		switch(true){
			case (score<=60):
			str='需要加油哦!';
			break;
			case (score>60&&score<=80):
			str='要细心哦!';
			break;
			case (score>80&&score<=95):
			str='您还可以更好!';
			break;
			case (score>95&&score<100):
			str='胜利触手可及!';
			break;
			case (score==100):
			str='perfect!!';
			break
		}

		return str;
	}
	function getParam(str){
		var res=str.replace('=','');
		var arr=res.match(/\d+/g);
		var sign=res.match(/\D/g);

		return {"firstParam":arr[0],"secondParam":arr[1],"sign":sign[0]};
	}

	function getRes(x,y,s){
		var res;
		switch(s){
			case ('+'):
			res=x+y;
			break;
			case ('-'):
			res=x-y;
			break;
			case ('÷'):
			if (x%y===0) {
				res=x/y;
			}else{
				res=parseInt(x/y)+'...'+x%y;
			}
			
			break;
			case ('×'):
			res=x*y;
			break;

		}

		return res;
	}


	function getResSign(sign){
		var str;
    	switch (sign){
    		case "+":
    		str="+";
    		break;
    		case "-":
    		str="-";
    		break;
    		case "":
    		str="&times";
    		break;
    		case "/":
    		str="&divide";
    	}

    	return str;
	}
	 function getSign(sign){
    	var str;
    	switch (sign){
    		case "+":
    		str="+";
    		break;
    		case "-":
    		str="-";
    		break;
    		case "*":
    		str="&times";
    		break;
    		case "/":
    		str="&divide";
    	}

    	return str;


    }
	//获取参数
	function makeTest(){
		var asign=config.asign[randomNum(0,3)];
		var entiSign=getSign(asign);
		// console.log(entiSign);

		console.log(asign);
		var firstParam=randomNum(1,10);
		
		if (asign=="/"||asign=="-") {
			var secondParam=randomNum(1,firstParam);
		}else{
			var secondParam=randomNum(1,10);
		}
		
		console.log(firstParam,secondParam);

		return {"firstParam":firstParam,"secondParam":secondParam,"sign":entiSign};


		
	}

	//获取数据
	function makeData(){
		var data=[];
		for (var i = 1; i <= config.testNum; i++) {
			data.push(makeTest());
		}



		console.log(data);
		var x,y,z;
		x=0;
		y='+';
		z=0;

		

		var elem=document.getElementById('content');
		console.log(elem);
		
		
	
		
		

		for(let obj in data){
			console.log(data[obj].sign);
			var li=document.createElement('li');
			x=data[obj].firstParam;
			y=data[obj].sign;
			z=data[obj].secondParam;
			li.innerHTML=x+y+z+"="+'<input type="text">';
			elem.appendChild(li);
		}


	}




	function randomNum(minNum,maxNum){ 
    switch(arguments.length){ 
        case 1: 
            return parseInt(Math.random()*minNum+1,10); 
        break; 
        case 2: 
            return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10); 
        break; 
            default: 
                return 0; 
            break; 
    } 

   
} 

	

	
	
	
	


</script>
</html>

新手一枚,大神勿喷;供大家一起学习,有什么问题,一起交流!

weixin_45055194

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
小学生数学测试系统(js实现)

闲余时间,使用js做了一个套小学数学测试系统;比较适合刚入门的新手,加深对各个方法的使用,以及对数据类型、做数据比较时数据类型的理解。 **基本功能：** 1. 每次点击开始，刷新测试题目； 2. 对所有测试题计算出答案，和用户输入的答案做对比；这是整个系统的核心，需要对数据类型，数据运算，字符串操作，元素操作有比较熟悉的运用！ 3. 用户提交以后，给出测试结果！...
复制链接

扫一扫