注意事项：
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>JS——祝愿墙
原文地址：http://www.cnblogs.com/wuqiuxue/p/7898171.html