三. 学生随机程序
要求：
1. 可动态输入行数和列数生成座位表
2. 座位表上有座位号（序号或者几排几列）
3. 可以在输入框中指定随机个数，随机挑选，并使相应个数的座位表上背景色变红色
5. 动态闪动效果逐渐变慢直至停止并显示结果
建议用table使用循环动态生成tr和td，以循环变量作为序号插入到td中，
至于第三个生成随机数，选定HTML（）的值，addclass()//预先写好的类。或直接css(“background”，"red");
第四个写个动画，for循环控制，每次动画时间减100ms，直到为0，跳出；
<!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>
当作看不见 的答得不错，我改善了一下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var row,col;
var choose=$("td");
$('#createtable').click(function(){
row=$('#row').val();
col=$('#col').val();
$("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<=row*col;i++) {
$("td:eq("+i+")").removeClass("red");
}
var random=$("#random").val();
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="6" />
行:<input type="text" name="" id="col" value="6" />
<button id="createtable">create</button>
随机挑选：<input type="text" id="random" value="3"/>
<button id="input">随机挑选</button>
<table border="1" cellspacing="0" cellpadding="15px">
</table>
</body>
</html>