JS生成马赛克样式div

CelioZ Java初学  2015-07-25 01:10:44
本来提了一次问题了,可是不知道为何被csdn吃了,这次我就简短写了
我写了两个html,导入了jquery-1.4.3.js,其余的就用eclipse写的了
自己初学java,然后写代码的时候还是有很多问题,大神们来帮忙看看,感激不尽
首先,
第一个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(){
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>


昨天想了一下不知能,于是昨天想了一下又重新写了一个,我大概说一下主要的实现,就是通过点击button获得用户text里输入的文本内容num,然后生成num*num的正方形div,然后在添加div时会设置top和left值,并且动态给id属性,然后通过jquery的animate给每个div加fadeIn和fadeOut动画,然后用setInterval自动执行方法,从而产生动态的效果,
然后,正方形div能够正常打印出来, 然后在浏览器的console里我也能看见动态生成的div是成功给了id属性,可是只有最后一个div加上了动画效果,大神们帮帮忙吧,第一次提问题,没有描述清楚请见谅,具体想实现的效果大家可以看看第一段html,
下面是我第二段html,也就是出问题的那个,然后有疑问的那部分也加红了,ps.还想问一个在div的颜色在这样生成的时候则么能做出渐变色的效果呢,具体效果大家也可以看看第一段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>
...全文
237 点赞 收藏 回复
写回复
回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
相关推荐
发帖
Web 开发
创建于2007-09-28

8.0w+

社区成员

Java Web 开发
申请成为版主
帖子事件
创建了帖子
2015-07-25 01:10
社区公告
暂无公告