81,122
社区成员
发帖
与我相关
我的任务
分享JS生成马赛克样式div
本来提了一次问题了，可是不知道为何被csdn吃了，这次我就简短写了
我写了两个html，导入了jquery-1.4.3.js，其余的就用eclipse写的了
自己初学java，然后写代码的时候还是有很多问题，大神们来帮忙看看，感激不尽
首先，
第一个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，谢谢大神们了，在这先谢了！
我写了两个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>
...全文
请发表友善的回复…
发表回复
