注意事项：

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. [K/3Cloud] 表单python脚本使用QueryService的做法

    听说有些朋友想在表单里做自定义的界面数据处理,一般来说写个表单插件会很容易解决这类问题.但是鉴于C#插件开发的不便性和实施搭建开发环境的麻烦,在现场做C#开发可能会不太方便(没部署开发环境之类的问题) ...

  2. MYSQL中有关数据库的简单操作

    #创建数据库CREATE DATABASE day01; #查询所有数据库SHOW DATABASES; #查看某个数据库定义信息SHOW CREATE DATABASE day01; #查询正在使用 ...

  3. FLASH BACK

    overview of different flashback technologies flashback query(including flashback query, flashback ve ...

  4. SfM环境的搭建windows8.1+vs2010

    SfM即Structure form Motion,这个算法的实现,作者Noah Snavely给出了一个具体的实现. 目前最新下载https://github.com/snavely/bundler ...

  5. Username is not in the sudoers file. This incident will be reported

    type sudo adduser <username> sudo where username is the name of the user you want to add in th ...

  6. [Vue @Component] Dynamic Vue.js Components with the component element

    You can dynamically switch between components in a template by using the reserved <component>  ...

  7. 数据结构——算法之（027）（ 在O(1)时间内删除链表结点）

    [申明:本文仅限于自我归纳总结和相互交流,有纰漏还望各位指出. 联系邮箱:Mr_chenping@163.com] 题目:在O(1)时间内删除链表结点.且不知道链表头 题目分析: 1.把要删除节点的下 ...

  8. Oracle 闪回区满解决的方法

    闪回区满: OS: rm -rf [archivelog  autobackup  backupset  controlfile  flashback  onlinelog] eg : archive ...

  9. Oracle行转列，列转行，行列相互转换

    1.行转列 SELECT WM_CONCAT(COLUMN_NAME) COLUMN_NAME FROM USER_TAB_COLUMNS WHERE TABLE_NAME = 'T_CREATE_T ...

  10. linux常用命令---持续添加中...

    1.cp -r  源文件夹  目的文件夹   // -r 可递归所有子目录及文件 2.grep -r 查找内容 ./*    //递归查找当前目录下所有文件指定内容 3. 查看系统运行时间 who - ...