vue.js组件示例：小学竖式与拖式20题练习
程序员文章站
2022-05-15 17:42:46
...
最近小孩的学校每天留20道竖式与拖式式，让家长自己出题，判对错，发微信，有点儿烦。
使用vue.js写个了简单的出题页面，使用二维码记录答题，小孩答完了，扫一下二维码核对答案。如果您也有类似的需求，可以下载文章的附件，已调好排版，支持打印。运行只需将原代码放到Tomcat的webapps/ROOT中，访问：http://localhost:8080/math.html。
小孩反映，使用程序出的题还有些难度，数字0会出现在一些意想不到的位置。欢迎试做。
效果如下图所示：
使用vue.js写个了简单的出题页面，使用二维码记录答题，小孩答完了，扫一下二维码核对答案。如果您也有类似的需求，可以下载文章的附件，已调好排版，支持打印。运行只需将原代码放到Tomcat的webapps/ROOT中，访问：http://localhost:8080/math.html。
小孩反映，使用程序出的题还有些难度，数字0会出现在一些意想不到的位置。欢迎试做。
效果如下图所示：
<!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>
- 竖式与拖式20题.pdf (2.7 MB)
- 下载次数: 4
- math代码及lib.rar (129.8 KB)
- 描述: 程序代码及库
- 下载次数: 3
- 竖式拖式100练.pdf (5.5 MB)
- 下载次数: 2
上一篇： lucene-索引锁机制
下一篇： 【Vue】自定义防止重复提交指令