JS祝福墙小案例

最新推荐文章于 2022-10-25 19:34:47 发布

摇摆小仙

最新推荐文章于 2022-10-25 19:34:47 发布

阅读量1k

点赞数

分类专栏： Web - API JavaScript

本文链接：https://blog.csdn.net/weixin_44827421/article/details/90303157

版权

JavaScript 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

Web - API

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: url("images/bg.gif");
            font: 12px "simsun";
        }

        .content {
            width: 960px;
            height: 627px;
            margin: 0 auto;
            background: url("images/content_bg.jpg");
            position: relative;
        }

        .clearfix {
            *zoom: 1;
        }

        .clearfix:before,
        .clearfix:after {
            content: '';
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .tip {
            width: 227px;
            position: absolute;
            top: 100px;
            left: 200px;
        }

        .tip-h {
            padding-top: 50px;
            background: url("images/tip1_h.gif") no-repeat;
            cursor: default;
        }

        .text {
            float: left;
            padding-left: 10px;
        }

        .close {
            float: right;
            margin-right: 10px;
        }

        .tip-m {
            /* 最小高度，内容如果比他小，会就是用最小高度，内容比他大就内容实际的高度 */
            min-height: 40px;
            padding: 0 10px;
            padding-top: 10px;
            background: url("images/tip1_c.gif");
        }

        .tip-f {
            height: 53px;
            background: url("images/tip1_f.gif");
            padding-top: 20px;
        }

        .icon {
            float: left;
            padding-left: 10px;
        }

        .name {
            float: right;
            padding-right: 10px;
        }
    </style>
</head>

<body>
    <div class="content" id="content">

        <!-- <div class="tip" id="tip">
                    <div class="tip-h clearfix" title="双击关闭纸条">
                        <div class="text">第[49568]条 2019-04-16 22:51:52</div>
                        <div class="close" title="关闭纸条">x</div>
                    </div>
                    <div class="tip-m">这是一个寂寞的天，下着有些猥琐的雨</div>
                    <div class="tip-f clearfix">
                        <div class="icon">
                            <img src="images/bpic_1.gif" alt="" />
                        </div>
                        <div class="name">群姐</div>
                    </div>
                </div> -->

    </div>

    <script src="../common.js"></script>

    <script>
        var messages = [
            { "id": 1, "name": "张学友", "content": "刘德华说的对", "time": "2017-12-26 00:00:00" },
            { "id": 2, "name": "刘德华", "content": "周林林比林利群帅", "time": "2017-12-25 12:40:00" },
            { "id": 3, "name": "郭富城", "content": "我认同张学友说的", "time": "2017-12-25 12:45:00" },
            { "id": 4, "name": "林小裙", "content": "把朋友家厕所拉堵了 不敢出去 掏了半小时了都", "time": "2017-12-24 12:40:00" },
            { "id": 5, "name": "周四木", "content": "师者，所以传道受业解惑也。", "time": "2016-02-22 12:40:00" },
            { "id": 6, "name": "紫霞", "content": "至尊宝，等我", "time": "2017-12-23 09:30:00" },
            { "id": 7, "name": "孙悟空", "content": "吃俺老孙一棒！", "time": "2017-12-23 09:30:00" },
            { "id": 8, "name": "某某", "content": "旋转，跳跃，我不停歇…………舞娘的喜悲没人看见", "time": "2017-12-26 01:30:00" },
            { "id": 9, "name": "小老弟", "content": "我大哥坐我前面", "time": "2019-05-09 20:30:00" }
        ];

        // 遍历messages,添加对应的盒子
        for (var i = 0; i < messages.length; i++) {

            //获取两个随机数
            var x = parseInt(Math.random() * (960 - 227 + 1));
            var y = parseInt(Math.random() * (627 - 187 + 1));

            //创建一个元素,把数组的内容放进去
            var div = document.createElement('div');
            div.className = 'tip';
            div.innerHTML = '<div class="tip-h clearfix" ondblclick = "this.parentNode.style.display = \'none\'" title="双击关闭纸条">' +
                '<div class="text">第['+messages[i].id+']条 '+messages[i].time+'</div>' +
                '<div class="close" title="关闭纸条" onclick= "this.parentNode.parentNode.style.display = \'none\'">x</div>' +
                ' </div>' +
                '<div class="tip-m">'+messages[i].content+'</div>' +
                '<div class="tip-f clearfix">' +
                '<div class="icon">' +
                '<img src="images/bpic_1.gif" alt="" />' +
                '</div>' +
                '<div class="name">'+messages[i].name+'</div>' +
                '</div>';

            div.style.left = x + 'px';
            div.style.top = y + 'px';

            // 追加到content中
            my$('content').appendChild(div);

            // document.querySelector('.tip-h').ondblclick = function () {
            //     this.parentNode.style.display = 'none';
            // }

            // 点到谁谁的层级就加最高
            div.onclick = function () {
                this.style.zIndex++;
            }
        }


    </script>
</body>

</html>

我直接在for循环中做完了所有的事情,可以看到,对于tip-hd的点击事件,一开始我没有采用行内样式去写,我的想法是,每次循环创建div的时候,找到div中的头部添加点击事件,听起来也是没有毛病,但是执行起来却不行,只有一个div可以点击关闭.

为什么呢? 应该是和浏览器的渲染机制有关系,div的innerHTML这一块可能需要很长的时间的渲染,而代码继续往下走,如果div的头部还没有渲染完成,点击事件就会不起作用. 当然这只是一种合理的推测.更深层次的原因日后如果有了深入的了解会及时更新.

我们可以通过在行内注册事件,这样就有效了,事件处理函数可以不用写在行内.

另外,可以看到,我直接给了div点击事件没有什么问题,因为div只需要创建并追加这两步就OK,之后对div进行一系列的操作它都会生效,

摇摆小仙

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
JS祝福墙小案例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...
复制链接

扫一扫