学生随机程序
要求：
1. 可动态输入行数和列数生成座位表
2. 座位表上有座位号（序号或者几排几列）
3. 可以在输入框中指定随机个数，随机挑选，并使相应个数的座位表上背景色变红色
4. 随机的过程中有动态闪动效果
5. 动态闪动效果逐渐变慢直至停止并显示结果
变色动画效果要jQuery-UI才支持,去重算法,自己改一下(是在是不难,或者直接每次random的值设为1,一个一个的生成)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="js/jquery-2.0.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var row=$('#row').val();
var col=$('#col').val();
var random=$("#random").val();
var choose=$("td");
$('#createtable').click(function(){
$("td").remove();
$("tr").remove();
for(var i=1;i<=col;i++){
$("table").append("<tr></tr>")
for (var j=1;j<=row;j++) {
$('table tr:last-child').append("<td>第"+i+"行第"+j+"列</td>");
}
}
})
var num=new Array(random);
for(var j=0;j<num.length;j++){
num[j]=-1;
}
var choose;
$("#input").bind("click",function(){
for (var i=1;i<=random;i++) {
var row1=Math.ceil(Math.random()*row);
var col1=Math.ceil(Math.random()*col);
choose=(row1-1)*(row-1)+col1;
console.log($("td:eq("+choose+")").text());
$("td:eq("+choose+")").addClass("red");
//动画变色的需要用jQuery-UI插件才可以,jQuery不支持
//去重算法,自己完善一下,随机数去重,
// for (var k=0;k<num.length;k++) {
// if(num[k]==-1){
// num[k]=choose;
// $("td:eq("+choose+")").addClass("red");
// }
// else if(choose==num[k]){
// i-=1;
// break;
// }
//
// }
}
})
})
</script>
<style type="text/css">
td{
background-color: greenyellow;
}
.red{
background-color: red;
opacity: 1;
}
table{
background-color: red;
}
</style>
<body>
列:<input type="text" name="" id="row" value="10" />
行:<input type="text" name="" id="col" value="10" />
<button id="createtable">create</button>
随机挑选：<input type="text" id="random" value="1"/>
<button id="input">随机挑选</button>
<table border="1" cellspacing="0" cellpadding="15px">
</table>
</body>
</html>
已知bug,1,create和随机挑选两个按钮会产生浏览器缓存问题,解决方案,刷新页面重新提交
2,create 和随机挑选未做数字检验,不要输入非数字或小于1的数组