8.0w+
社区成员
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>
...全文
当前发帖距今超过3年，不再开放新的回复
发表回复
html + js实现马赛克画板 使用html + js写一个马赛克画板： 1. 页面加载时，要求用户输入两个整数，对应长和宽，例如100, 200 2. 页面显示100*200个格子，要求占满整个窗口，不能有滚动条。 3. 当窗口大小变化时，依然要满足上述条件 4. ...
原生js实现抽奖小游戏 这个小游戏可以设置为抽奖小游戏，也可以设置为随机点名器，这个软件...div class="wrapper"> <ul class="box"></ul> <button class="start">开始点名</button> <button class=...
js截取图片 裁剪图片之cropper.js插件用法详解 js截取图片 裁剪图片之cropper.js插件用法详解 源码：https://github.com/fengyuanchen/cropper 引入+使用 <link href="/path/to/cropper.css" rel="stylesheet"> <script src="/path/to/cropper.js"&...
将Highcharts图表数据生成Table表格 既然统计图都显示出来了，那我们可以根据统计图的各元素生成表格了。 首先，先显示统计图。 Html----通过一个查询按钮，根据查询条件，查询满足条件的数据，显示到统计图中。 a onclick="Query();" >查询a> ...
使用wx-open-launch-app 实现h5打开app 1、安装weixin-js-sdk npm install --save weixin-js-sdk 引用：var wx = require('weixin-js-sdk'); es6项目注意：为方便es6项目使用，官方发布了一个weixin-jsapi，这个才是我们能在vue中引用的jssdk，所以我们...
cropper.js 裁剪图片并上传（文档翻译+demo） 还有如果要想正确的显示出裁剪的区域需要加上样式 overflow: hidden; 去掉 overflow: hidden; 效果图如下： 感觉成了一个放大镜； responsive—在调整窗口大小的时候重新渲染cropper ...
cropper.js裁剪 还有如果要想正确的显示出裁剪的区域需要加上样式 overflow: hidden; 去掉 overflow: hidden; 效果图如下： 感觉成了一个放大镜； responsive—在调整窗口大小的时候重新渲染cropper ...
cropper.js （文档翻译+demo） 还有如果要想正确的显示出裁剪的区域需要加上样式 overflow: hidden; 去掉 overflow: hidden; 效果图如下： 感觉成了一个放大镜； responsive—在调整窗口大小的时候重新渲染cropper ...
从零到一的react.js+node.js+express.js+mysql产品开发全流程 3.4 完毕之后，会在本地启动一个开发服务，并在你默认的浏览器打开一个页面，页面显示图如下（打马赛克的地方意思是在该步骤是未出现的）： 然后要把项目在你的模拟机上运行，根据电脑的系统选择不同的模拟机...
cropper.js 裁剪图片并上传 还有如果要想正确的显示出裁剪的区域需要加上样式 overflow: hidden; 去掉 overflow: hidden; 效果图如下： 感觉成了一个放大镜； responsive—在调整窗口大小的时候重新渲染cropper 类型： ...
地理信息系统（GIS）系列——ArcGIS中的各种图层 1、Map 类 构造函数 new Map(divId, ... } style> <link rel="stylesheet" type="text/css" href="http://localhost:2686/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" /> <script type="text/javascript" src=...
Web 区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。 #####6.前端页面结构由哪三层构成，分别是什么，作用是什么？ 分成：结构层、表示层、行为层。 结构层（structural layer） 由 HTML 或 ...
Web前端资源汇总 使用javascript生成的植物显示过程特效 移动端页面侧边导航滑入效果 jQuery用户数字评分效果 这个jQuery导航菜单怎么样 HTML5漂亮实用的电子书 Google LOGO现代舞舞蹈动画 ...
java HTML5 学习资料汇总 使用 pixelator.js 实现图片马赛克功能 阿里巴巴 马云启动“NASA”计划，以担当未来的责任 线程池ThreadPoolExecutor运转机制和使用详解 HTML5实现滑动验证码 滑动验证码的实现原理 Java 对称加密算法IDEA 的使用...
cropper.js 裁剪图片并上传（文档翻译+demo）（转） 官网http://fengyuanchen.github.io/cropper/ 文档...转载至Presbyterian cropper.js 裁剪图片并上传（文档翻译+demo 引入+使用 <linkhref="/path/to/cropper.css"r...
