注意事项：

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="data: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="data: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——祝愿墙的更多相关文章

  1. js-DOM ～ 04. BOM：浏览器对象模型window. 、定时器、在线用户、祝愿墙、BOM的内置方法内置对象

    multiple. select列表多选 触发事件后调用有参数的函数要先创建一个函数,然后在函数内调用执行函数 Array.from(伪数组):伪数组变为真数组 indexOf():查询字符的索引 a ...

  2. angular js 公告墙

    <!DOCTYPE html>   <html lang="en">   <head>   <meta charset="UTF ...

  3. JS-DOM ～ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性

    带有Element和不带的区别 a)  带Element的获取的是元素节点 b)  不带可能获取文本节点和属性节点 获取所以子节点 a)   . childNodes b)   . children ...

  4. [转载]jquery版小型婚礼（可动态添加祝福语）

    原文链接:http://www.cnblogs.com/tattoo/p/3788019.html 前两天在网上不小心看到“js许愿墙”这几个字,我的神经就全部被调动了.然后就开始我 的百度生涯,一直 ...

  5. jquery版小型婚礼（可动态添加祝福语）

    前两天在网上不小心看到“js许愿墙”这几个字,我的神经就全部被调动了.然后就开始我的百度生涯,一直寻觅许愿墙背景图片和便利贴图片,觅了好久……一直没找到满意的……无意间看到祝福语和一些卡通婚礼图片.最 ...

  6. JavaScript 基础第九天（DOM第三天）

    一.引言 我们昨天介绍了很多的概念以及大部分我们可以在工作中用到的事件,那么今天我们将运用这些知识做一些效果! 二.导入 今天的内容以实例为主. 三.重点内容 祝愿墙的简单构建: 首先我将介绍出本次实 ...

  7. Mysql 源码编译教程贴

    题外话:这是一篇教程贴,不仅学的是mysql的编译,还是一些编译的知识.我也是一个菜鸟,写一些感悟和心得,有什么问题可以批评指正,谢谢! 如果只是为了安装请移到我的另一篇安装贴: Mysql安装贴 环 ...

  8. Mysql 5.6 Cmake 编译安装

    MySQL编译安装 环境: OS: CentOS 6.6x64 mini mysql: mysql-5.6.251. mysql 下载: http://dev.mysql.com/downloads/ ...

  9. 分布式消息队列kafka

    下载地址:http://kafka.apache.org/downloads.html 先启动zookeeper服务器 bin/zookeeper-server-start.sh config/zoo ...

随机推荐

  1. [bzoj1022/poj3480]小约翰的游戏John_博弈论

    小约翰的游戏John 题目大意:Nim游戏.区别在于取走最后一颗石子这输. 注释:$1\le cases \le 500$,$1\le n\le 50$. 想法:anti-SG游戏Colon定理. 如 ...

  2. vijos——1164 曹冲养猪

    描述 自从曹冲搞定了大象以后,曹操就开始捉摸让儿子干些事业,于是派他到中原养猪场养猪,可是曹冲满不高兴,于是在工作中马马虎虎,有一次曹操想知道母猪的数量,于是曹冲想狠狠耍曹操一把.举个例子,假如有16 ...

  3. bridge 上网

    手头有一台机器上有一个虚拟机 虚拟机为桥接 本机为静态IP上网 想让虚拟机上网的方式是 本机不设ip 网卡设置DHCP. 虚拟机设置静态ip

  4. 线程调度策略SCHED_RR（轮转法）和SCHED_FIFO（先进先出）之对照

    我们在用pthread创建线程时,能够指定调度策略policy--SCHED_OTHER(默认).SCHED_RR和SCHED_FIFO.这里TALK一下两个实时策略--SCHED_RR和SCHED_ ...

  5. 1. FrogRiverOne 一苇渡江 Find the earliest time when a frog can jump to the other side of a river.

    package com.code; public class Test04_3 { public static int solution(int X, int[] A) { int size = A. ...

  6. JAVA 如何反编译JAR文件

    1 直接的jar文件可以用winrar解压,然后得到class文件,但是这里得到的class文件也是编译过的二进制文件,用传统的文本编辑器无法打开. 2 用XJad这个软件可以反编译Jar文件,直接找 ...

  7. 连载：面向对象葵花宝典：思想、技巧与实践（34） - DIP原则

    DIP,dependency inversion principle,中文翻译为"依赖倒置原则". DIP是大名鼎鼎的Martin大师提出来的.他在1996 5月的C++ Repo ...

  8. scikit-learn：matplotlib.pyplot经常使用绘图功能总结（1）

    參考:http://matplotlib.org/api/pyplot_api.html 绘图功能总结(2):http://blog.csdn.net/mmc2015/article/details/ ...

  9. [WebGL入门]二十一，从平行光源发出的光

    注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中假设有我的额外说明.我会加上［lufy:］,另外,鄙人webgl研究还不够深入,一些专业词语.假设翻译有误,欢迎大家指 ...

  10. 大写金额换算器iOS版源码

    大写金额换算器iOS版源码 人民币金额大写转换器输入数字就可以转换成相应的人民币大写金额,操作很easy,需一键点击,就可以复制. 是財务办公人员必备的小工具. 银行.单位和个人填写的各种票据和结算凭 ...