注意事项：

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. 关于SVN版本冲突问题

    版本冲突原因: 假设A.B两个用户都在版本号为100的时候,更新了kingtuns.txt这个文件,A用户在修改完成之后提交kingtuns.txt到服务器,这个时候提交成功,这个时候kingtuns ...

  2. Android Studio底边栏选项不见了，怎样调出来

    Android Studio底边有一个选项栏,包括了Run,Android等等非常多的选项,可是假设你一不小心不知道自己点到哪个地方了.底边选项栏不见了,怎样调出来.非常easy.例如以下图.地边栏不 ...

  3. R环境中的工作空间（workspace）

    工作空间(workspace)就是当前R的工作环境,它储存着全部用户定义的对象(向量.矩阵.函数.数据框.列表) . 在一个R会话结束时,你能够将当前工作空间保存到一个镜像中.并在下次启动R时自己主动 ...

  4. debian网络静态ip配置

    本配置适合于服务器上的静态ip配置,该方法简单可靠. 1 临时配置 ifconfig eth0 192.168.1.97 netmask 255.255.255.0 broadcast 192.168 ...

  5. Modular_exponentiation模幂运算

    https://en.wikipedia.org/wiki/Modular_exponentiation 蒙哥马利(Montgomery)幂模运算是快速计算a^b%k的一种算法,是RSA加密算法的核心 ...

  6. 如何直接打开android系统的wifi设置页面，防止intent劫持

    在android的app开发中,经常会遇到需要跳转至系统设置页面的需求.但是当你使用以下代码时: 如 Intent intent =  new Intent(Settings.ACTION_WIFI_ ...

  7. luogu 3796 【模板】AC自动机（加强版）

    我太菜了 棒神%%% #include<iostream> #include<cstdio> #include<cmath> #include<cstdlib ...

  8. B1072 [SCOI2007]排列perm 状压dp

    很简单的状压dp,但是有一个事,就是...我数组开大了一点,然后每次memset就会T,然后开小就好了!!!震惊!以后小心点这个问题. 题干: Description 给一个数字串s和正整数d, 统计 ...

  9. 洛谷 P1083 [ NOIP 2012 ] 借教室 —— 线段树 / 二分差分数组

    题目:https://www.luogu.org/problemnew/show/P1083 当初不会线段树的时候做这道题...对差分什么不太熟练,一直没A,放在那儿不管... 现在去看,线段树就直接 ...

  10. ubuntu下如何查看和设置分辨率 （转载）

    转自:http://blog.csdn.net/jcgu/article/details/8650423 在ubuntu下可以使用xrandr来设置自己需要的分辨率.大致步骤如下: 1.使用xrand ...