注意事项：

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. Ajax提交post请求返回404错误

    最近使用ajax提交表单的时候,发现无法执行success函数,后台的代码也正常执行了,但是就是无法执行success函数,执行error函数,返回的错误代码时404.显然是找不到请求的url. 可是 ...

  2. 交友app

    编辑注记:这是由译者 han_qi 翻译纽约客的一篇文章,从女性的角度描写了交友产品的用户体验及需求,值得广大产品经理深入研究,文章略长,但值得深读.原文<Overwhelmed and Cre ...

  3. NOIP2013 提高组合集

    NOIP 2013 提高组 合集 D1 T1 转圈游戏 快速幂裸题 #include <iostream> #include <cstdio> #include <cst ...

  4. Ubuntu 16.04安装7zip

    搜索时发现7zip有两个:p7zip,p7zip-full,p7zip-rar.研究发现: p7zip:包含7zr(最小的7zip归档工具),仅仅只能处理原生的7z格式. p7zip-full:包含7 ...

  5. How to Use DHCP Relay over LAN? - DrayTek Corp

    Assuming Vigor2960 has two LAN networks. Network Administrator wants that, when the internal DHCP is ...

  6. HDU 4005 The war(双连通好题）

    HDU 4005 The war pid=4005" target="_blank" style="">题目链接 题意:给一个连通的无向图.每条 ...

  7. 负载均衡算法，轮询方式 大话设计模式之工厂模式 C#

    负载均衡算法,轮询方式 2018-04-13 17:37 by 天才卧龙, 13 阅读, 0 评论, 收藏, 编辑 学无止境,精益求精 十年河东,十年河西,莫欺少年穷 学历代表你的过去,能力代表你的现 ...

  8. Python中range和xrange的异同之处

    range     函数说明:range([start,] stop[, step]).依据start与stop指定的范围以及step设定的步长,生成一个序列. range演示样例:  >> ...

  9. linux安装jmeter

    将jmeter安装包下载下来(部分linux版本),配置环境变量 jmeter下载地址:链接: https://pan.baidu.com/s/1_6-FmU6XjQH71Ngyh2Sx-A    提 ...

  10. 6.6 random--伪随机数的生成

    本模块提供了生成要求安全度不高的随机数.假设须要更高安全的随机数产生.须要使用os.urandom()或者SystmeRandom模块. random.seed(a=None, version=2) ...