vue.js组件示例：小学竖式与拖式20题练习

古城微笑少年丶 2022-04-06 13:12 224阅读 0赞

最近小孩的学校每天留20道竖式与拖式式，让家长自己出题，判对错，发微信，有点儿烦。  
使用vue.js写个了简单的出题页面，使用二维码记录答题，小孩答完了，扫一下二维码核对答案。如果您也有类似的需求，可以下载文章的附件，已调好排版，支持打印。运行只需将原代码放到Tomcat的webapps/ROOT中，访问：http://localhost:8080/math.html。  
小孩反映，使用程序出的题还有些难度，数字0会出现在一些意想不到的位置。欢迎试做。  
  
效果如下图所示：  
\[align=center\]  
\[img\]http://dl2.iteye.com/upload/attachment/0130/0449/88c8ed16-b495-3a62-adf5-294ae1fd5be5.png\[/img\]  
\[/align\]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>小学竖式与拖式20题</title>
    <style type="text/css">
    	body,html{
       
    		font-size:15px;
    		width:100%;
    	}
    	h2{
       
    		text-align:center;
    	}
    	h3,h2{
       
    		margin:0.2em;
    		font-size:15px;
    	}
    	.question{
       
    		line-height:1.5em;
    		width:140px;
    		float:left;
    		margin-top:0.5em;
    		border:0px solid gray;
    	}
    	.t1{
       
    		height:12em;
    	}
    	.t2{
       
    		line-height:3em;
    	}
    	.qrcontainer{
       
    		clear:both;
    		page-break-after:always;
    	}
    </style>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/qrcode.js"></script>
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
    	Vue.component('test-paper', {
       
    		props:['page','total'],
    		data:function(){
       
    			return {t1:[],
    				t2:[],
    				a1:[],
    				a2:[],
    				pi:0
    			};
    		},
    		computed:{
       
    			answer1:function(){
       
    				return this.getAnswer(this.a1);
    			},
    			answer2:function(){
       
    				return this.getAnswer(this.a2);
    			}
    		},
    		created:function(){
       
    			this.t1=[];
    			this.t2=[];
    			this.a1=[];
    			this.a2=[];
    			for(var i=0; i <10; i++){
       
    				this.t1.push(this.getT1());
    				this.t2.push(this.getT2());
    				this.a1.push(this.calcT1(this.t1[i]));
    				this.a2.push(this.calcT2(this.t2[i]));
    			}
    		},
    		methods:{
       
    			getT1:function(){
       
    				var typeIndex=Math.random()>=0.5?0:1;
    				var typeName=["×","÷"];
    				var n1=Math.round((Math.random()+0.4)*100),
    					n2=Math.round((Math.random()+0.3)*100),
    					n3=Math.round((Math.random()+0.2)*50);
    				if(typeIndex==0){
       
    					return {
       
    						n1:n1,
    						n2:n2,
    						o:typeName[typeIndex]
    					};
    				}
    				else{
       
    					return {
       
    						n1:n2*n3,
    						n2:n3,
    						o:typeName[typeIndex]
    					};
    				}
    			},
    			getT2:function(){
       
    				var t1 = this.getT1();
    				var result = this.calcT1(t1);
    				var typeIndex=Math.random()>=0.5?0:1;
    				var typeName=["+","-"];
    				var n3=Math.round((Math.random()+0.3)*50);
    				if (typeIndex==0){
       
    					return {
       
    						n1:n3,
    						o1:typeName[typeIndex],
    						n2:t1.n1,
    						o2:t1.o,
    						n3:t1.n2
    					}
    				}
    				else{
       
    					return {
       
    						n1:n3+result,
    						o1:typeName[typeIndex],
    						n2:t1.n1,
    						o2:t1.o,
    						n3:t1.n2
    					}
    				}
    			},
    			calcT1:function(t){
       
    				return this.calc(""+t.n1+t.o+t.n2);
    			},
    			calcT2:function(t){
       
    				return this.calc(""+t.n1+t.o1+t.n2+t.o2+t.n3);
    			},
    			calc:function(str){
       
    				return eval("("+str.replace("×","*").replace("÷","/")+")")
    			},
    			getAnswer: function(answer){
       
    				var a="";
    				for(var i=0;i<answer.length;i++){
       
    					a+=(i+1)+"."+answer[i]+"; ";
    				}
    				return a;
    			}
    
    		},
    	  	template: '<div>'
    	  			+'<h2>竖式与拖式练习</h2>'
    				+'<h3 style="clear:both;">一、竖式练习：</h3>'
    				+'<div class="question t1" v-for="item,index in t1">{
       {index+1}}. {
       {item.n1}}{
       {item.o}}{
       {item.n2}}=</div>'
    				+'<h3 style="clear:both;">二、拖式练习：</h3>'
    				+'<div class="question t2" v-for="item,index in t2">{
       {index+1}}. {
       {item.n1}}{
       {item.o1}}{
       {item.n2}}{
       {item.o2}}{
       {item.n3}}<br>  =<br>  =<br></div>'
    	  			+'<center class="qrcontainer"><div class="qrcode" v-bind:data-answer="answer1+answer2"></div><div style="clear:both;">答案二维码，http://wallimn.iteye.com<br>-第{
       {page}}页　共{
       {total}}页-</div></center>'
    	  			+'</div>'
    	});
    </script>
    </head>
    <body>
    
    <div id="math">
    	<test-paper v-for="index in total" v-bind:key="index" v-bind:page="index" v-bind:total="total"></test-paper>
    </div>
    
    <script type="text/javascript">
    	var vuePaper = new Vue({
       
    		el:'#math',
    		data:function(){
       
    			return {total:100};
    		}
    	});
    
    	$(function(){
       
    		var qs = $(".qrcode");
    		for(var i=0; i<qs.length; i++){
       
    			new QRCode(qs[i], {text: qs[i].dataset.answer,correctLevel : QRCode.CorrectLevel.L});
    		}
    	});
    
    </script>
    </body>
    </html>