js自动生成舒尔特方格
首先，建一个html文档，引入jquery
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>舒尔特方格</title> </head> <body> </body> <script type="text/javascript" src="js-min.js"></script> </html>
在html上布置一个div容器，点击这个div，可自动生成一个舒尔特表格。
<div class="warp"> </div>
设置div和表格的样式，因为舒尔特表格必须是1cmx1cm的小格子，所以设置入下格式
<style type="text/css">
table{
border: 1px black solid;
margin: 10px;
float: left;
margin-left: 30px;
}
tr{
width: 5.1cm;
}
td{
width: 1.1cm;
height: 1.1cm;
border: 1px black solid;
text-align: center;
}
body{
font-size: 24px;
}
.warp{
width: 24CM;
height: 30CM;
background: #ccc;
}
.tinyTR{
font-size: 16px;
height: 0.5cm;
}
.tinyTD{
height:0.5cm;
}
</style>js部分，随机排序1-25的数组
var arr = [1, 2, 3, 4, 5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25];
//产生随机数字
function randomsort(a, b) {
return Math.random()>.5 ? -1 : 1;
//用Math.random()函数生成0~1之间的随机数与0.5比较，返回-1或1
}
arr.sort(randomsort);至此，已经能生成随机排序的arr。全部代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>舒尔特方格</title>
<style type="text/css">
table{
border: 1px black solid;
margin: 10px;
float: left;
margin-left: 30px;
}
tr{
width: 5.1cm;
}
td{
width: 1.1cm;
height: 1.1cm;
border: 1px black solid;
text-align: center;
}
body{
font-size: 24px;
}
.warp{
width: 24CM;
height: 30CM;
background: #ccc;
}
.tinyTR{
font-size: 16px;
height: 0.5cm;
}
.tinyTD{
height:0.5cm;
}
</style>
</head>
<body>
<div class="warp">
</div>
</body>
<script type="text/javascript" src="js-min.js"></script>
<script type="text/javascript">
//产生随机数字
function randomsort(a, b) {
return Math.random()>.5 ? -1 : 1;
//用Math.random()函数生成0~1之间的随机数与0.5比较，返回-1或1
}
alert('点击灰色区域自动生成');
$("div").click(function(){
var arr = [11, 20, 16, 6, 25,4,7,18,9,10,1,12,13,14,5,23,17,8,19,2,21,22,3,24,15];
arr.sort(randomsort);
var table = '<table><tr class="tinyTR"><td class="tinyTD">日期</td><td class="tinyTD"></td><td class="tinyTD"></td><td class="tinyTD">成绩</td><td class="tinyTD"></td></tr><tr><td id="m0">'+arr[0]+'</td><td id="m1">'+arr[1]+'</td><td id="m2">'+arr[2]+'</td><td id="m3">'+arr[3]+'</td><td id="m4">'+arr[4]+'</td></tr><tr><td id="m5">'+arr[5]+'</td><td id="m6">'+arr[6]+'</td><td id="m7">'+arr[7]+'</td><td id="m8">'+arr[8]+'</td><td id="m9">'+arr[9]+'</td></tr><tr><td id="m10">'+arr[10]+'</td><td id="m11">'+arr[11]+'</td><td id="m12">'+arr[12]+'</td><td id="m13">'+arr[13]+'</td><td id="m14">'+arr[14]+'</td></tr><tr><td id="m15">'+arr[15]+'</td><td id="m16">'+arr[16]+'</td><td id="m17">'+arr[17]+'</td><td id="m18">'+arr[18]+'</td><td id="m19">'+arr[19]+'</td></tr><tr><td id="m20">'+arr[20]+'</td><td id="m21">'+arr[21]+'</td><td id="m22">'+arr[22]+'</td><td id="m23">'+arr[23]+'</td><td id="m24">'+arr[24]+'</td></tr></table>'
$(this).append(table);
});
// $("td").each(function(){
// var i = $(this).attr("id").slice(1,3)-1;
// $(this).text(arr[i]);
// console.log($(this));
// });
</script>
</html>效果如下
完整源码：下载
15页舒尔特方格A4纸pdf版打包下载