注意事项：
1、for循环的下一层注册了事件的话，事件函数中关于变量i的节点元素是不允许出现的，因为在函数加载的时候，只会加载函数名，不会加载函数体，外层for循环会走完一边，变量i一直会停留在最后一个值
2、设置节点元素的样式时，特别是top、left等属性，记住加“px”
3、Math.random()是0到1之间的数，注意用parseInt取整
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> * { padding: 0; margin: 0; } body { background: url("image/bg.gif"); font-size: 12px; } .content { position: relative; width: 960px; height: 627px; margin: 0 auto; background: url("image/content_bg.jpg"); } .wishingWall { position: absolute; width: 227px; } .tip2 { } span { display: block; } .tip1 { position: relative; height: 25px; padding-top: 43px; background: url("image/tip1_h.gif"); } .tip1 span { padding-left: 10px; } .tip1 s { text-decoration: none; position: absolute; top: 45px; right: 10px; width: 15px; height: 15px; text-align: center; font: 600 12px/15px "simsun"; cursor: pointer; } .tip2 { background: url("image/tip1_c.gif"); max-height: 100px; overflow: hidden; padding-left: 10px; padding-right: 10px; line-height: 20px; } .tip3 { height: 53px; padding-top: 20px; background: url("image/tip1_f.gif"); } .tip3 .icon { padding-left: 10px; } .tip3 span { display: inline-block; float: right; font-size: 14px; margin-top: 5px; margin-right: 16px; color: #C0F; } </style> <body> <div class="content"> <!--<div class="wishingWall" style="position: absolute;top: 0px;left: 0px;">--> <!--<div class="tip1">--> <!--<span>第[49568]条 2016-03-18 12:40:00</span>--> <!--<s>×</s>--> <!--</div>--> <!--<span class="tip2">把朋友家厕所拉堵了 不敢出去 掏了半小时了都</span>--> <!--<span class="tip3">--> <!--<img src="image/bpic_1.gif" class="icon">--> <!--<span>98年的妹子</span>--> <!--</span>--> <!--</div>--> </div> <script> //模拟数据库，获取信息 var messages = [ {"id": 1, "name": "mahu", "content": "今天你拿苹果支付了么", "time": "2016-02-17 00:00:00"}, {"id": 2, "name": "haha", "content": "今天天气不错，风和日丽的", "time": "2016-02-18 12:40:00"}, {"id": 3, "name": "jjjj", "content": "常要说的事儿是乐生于苦", "time": "2016-03-18 12:40:00"}, {"id": 4, "name": "9.8的妹纸", "content": "把朋友家厕所拉堵了 不敢出去 掏了半小时了都", "time": "2016-03-18 12:40:00"}, {"id": 5, "name": "雷锋ii.", "content": "元宵节快乐", "time": "2016-02-22 12:40:00"}, {"id": 6, "name": "哎呦哥哥.", "content": "据说今晚央视的元宵晚会导演和春晚导演是同一个人，真是躲得过初一，躲不过十五。", "time": "2016-02-22 01:30:00"}, { "id": 7, "name": "没猴哥，不春晚", "content": "班主任:“小明，你都十二岁了，还是三年级，不觉得羞愧吗”？。小明:“一点也不觉得，老师你都四十多岁了，不也是年年在三年级混日子吗？羞愧的应该是你”。老师:……", "time": "2016-02-22 01:30:00" }, {"id": 8, "name": "哎呦杰杰.", "content": "真搞不懂你们地球人，月亮有什么好看的，全是坑，还是对面那哥们好看，", "time": "2016-02-22 01:30:00"}, {"id": 9, "name": "哎呦哎呦", "content": "今天哪里的烟花最好看！！？答：朋友圈。。。", "time": "2016-02-22 02:30:00"} ]; var content = document.getElementsByClassName("content")[0]; for (var i = 0; i < messages.length; i++) { content.innerHTML += '<div class="wishingWall">' + '<div class="tip1">' + '<span>' + messages[i].time + '</span>' + '<s>×</s>' + '</div>' + '<span class="tip2">' + messages[i].content + '</span>' + '<span class="tip3">' + '<img src="image/bpic_1.gif" class="icon">' + '<span>' + messages[i].name + '</span>' + '</span>' + '</div>'; } var divEles = content.children; var zIndexValue = 0; for (var i = 0; i < divEles.length; i++) { divEles[i].style.top = randomTop() + "px"; divEles[i].style.left = randomLeft() + "px"; divEles[i].onclick = function () { zIndexValue++; this.style.zIndex = zIndexValue; } var closeEle = divEles[i].getElementsByTagName("s")[0]; closeEle.onclick = function () { content.removeChild(this.parentNode.parentNode); } } function randomTop() { return parseInt(Math.random() * (627 - 257)); } function randomLeft() { return parseInt(Math.random() * (960 - 231)); } </script> </body> </html>
