81,122
社区成员




<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
$(function(){
setInterval(f1,100);
setInterval(f2,100);
setInterval(f3,100);
setInterval(f4,100);
setInterval(f5,100);
setInterval(f6,100);
setInterval(f7,100);
setInterval(f8,100);
setInterval(f9,100);
});
function f1(){
$('#d1').fadeOut(Math.random()*100+100);
$('#d1').fadeIn(Math.random()*100+100);
}
function f2(){
$('#d2').fadeOut(Math.random()*100+100);
$('#d2').fadeIn(Math.random()*100+100);
}
function f3(){
$('#d3').fadeOut(Math.random()*100+100);
$('#d3').fadeIn(Math.random()*100+100);
}
function f4(){
$('#d4').fadeOut(Math.random()*100+100);
$('#d4').fadeIn(Math.random()*100+100);
}
function f5(){
$('#d5').fadeOut(Math.random()*100+100);
$('#d5').fadeIn(Math.random()*100+100);
}
function f6(){
$('#d6').fadeOut(Math.random()*100+100);
$('#d6').fadeIn(Math.random()*100+100);
}
function f7(){
$('#d7').fadeOut(Math.random()*100+100);
$('#d7').fadeIn(Math.random()*100+100);
}
function f8(){
$('#d8').fadeOut(Math.random()*100+100);
$('#d8').fadeIn(Math.random()*100+100);
}
function f9(){
$('#d9').fadeOut(Math.random()*100+100);
$('#d9').fadeIn(Math.random()*100+100);
}
</script>
<style type="text/css">
body{
font-family:'Microsoft Yahei';
font-size:30px;
margin:0;
padding:0;
}
div{
width:100px;
height:100px;
margin:0;
padding:0;
position:absolute;
display:none;
}
#d1{
background-color:#faa;
}
#d2{
background-color:#fbb;
left:100px;
}
#d3{
background-color:#fcc;
left:200px;
}
#d4{
background-color:#faa;
top:100px;
}
#d5{
background-color:#fbb;
top:100px;
left:100px;
}
#d6{
background-color:#fcc;
top:100px;
left:200px;
}
#d7{
background-color:#faa;
top:200px;
}
#d8{
background-color:#fbb;
top:200px;
left:100px;
}
#d9{
background-color:#fcc;
top:200px;
left:200px;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
<div id="d6"></div>
<div id="d7"></div>
<div id="d8"></div>
<div id="d9"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">
$(function(){
//页面加载完成后给button加上onlick事件
$('#btn').click(btn);
});
function btn(){
//每次点button清楚页面所有div
$('div').remove();
//获取页面输入的值
var num=getNum();
//画div
show(num);
}
function getNum(){
var num=0;
//通过jQuery对象获得文本框内容
num=$('#num').val();
return num;
}
function show(number){
var num= number;
var drawNum=0;
//每画num个div,就要换行,所以index做取模用,但是要+1,因为0/index=0,所以循环下标不能从0开始,所以就会少画一个div,因此index=num+1由于num是字符串,所以用eval计算,
var index =eval("("+num+"+1)");
//total是总共的格子数,num*num
var total = 0;
//画div的横向参数
var x = 1;
//画div的纵向参数
var y = 1;
//给每个div的id值
var id="";
try{
//总共的div=num*num
total = eval("("+num+"*"+num+")");
//每次在换行的时候会少画一个div,一共换num次行,因此少画了num个div,因此实际上一共要循环num+total次
drawNum= eval("("+num+"+"+total+")");
}catch(e){
console.log(e);
}
//在页面里显示一共多少个格子
$('#s1').text(total);
for(i=1;i<drawNum;i++){
//拼接id字符串
id ="#d"+i;
//取模换行
if(i%(index)!=0){
//div的position设置为absolute,因此在div上或字节加style来确定位置
$('#num').after("<div id=d"+i+" style='left:"+(x-1)*100+"px; top:"+y*100+"px'></div>");
setInterval(function(){
//设置fadeOut和fadeIn参数为99-199ms之间,模拟随机出现时间
$(''+id+'').fadeOut(Math.random()*100+100);
$(''+id+'').fadeIn(Math.random()*100+100);
//方法每99ms执行一次
},99);
//每画一个div,横向参数x++
x++;
}else{
//当取模等于0时,则换行,用div的top来实现,所以纵向参数y++
x=1;
y++;
}
}
}
</script>
<style type="text/css">
body{
font-family:'Microsoft Yahei';
font-size:20px;
margin:0;
padding:0;
}
div{
width:100px;
height:100px;
margin:0;
padding:0;
position:absolute;
/*display:none;*/
background-color:#eef;
}
</style>
</head>
<body>
<span id="s1"></span><br/>
Number:<input id="num"/><input type="button" id="btn" value="Confirm"/><br/>
</body>
</html>