- 浏览: 5100385 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
silence19841230:
先拿走看看
SpringBoot2.0开发WebSocket应用完整示例 -
wallimn:
masuweng 写道发下源码下载地址吧!三个相关文件打了个包 ...
SpringBoot2.0开发WebSocket应用完整示例 -
masuweng:
发下源码下载地址吧!
SpringBoot2.0开发WebSocket应用完整示例 -
masuweng:
SpringBoot2.0开发WebSocket应用完整示例 -
wallimn:
<div class="quote_title ...
前端框架iviewui使用示例之菜单+多Tab页布局
最近小孩的学校每天留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)
- 下载次数: 5
- math代码及lib.rar (129.8 KB)
- 描述: 程序代码及库
- 下载次数: 4
- 竖式拖式100练.pdf (5.5 MB)
- 下载次数: 2
发表评论
-
gradle编译错误:Could not find method compile() for arguments
2020-09-19 10:50 18184编译(IDEA+Gradle)一个别人的工程,出现一个 ... -
netty心跳检查之UDP篇
2019-09-15 08:50 2120部分UDP通信场景中,需要客户端定期发送心跳信息,以获取终 ... -
解决tomcat部署两个SpringBoot应用提示InstanceAlreadyExistsException
2019-06-30 11:49 3167两个SpringBoot应用部署在一个Tomcat中,单独 ... -
Eclipse配置MyBatis代码自动化功能
2019-06-29 10:16 16401.安装插件 Eclipse中,Help->Ecli ... -
vue.js中使用qrcode生成二维码
2019-05-20 00:00 7559一、安装包 npm install qrcodejs2 --s ... -
MySQL插入数据报错: Incorrect string value: '\xFD\xDE'
2019-03-31 23:19 1171我MySQL数据库用的uft-8字符集,插入数据一直很正常 ... -
vue自定义组件并双向绑定属性
2019-03-08 22:46 3208做了两个子组件,原理基本一样,一个是使用原生的select ... -
vue-router简单示例
2019-03-05 00:32 1086写个基本完整、稍有借鉴意义的示例,防止自己忘记。 &l ... -
“联通充值系统繁忙”轻松应对
2019-02-06 11:03 3904大过年的,联通充个值一直报“充值系统繁忙”。昨天晚上试了几 ... -
electron.js数据库应用---导航菜单(element-ui+mysql)
2019-02-05 21:33 2296一、环境搭建 略, ... -
electron.js数据库应用---入门(mysql+element-ui)
2019-01-27 23:19 7304我的机器:Windows10,64 ... -
SpringMVC 在controller层中注入成员变量request,是否线程安全
2018-12-17 21:17 2690@RestController public class ... -
VueJS 组件参数名命名与组件属性转化
2018-12-03 00:00 2003转自:https://www.cnblogs.com/meiy ... -
vue-resource拦截器实现token发送及检验自动化
2018-11-16 22:38 3040用了很长时间vue-resource,最近思考$http发 ... -
element-ui试用手记
2018-10-29 20:25 1684element-ui、iviewui都以vue.js为基础 ... -
iviewui中表格控件中render的使用示例
2018-07-07 16:46 9711示例了如何在表格中显示按钮,如何将代码转化为文字。 i ... -
Tomcat错误“Alias name tomcat does not identify a key entry”解决
2018-07-05 21:39 6174申请到了阿里云的证书后,下载、按照说明生成jks格式证书、 ... -
阿里云免费证书“fileauth.txt内容配置错误”解决
2018-07-05 20:43 5194最近研究微信小程序开发,上阿里云申请了个证书,使用文件验证 ... -
springboot2.0跨域配置
2018-07-04 22:11 5234springboot2.0跨域配置: 一、代码 ... -
微信小程序使用code换openid的方法(JAVA、SpringBoot)
2018-07-01 21:52 10293微信小程序序的代码中提示,使用code换取openid,但 ...
相关推荐
`vue.global.js` 文件是 Vue.js 框架的核心文件之一。它包含了 Vue.js 全局对象的定义和一些全局方法和属性的实现。 该文件对整个 Vue.js 应用的运行起着重要的作用,它提供了全局范围的 Vue 构造函数和一些全局...
当准备Vue.js的面试时,以下是一些资源描述,可以帮助您深入学习和准备相关的面试题: 1. Vue.js官方文档:Vue.js官方文档是学习和了解Vue.js的最佳资源之一。它提供了全面而详细的指南、教程和API文档,涵盖了Vue....
Vue.js 是用于构建交互式的 Web 界面的库。 Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API。 Vue.js 特点 简洁: HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单。 数据驱动...
Vue.js 是用于构建交互式的 Web 界面的库。 Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API。 Vue.js 特点 简洁: HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单。 数据...
目前社区有很多 Vue.js 的源码解析文章,但是质量层次不齐,不够系统和全面,这本电子书的目标 是全方位细致深度解析 Vue.js 的实现原理,让同学们可以彻底掌握 Vue.js。 为了把 Vue.js 的源码讲明白,课程设计成...
<script src="./js/vue%20(1).js" type="text/javascript" charset="UTF-8"> src里面的内容根据自己的下载的Vue.js的文件位置决定的,我这里只是拿我自己做的举个例子。这个地方的vue.js是因为我下载了两次这个版本...
2. 经验丰富的开发者:Vue.js提供了强大的组件化开发能力,适合构建企业级应用。它还支持与其他前端框架和库的集成,如React、Angular、Webpack等,使得经验丰富的开发者可以轻松地构建复杂的前端应用。 3. 企业级...
VUE组件练习:VUE.rar
vue.js 官方示例
Vue.js前端开发实战-自测卷和课后习题答案.rar
vue-tippy 封装Tippy.js Tooltip库的一个Vue.js组件
如果你对Vue.js 基础知识感兴趣,如果你对源码解析感兴趣,如果你对Vue.js 2.0感兴趣,如果你对主流打包工具感兴趣,如果你对如何实践感兴趣,《Vue.js权威指南》都是一本不容错过的以示例代码为引导、知识涵盖全面...
第1章 初识Vue.js 第2章 数据绑定和第一个Vue应用 第3章 计算属性 第4章 v-bind及class与style绑定 第5章 内置指令 第6章 表单与v-model 第7章 组件详解 第8章 自定义指令 第9章 Render函数 第10章 使用webpack 第...
如果你对Vue.js 基础知识感兴趣,如果你对源码解析感兴趣,如果你对Vue.js 2.0感兴趣,如果你对主流打包工具感兴趣,如果你对如何实践感兴趣,《Vue.js权威指南》都是一本不容错过的以示例代码为引导、知识涵盖全面...
如果你对Vue.js 基础知识感兴趣,如果你对源码解析感兴趣,如果你对Vue.js 2.0感兴趣,如果你对主流打包工具感兴趣,如果你对如何实践感兴趣,《Vue.js权威指南》都是一本不容错过的以示例代码为引导、知识涵盖全面...
Vue.js 是一款流行的前端 JavaScript 框架,它是一款轻量级、高性能的框架,用于构建交互式的用户界面和单页应用程序。Vue.js 的特点包括: 响应式数据绑定:Vue.js 实现了数据的双向绑定,当数据发生变化时,视图...
目录 1.Vue.js功能:2.Observer.js功能(数据劫持):3.Compiler.js功能:4.Dep.js功能:5.Watcher.js功能: 1.Vue.js功能: 2.Observer.js功能(数据劫持): 3.Compiler.js功能: 4.Dep.js功能: 5....