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

wallimn

浏览: 5160828 次
性别:
来自: 北京

最近访客更多访客>>

java-007

xckouy

lengyun3566

zxjun8771

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JAVA、WEB开发

vue.js 组件

    最近小孩的学校每天留20道竖式与拖式式，让家长自己出题，判对错，发微信，有点儿烦。
    使用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>&nbsp;&nbsp;=<br>&nbsp;&nbsp;=<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)
下载次数: 5

math代码及lib.rar (129.8 KB)
描述: 程序代码及库
下载次数: 4

竖式拖式100练.pdf (5.5 MB)
下载次数: 2

查看图片附件

0
顶

1
踩

分享到：

SpringBoot2.0开发WebSocket应用完整示例 | SpringBoot项目开发热部署设置（eclipse+gr ...

2018-06-10 01:54
浏览 2649
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

gradle编译错误：Could not find method compile() for arguments

netty心跳检查之UDP篇

解决tomcat部署两个SpringBoot应用提示InstanceAlreadyExistsException

Eclipse配置MyBatis代码自动化功能

vue.js中使用qrcode生成二维码

MySQL插入数据报错： Incorrect string value: '\xFD\xDE'

vue自定义组件并双向绑定属性

vue-router简单示例

“联通充值系统繁忙”轻松应对

electron.js数据库应用---导航菜单(element-ui+mysql)

electron.js数据库应用---入门(mysql+element-ui)

SpringMVC 在controller层中注入成员变量request，是否线程安全

VueJS 组件参数名命名与组件属性转化

vue-resource拦截器实现token发送及检验自动化

element-ui试用手记

iviewui中表格控件中render的使用示例

Tomcat错误“Alias name tomcat does not identify a key entry”解决

阿里云免费证书“fileauth.txt内容配置错误”解决

springboot2.0跨域配置

微信小程序使用code换openid的方法（JAVA、SpringBoot）

最近访客更多访客>>