..
JS练习：口算题生成器
小学一年级打好口算基础很重要，通常学校会发一本口算卡，每天做一页。去年女儿上一年级，我尝试用python写了一段程序，输出加法和减法的口算题。我用的方法很笨，用print语句输出，然后粘贴到word里打印。
前几天想到改进一下这个小程序，搜索了一下发现有好几个windows下的应用程序，还有Excel写的，原来广大家长的需求还是很明显的。我想能改用web应用，用JS要比python更合适，于是经过一些学习（拼凑），完成了这个小工具，算是我第一个前端学习成果。地址在：http://mrdu.me/ks。
因为是单文件的html文件，所以可以保存这个网页到本机，然后打印就可以了。后续，会跟着孩子的学习进度进行更新，加入更多功能。
以下是代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>口算题生成器</title>
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
color:#333
background: #333;
}
p {
padding: 10px;
}
hr { height:2px;border:none;border-top:1px solid #333;}
#wrapper {
margin: 0 auto;
width: 85%;
}
#content {
float: left;
background: #fff;
width: 100%;}
.three-col {
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
column-count:3;
column-gap: 20px;
}
.bluebut {
position: relative;
vertical-align: top;
width: 160px;
height: 50px;
padding: 0;
font-size: 22px;
color: white;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #1abc9c;
border: 0;
border-bottom: 2px solid #12ab8d;
cursor: pointer;
-webkit-box-shadow: inset 0 -2px #12ab8d;
box-shadow: inset 0 -2px #12ab8d;
}
.bluebut:active {
top: 1px;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#head {
font-size: 22px;
}
#printnotes {
padding:0px;
margin:0px;
}
#qr {
display: inline;
float:left;
}
#keys {
padding-left:78px;
}
input {
font-size: 22px;
width:50px;
}
.radioclass {
width:50px;
}
@media print {
body {background-color:#FFFFFF; font-size: 14px;line-height:26px;}
h1 {font-size:15px;}
#head, #notes {display:none;}
#printnotes {font-size:10px; font-color:#777;}
}
@page {margin: 0.5cm;}
</style>
<script>
//获取题目数量函数
function fmaxti(){
var temp=document.getElementsByName("maxti");
for (i=0;i<temp.length;i++){
//遍历Radio
if(temp[i].checked)
{
maxti=temp[i].value;
}
}
}
//检测输入数字为整数
function checknum(ss){
var ss;
return typeof ss === 'number' && ss%1 === 0
}
//加法
function add(){
var max,min,i,x,y;
max=Number(document.getElementById("max").value);
min=Number(document.getElementById("min").value);
x='';y='';
fmaxti();
i=1;
if (!(Number.isInteger(max) && Number.isInteger(min) ))
{alert("输入有误！");return;}
if (min>49)
{alert("最小数字应小于50");return;}
do
{
n1=parseInt((max-min)*Math.random()+min);
n2=parseInt((max-min)*Math.random()+min);
if ((n1+n2)<100)
{
y=y+(n1+n2)+' ';
if (n1<10){n1=' '+n1;}
if (n2<10){n2=' '+n2;}
x= x + n1 + ' + ' + n2 + ' = ' +'______<br/>';
i++;
}
}
while (i<maxti);
document.getElementById("answer").innerHTML= x;
document.getElementById("keys").innerHTML= y;
}
//随机减法函数
function subtract(){
var max,min,i,x;
max=Number(document.getElementById("max").value);
min=Number(document.getElementById("min").value);
x='';
fmaxti();
if (!(Number.isInteger(max) && Number.isInteger(min) ))
{alert("输入有误！");return;}
for (var i=1; i<maxti; i++)
{
n1=parseInt((max-min)*Math.random()+min);
n2=parseInt((max-min)*Math.random()+min);
if (n1<n2)
{n1=n1+n2;n2=n1-n2;n1=n1-n2;}
if (n1<10)
{n1=' '+n1;}
if (n2<10)
{n2=' '+n2;}
x= x + n1 + ' - ' + n2 + ' = ' +'______<br/>';
}
document.getElementById("answer").innerHTML= x;
}
//三个数加法
function threeadd(){
var max,min,i,x;
max=Number(document.getElementById("max").value);
min=Number(document.getElementById("min").value);
x='';
fmaxti();
i=1;
if (!(Number.isInteger(max) && Number.isInteger(min) ))
{alert("输入有误！");return;}
if (min>32)
{alert("最小数字应小于33");return;}
do
{
n1=parseInt((max-min)*Math.random()+min);
n2=parseInt((max-min)*Math.random()+min);
n3=parseInt((max-min)*Math.random()+min);
if ((n1+n2+n3)<100)
{
if (n1<10){n1=' '+n1;}
if (n2<10){n2=' '+n2;}
if (n3<10){n3=' '+n3;}
x= x + n1 + ' + ' + n2 + ' + ' + n3 + ' = ______<br/>';
i++;
}
}
while (i<maxti);
document.getElementById("answer").innerHTML= x;
}
//三个数减法
function threesubtract(){
var max,min,i,x;
max=Number(document.getElementById("max").value);
min=Number(document.getElementById("min").value);
x='';
fmaxti();
i=1;
if (!(Number.isInteger(max) && Number.isInteger(min) ))
{alert("输入有误！");return;}
//避免max接近min的2倍，随机结果无法出现
if ((max-2*min)<5)
{alert("最大和最小数字范围太小");return;}
do
{
n1=parseInt((max-min)*Math.random()+min);
n2=parseInt((max-min)*Math.random()+min);
n3=parseInt((max-min)*Math.random()+min);
if ((n1-n2-n3)>0)
{
if (n1<10){n1=' '+n1;}
if (n2<10){n2=' '+n2;}
if (n3<10){n3=' '+n3;}
x= x + n1 + ' - ' + n2 + ' - ' + n3 + ' = ______<br/>';
i++;
}
}
while (i<maxti);
document.getElementById("answer").innerHTML= x;
}
//三个数加减混合
function three(){
var max,min,i,x;
max=Number(document.getElementById("max").value);
min=Number(document.getElementById("min").value);
x='';
fmaxti();
i=1;
if (!(Number.isInteger(max) && Number.isInteger(min) ))
{alert("输入有误！");return;}
do
{
n1=parseInt((max-min)*Math.random()+min);
n2=parseInt((max-min)*Math.random()+min);
n3=parseInt((max-min)*Math.random()+min);
if ((n1+n2)<100 && (n1+n2-n3)>0)
{
if (n1<10){n1=' '+n1;}
if (n2<10){n2=' '+n2;}
if (n3<10){n3=' '+n3;}
x= x + n1 + ' + ' + n2 + ' - ' + n3 + ' = ______<br/>';
i++;
}
else if ((n1-n2)>0 && (n1-n2+n3)<100)
{
if (n1<10){n1=' '+n1;}
if (n2<10){n2=' '+n2;}
if (n3<10){n3=' '+n3;}
x= x + n1 + ' - ' + n2 + ' + ' + n3 + ' = ______<br/>';
i++;
}
}
while (i<maxti);
document.getElementById("answer").innerHTML= x;
}
//打印
function printit()
{
window.print()
}
</script>
</head>
<body>
<div id="wrapper">
<div id="content">
<h1>口算题</h1>
<div id="head">
<br/>
最小数字：<input id="min" value='0'> 最大数字：<input id="max" value='100'> 试题数量：<input type="radio" name="maxti" value="26" class="radioclass">25 <input type="radio" name="maxti" value="51" class="radioclass">50 <input type="radio" name="maxti" value="101" class="radioclass" checked>100
<br/><br/>
<button onclick="add()" class="bluebut" >加法</button> <button onclick="subtract()" class="bluebut">减法</button> <button onclick="threeadd()" class="bluebut">三个数加法</button> <button onclick="threesubtract()" class="bluebut">三个数减法</button> <button onclick="three()" class="bluebut">三个数加减混合</button><button style="float:right" onclick="printit()" class="bluebut">打印</button>
</div>
<hr>
<div class="three-col">
<output id="answer"></output>
</div>
<hr>
<div id="notes">网址：<a href="http://mrdu.me/ks">mrdu.me/ks</a><br/>说明：确定出题范围和数量，结果小于100。推荐使用Chrome浏览器。适用A4纸打印，答案可以撕开。<br/>感谢：<a href="http://goqr.me/#t=url">goQR.me</a> / <a href="http://cssdeck.com/labs/beautiful-flat-buttons">Beautiful Flat Buttons</a></div>
<div id="printnotes">
<div id="qr"><img src="qrcode.png" width="75px" height="75px" /></div>
<div id="keys"></div>
</div>
</div>
</div>
</body>
</html>
20160927