注意事项：

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. Cx的治疗

    题目背景 「Cx的故事」众所周知,Cx是一个宇宙大犇.由于Cx在空中花园失足摔下,导致他那蕴含着无穷智慧的大脑受到了严重的损伤,许多的脑神经断裂.于是,Cx的wife(有么?)决定请巴比伦最好的医师治 ...

  2. win7下登入本機、域的正確方法

    win7的登入与以前的windows系统有所不同,如果win7的电脑已经被加入到域後,登入有两种类别: 1: 要登入到域,直接输入域用户账号和密码. 2:要登入到本机,则要输入计算机名\本机用户账号和 ...

  3. logistic regression教程1

    实现线性拟合 我们用python2.7实现上一篇的推导结果.请先安装python matplotlib包和numpy包. 具体代码如下: #!/usr/bin/env python #! -*- co ...

  4. php 把一个数组分成有n个元素的二维数组的算法

    一.第一种解法 <?php //把一个数组分成几个数组 //$arr 是数组 //$num 是数组的个数 function partition($arr,$num){ //数组的个数 $list ...

  5. LinearLayout （线性布局）的分析

    android提供了5中布局,线性布局,相对布局,帧布局.表格布局和绝对布局 线性和相对布局用的是最多的 以下要说的是线性布局 提到线性布局 一定要记住.它里面的全部组件一定不会重叠的, 切不会换行. ...

  6. 360p以上

    请选择200MB以内,360p以上,时长3秒到300秒的文件.(支持格式:mp4.3gp.avi.mov.m4v.mkv文件)

  7. tflearn alexnet iter 10

    他会自己下载数据: # -*- coding: utf-8 -*- """ AlexNet. Applying 'Alexnet' to Oxford's 17 Cate ...

  8. P2453 [SDOI2006]最短距离 dp

    自己想出来了!这个dp比较简单,而且转移也很简单,很自然,直接上代码就行了. 题干: 一种EDIT字母编辑器,它的功能是可以通过不同的变换操作可以把一个源串X [l..m]变换为新的目标串y[1..n ...

  9. element-ui table 页面加载时，动态渲染后台传过来的数据（springmvc）

    jsp页面 <%@ page contentType="text/html;charset=UTF-8" language="java" %> &l ...

  10. K8S之利用Label控制Pod位置

    首先介绍下什么是Label? Label是Kubernetes系列中一个核心概念.是一组绑定到K8s资源对象上的key/value对.同一个对象的labels属性的key必须唯一.label可以附加到 ...