纯js写的祝愿墙

来源:https://www.sucaihuo.com/js/1858.html 2017-05-02 16:14浏览(862) 收藏

这是一款纯js写的祝愿墙,可以做留言等等,每次刷新都会随机到不同的位置,循环生成div标签,然后为innerHTML属性添加内容。
纯js写的祝愿墙
分类:其它特效 > 动画效果 难易:初级
查看演示 下载资源 下载积分: 20 积分

但个文件不需要调用其他文件,:模拟数据库获取信息,然后在页面上生成数组的长度个tip,然后分别问起内容进行修改。点击内容,提高层级;点击关闭按钮,删除tip标签;双击顶部,删除标签.....模拟数据库获取信息,然后在页面上生成数组的长度个tip,然后分别问起内容进行修改。

var content = document.getElementById("content");

        //循环生成div标签,然后为innerHTML属性添加内容
        for(var i=0;i<messages.length;i++){
            //生成新标签
            var newDiv = document.createElement("div");
            //绑定类名和ID
            newDiv.className = "tip1";
            newDiv.id = "tip"+messages[i].id;
            //改变位置
            var topValue = parseInt(Math.random()*400);
            var leftValue = parseInt(Math.random()*700);
            newDiv.style.top = topValue+"px";
            newDiv.style.left = leftValue+"px";
            //赋值内容
            newDiv.innerHTML = '<div class="tip_h" title="双击关闭纸条">'+
                                        '<div class="num">第[49568]条 '+messages[i].time+'</div>'+
                                        '<div class="close" title="关闭纸条" >×</div>'+
                                        '<div class="clr"></div>'+
                                '</div>'+
                                '<div class="tip_c">'+
                                    messages[i].content+
                                 '</div>'+
                                '<div class="tip_f">'+
                                    '<div class="icon">'+
                                    '<img src="images/bpic_1.gif" alt="" title="">'+
                                '</div>'+
                                '<div class="name">'+messages[i].name+'</div>'+
                                    '<div class="clr"></div>'+
                                '</div>';
            //把新创建的元素放入content里面
            content.appendChild(newDiv);
标签: 留言祝愿墙
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2