加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
index.html 40.15 KB
一键复制 编辑 原始数据 按行查看 历史
iven 提交于 2018-09-23 11:24 . 修正了几个BUG
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>口算题生成程序</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="index.css">
<script src="vue.min.js"></script>
<script src="bmob-min.js"></script>
</head>
<body>
<!--[if IE]>
<OBJECT id="WebBrowser" height="0" width="0" classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" VIEWASTEXT style="display:none"></OBJECT>
<![endif]-->
<!--
<input onclick="document.all.WebBrowser.ExecWB(6,1)" type="button" value="打印">
<input onclick="document.all.WebBrowser.ExecWB(6,6)" type="button" value="直接打印">
<input onclick="document.all.WebBrowser.ExecWB(8,1)" type="button" value="页面设置">
<input onclick="document.all.WebBrowser.ExecWB(7,1)" type="button" value="打印预览">
-->
<div id="app" class="container" v-cloak>
<div class="cmdbar noprint">
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">详细题型设置</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">快速设置:</label>
<div class="input-group col-sm-8">
<select name="level" class="form-control" disabled>
<option value="">【快捷选题型择(暂未开放)】</option>
<option value="20">20 以内整数加减法</option>
<option value="100n">100 以内加减法不进/借位</option>
<option value="100+1">100 以内进位加法(1 位数)</option>
<option value="100+2">100 以内进位加法(2 位数)</option>
<option value="100-1">100 以内借位减法(1 位数)</option>
<option value="100-2">100 以内借位减法(2 位数)</option>
<option value="100+-">100 以内连加连减</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">包含题型:</label>
<div class="input-group col-sm-8">
<div class="btn-group" data-toggle="buttons">
<label v-bind:class="{ active: isadd, 'btn-danger': isadd, 'btn-default': !isadd}"
class="btn" v-on:click="isadd=!isadd">
<span v-bind:class="{ 'glyphicon-ok': isadd, 'glyphicon-unchecked': ! isadd }"
class="glyphicon" aria-hidden="true"></span>
<input type="checkbox" autocomplete="off" v-model="isadd"> +加法
</label>
<label v-bind:class="{ active: issub, 'btn-warning': issub, 'btn-default': !issub }"
class="btn" v-on:click="issub=!issub">
<span v-bind:class="{ 'glyphicon-ok': issub, 'glyphicon-unchecked': ! issub }"
class="glyphicon" aria-hidden="true"></span>
<input type="checkbox" autocomplete="off" v-model="issub"> -减法
</label>
<label v-bind:class="{ active: ismul, 'btn-primary': ismul, 'btn-default': !ismul }"
class="btn" v-on:click="ismul=!ismul">
<span v-bind:class="{ 'glyphicon-ok': ismul, 'glyphicon-unchecked': ! ismul }"
class="glyphicon" aria-hidden="true"></span>
<input type="checkbox" autocomplete="off" v-model="ismul"> &times;乘法
</label>
<label v-bind:class="{ active: isdiv, 'btn-success': isdiv, 'btn-default': !isdiv }"
class="btn" v-on:click="isdiv=!isdiv">
<span v-bind:class="{ 'glyphicon-ok': isdiv, 'glyphicon-unchecked': ! isdiv }"
class="glyphicon" aria-hidden="true"></span>
<input type="checkbox" autocomplete="off" v-model="isdiv"> &div;除法
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">运算项个数:</label>
<div class="input-group col-sm-8 ">
<input type="number" class="form-control" v-model="itemcount" />
<div class="input-group-addon">求算目标:</div>
<select name="rule" class="form-control col-sm-2 " v-model="rule">
<option value="1">求得数</option>
<option value="2">求运算项</option>
</select>
<div class="input-group-addon"><span class="glyphicon glyphicon-arrow-right"
aria-hidden="true"></span></div>
<select :disabled="'2'!=rule" class="form-control" v-model="whichcond">
<option value="">随机</option>
<template v-for="(rg, i) in Array(itemcount)">
<option :value="i">运算项#{{i+1}}</option>
</template>
</select>
</div>
</div>
<hr style="margin:8px" />
<!--标签-->
<ul class="nav nav-tabs" role="tablist">
<li class="active">
<a href="#tab-op" role="tab" data-toggle="tab">
<span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span>
符号设置</a>
</li>
<li v-if="isadd">
<a href="#tab-add" role="tab" data-toggle="tab">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
加法设置</a>
</li>
<li v-if="issub">
<a href="#tab-sub" role="tab" data-toggle="tab">
<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
减法设置</a>
</li>
<li v-if="ismul">
<a href="#tab-mul" role="tab" data-toggle="tab">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
乘法设置</a>
</li>
<li v-if="isdiv">
<a href="#tab-div" role="tab" data-toggle="tab">
<span class="glyphicon " aria-hidden="true" style="font-size: 25px;font-weight: bold;line-height: 0px;">&div;</span>
除法设置</a>
</li>
</ul>
<!--标签的内容-->
<div class="tab-content" style="padding:10px;">
<div class="tab-pane active" id="tab-op">
<div class="row">
<div class="col-md-12">
<div v-if="isadd||issub||ismul||isdiv" class="form-group" v-for="(rg, i) in range_op">
<label class="col-sm-3 control-label">运算符#{{i+1}}精确设置:</label>
<div class="input-group col-sm-7">
<div class="btn-group" data-toggle="buttons">
<label v-if="isadd" class="btn " :class="{'btn-default':!rg.add, 'btn-info':rg.add, active: rg.add}" v-on:click="rg.add=!rg.add">
<span class="glyphicon" :class="{'glyphicon-unchecked':!rg.add, 'glyphicon-check': rg.add}" aria-hidden="true"></span>
<input type="checkbox" v-mode="rg.add" autocomplete="off">
</label>
<label v-if="issub" class="btn " :class="{'btn-default':!rg.sub, 'btn-info':rg.sub, active: rg.sub}" v-on:click="rg.sub=!rg.sub">
<span class="glyphicon" :class="{'glyphicon-unchecked':!rg.sub, 'glyphicon-check': rg.sub}" aria-hidden="true"></span>
<input type="checkbox" v-model="rg.sub" autocomplete="off">
</label>
<label v-if="ismul" class="btn " :class="{'btn-default':!rg.mul, 'btn-info':rg.mul, active: rg.mul}" v-on:click="rg.mul=!rg.mul">
<span class="glyphicon" :class="{'glyphicon-unchecked':!rg.mul, 'glyphicon-check': rg.mul}" aria-hidden="true"></span>
<input type="checkbox" autocomplete="off"> &times;
</label>
<label v-if="isdiv" class="btn " :class="{'btn-default':!rg.div, 'btn-info':rg.div, active: rg.div}" v-on:click="rg.div=!rg.div">
<span class="glyphicon" :class="{'glyphicon-unchecked':!rg.div, 'glyphicon-check': rg.div}" aria-hidden="true"></span>
<input type="checkbox" autocomplete="off"> &div;
</label>
<label class="btn btn-default" :class="{active: rg.all}" v-on:click="rg.add=rg.sub=rg.mul=rg.div=rg.all=!rg.all">
<span class="glyphicon glyphicon-check" aria-hidden="true"></span>
<input type="checkbox" autocomplete="off"> 全选
</label>
<label v-if="itemcount>2 && exact_parentheses" class="btn " :class="{'btn-default':!rg.parentheses, 'btn-info':rg.parentheses, active: rg.parentheses}" v-on:click="rg.parentheses=!rg.parentheses">
<span class="glyphicon" :class="{'glyphicon-unchecked':!rg.parentheses, 'glyphicon-check': rg.parentheses}" aria-hidden="true"></span>
<input type="checkbox" autocomplete="off"> (括号)
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label"></label>
<div class="input-group col-sm-4">
<div class="checkbox form-control" >
<label>
<input type="checkbox" v-model="diff_operator_adjacent"/> 相邻运算符不相同
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label"></label>
<div class="input-group col-sm-4">
<div class="checkbox form-control">
<label>
<input type="checkbox" v-model="dissimilarity_operator_adjacent" /> 加减不相邻,乘除不相邻
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">生成策略设置:</label>
<div class="input-group col-sm-4">
<select class="form-control" v-model="strategy">
<option value="random" selected>随机决定</option>
<option value="lft">先左后右</option>
<option value="rgt">先右后左</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label"></label>
<div class="input-group col-sm-4">
<div class="checkbox form-control">
<label>
<input type="checkbox" v-model="parentheses.autofix" /> 尽量保证括号括得有意义
</label>
</div>
</div>
</div>
<!--
<div class="form-group">
<label class="col-sm-3 control-label">生成的括号对数:</label>
<div class="input-group col-sm-5">
<div class="input-group-addon ">至少</div>
<input :disabled="!parentheses.enabled" type="number" class="form-control" v-model="parentheses.min" title="最小值" />
<div class="input-group-addon">对</div>
<div class="input-group-addon">最多</div>
<input :disabled="!parentheses.enabled" type="number" class="form-control" v-model="parentheses.max" title="最大值" />
<div class="input-group-addon">对</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label"></label>
<div class="input-group col-sm-4">
<div class="checkbox form-control">
<label>
<input type="checkbox" v-model="exact_parentheses"/> 精确指定括号生成位置
</label>
</div>
</div>
</div>
-->
</div>
</div>
</div>
<div class="tab-pane" id="tab-add" v-if="isadd">
<div class="form-group" v-for="(rg, i) in range_add">
<label class="col-sm-3 control-label">运算项#{{i+1}}范围:</label>
<div class="input-group col-sm-4">
<input type="number" class="form-control" v-model="rg.min" title="最小值" />
<div class="input-group-addon">-</div>
<input type="number" class="form-control" v-model="rg.max" title="最大值" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">得数范围:</label>
<div class="input-group col-sm-4">
<input type="number" class="form-control" v-model="result_add.min"
title="最小值" />
<div class="input-group-addon">-</div>
<input type="number" class="form-control" v-model="result_add.max"
title="最大值" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">加法进位设置:</label>
<div class="input-group col-sm-4">
<select name="carry" class="form-control" v-model="carry">
<option value="random" selected>随机决定是否生成带进位的加法题</option>
<option value="no">不要生成有进位的加法题</option>
<option value="all">总是生成带进位的加法题</option>
</select>
</div>
</div>
</div>
<div class="tab-pane" id="tab-sub" v-if="issub">
<div class="form-group" v-for="(rg, i) in range_sub">
<label class="col-sm-3 control-label">运算项#{{i+1}}范围:</label>
<div class="input-group col-sm-4">
<input type="number" class="form-control" v-model="rg.min" title="最小值" />
<div class="input-group-addon">-</div>
<input type="number" class="form-control" v-model="rg.max" title="最大值" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">得数范围:</label>
<div class="input-group col-sm-4">
<input type="number" class="form-control" v-model="result_sub.min"
title="最小值" />
<div class="input-group-addon">-</div>
<input type="number" class="form-control" v-model="result_sub.max"
title="最大值" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">减法借位设置:</label>
<div class="input-group col-sm-4">
<select name="borrow" class="form-control" v-model="borrow">
<option value="random" selected>随机决定是否生成带借位的减法题</option>
<option value="no">不要生成有借位的减法题</option>
<option value="all">总是生成带借位的减法题</option>
</select>
</div>
</div>
</div>
<div class="tab-pane" id="tab-mul" v-if="ismul">
<div class="form-group" v-for="(rg, i) in range_mul">
<label class="col-sm-3 control-label">运算项#{{i+1}}范围:</label>
<div class="input-group col-sm-4">
<input type="number" class="form-control" v-model="rg.min" title="最小值" />
<div class="input-group-addon">-</div>
<input type="number" class="form-control" v-model="rg.max" title="最大值" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">得数范围:</label>
<div class="input-group col-sm-4">
<input type="number" class="form-control" v-model="result_mul.min"
title="最小值" />
<div class="input-group-addon">-</div>
<input type="number" class="form-control" v-model="result_mul.max"
title="最大值" />
</div>
</div>
</div>
<div class="tab-pane" id="tab-div" v-if="isdiv">
<div class="form-group" v-for="(rg, i) in range_div">
<label class="col-sm-3 control-label">运算项#{{i+1}}范围:</label>
<div class="input-group col-sm-4">
<input type="number" class="form-control" v-model="rg.min" title="最小值" />
<div class="input-group-addon">-</div>
<input type="number" class="form-control" v-model="rg.max" title="最大值" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">得数范围:</label>
<div class="input-group col-sm-4">
<input type="number" class="form-control" v-model="result_div.min"
title="最小值" />
<div class="input-group-addon">-</div>
<input type="number" class="form-control" v-model="result_div.max"
title="最大值" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">整除余数设置:</label>
<div class="input-group col-sm-4">
<select name="nomod" class="form-control" v-model="nomod">
<option value="random" selected>随机决定是否生成带余数的除法题</option>
<option value="yes">不要生成有余数的除法题(确保能除尽)</option>
<option value="all">总是生成带余数的除法题</option>
</select>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading">
<span class="glyphicon glyphicon-th-large" aria-hidden="true"></span>
<b>小学生口算题自动生成程序 V1.1 by <a style="color:white;" href="https://www.imgxw.com">&copy;高大科技</a></b>
<span class="badge" style="float:right">访客数:{{mycounter}}</span>
</div>
<div class="panel-body">
<form class="form-inline">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label class="">生成数量:</label>
<div class="input-group">
<input type="number" class="form-control" name="count" v-model="count" />
<div class="input-group-addon"></div>
<button type="button" class="btn btn-danger" data-toggle="modal"
data-target="#myModal" style="float:right">
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
题型设置...
</button>
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="">试题列数:</label>
<div class="input-group">
<input type="number" class="form-control" name="cols" v-model="cols" />
<div class="input-group-addon"></div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="">每页行数:</label>
<div class="input-group">
<input type="number" class="form-control" name="count" v-model="pagerows" />
<span class="input-group-addon">(仅IE有效)
共 {{parseInt((res.length + (cols-0) - 1) / (cols-0))}} 行
{{parseInt(((parseInt(res.length + (cols-0) - 1) / (cols-0)) +
(pagerows -
1)) / (pagerows - 0))}} 页
</span>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class=""></label>
<div class="input-group">
<div class="checkbox">
<label>
<input type="checkbox" v-model="appendemptyrows" /> 尾部补空行
</label>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="height:16px"></div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="">间距控制:</label>
<div class="input-group">
<div class="input-group-addon">空白</div>
<input type="number" class="form-control" v-model="cellPadding" />
<div class="input-group-addon">间距</div>
<input type="number" class="form-control" v-model="cellSpacing" />
</div>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label class="">字体设置:</label>
<div class="input-group">
<select v-model="fontfamily" class="form-control">
<option value="Georgia">Georgia</option>
<option value="Helvetica">Helvetica</option>
<option value="Tahoma">Tahoma</option>
<option value="宋体">宋体</option>
<option value="楷体">楷体</option>
<option value="微软雅黑" selected>微软雅黑</option>
</select>
<div class="input-group-addon">大小:</div>
<input type="number" class="form-control" v-model="fontsize" />
<div class="input-group-addon">像素</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="panel-footer " role="alert">
<span style="display: none">
<input type="text" v-if="!is_login" placeholder="用户名" v-model="username" />
<input type="password" v-if="!is_login" placeholder="密码" v-model="password" />
<button @click="login" v-if="!is_login">登录</button>
<button @click="register" v-if="!is_login">注册</button>
</span>
<span v-if="is_login">您好,{{curr_user().get('username')}}</span>
<button @click="logout" v-if="is_login">注销</button>
<button @click="doGen" class="btn btn-danger" style="font-weight:bold;cursor:hand;">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
立即生成!
</button>
<!--[if IE]>
<input onclick="document.all.WebBrowser.ExecWB(7,1)" type="button" value="打印预览">
<![endif]-->
<button @click="doPrint" class="btn btn-success" style="font-weight:bold;cursor:pointer;">
<span class="glyphicon glyphicon-print" aria-hidden="true"></span>
打印试题
</button>
<span style="float:right">
<a target="_blank" href="https://github.com/hldgaofeng/oralcalc/issues">
<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
反馈问题</a>
<a href="mailto:hldgaofeng@qq.com">
<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
联系作者</a></span>
</div>
</div>
</div>
</div>
<div class="alert alert-success">
生成题数:{{res.length}},其中:加法:{{report.addcnt}},减法:{{report.subcnt}},乘法:{{report.mulcnt}},除法:{{report.divcnt}},借/进位:{{report.carrycnt
+ report.borrowcnt}},异常:{{report.exceptcnt}}
</div>
</div>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<!-- 页眉(每页都重复打印的部分)-->
<thead style="display:table-header-group;">
<tr>
<th :colspan="cols" style="text-align:center;">
<div class="print-repeat" contenteditable="true">
<h3>口算(100以内加减法混合运算)</h3>
姓名:__________ 日期:____月____日 时间:________ 对题:____道<br /><br />
</div>
</th>
</tr>
</thead>
<tbody>
<!-- 大表格一行就是一页 -->
<tr :class="{break_before:p>1}" v-for="p in parseInt(((parseInt(res.length + (cols-0) - 1) / (cols-0)) + (pagerows - 1)) / (pagerows - 0)) ">
<td style="border: 0px solid;">
<!-- 小表格是当前页的所有试题 -->
<table :style="{fontFamily:fontfamily, fontSize:fontsize+'px'}" width="100%" :cellPadding="cellPadding"
:cellSpacing="cellSpacing">
<tr v-for="r in (appendemptyrows ? (pagerows - 0) : Math.min(pagerows, parseInt((res.length - (p - 1) * (pagerows-0) * (cols-0) + (cols - 1)) / (cols-0))))"
:class="{printonly: r > parseInt((res.length - (p - 1) * (pagerows-0) * (cols-0) + (cols - 1)) / (cols-0))}">
<td v-for="c in (cols-0)">
<template v-if="r > parseInt((res.length - (p - 1) * (pagerows-0) * (cols-0) + (cols - 1)) / (cols-0))">&nbsp;</template>
<template v-if="(p-1) * (pagerows-0) * (cols-0) + (r-1) * (cols-0) + (c - 1) < res.length">
<span>{{formulaToString(res[ (p-1) * (pagerows-0) * (cols-0) + (r-1) * (cols-0) + (c - 1)].li) }}</span>
</template>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<tfoot style="display:none;">
<tr>
<th :colspan="cols">
<div class="print-repeat">
</div>
</th>
</tr>
</tfoot>
</table>
</div>
<script src="bootstrap/js/jquery-3.3.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="index.js"></script>
</body>
</html>
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化