Question

我正在尝试创建一个小脚本，在触发时会显示带有文本的div（该位有效）。当它被触发时，这些文本框需要在特定空间的容器中，这是一个容器。

这是我到目前为止所做的：

       <script>
        var socket = io();
        followerName = {};
        player           = {};
        answer       = {};
               var arrAnswers = ["rngesus", "lorgasm", "nintendisco", "samurai", "bigbang"];

        //Socket Setups - These allow me to use functions below
        socket.on('follow', function (followerName) {
                showName(followerName);
                console.log('showdiv');
                //alert('New follower: ' + followerName);
        });
        $(document).ready(function(){
                socket.on('hello', function (answer) {
                        console.log('hello?: ' + answer);
                        var div = document.createElement("div");
                        var random = Math.floor((Math.random() * 100) + 1);
                        div.setAttribute("id", "fade"+random);
                        div.style.margin = Math.floor((Math.random() * 400) + 1) + "px";
                        div.style.zIndex = Math.floor((Math.random() * 400) + 1);
                        div.style.width = "100px";
                        div.style.height = "100px";
                        div.style.background = "red";
                        div.style.color = "white";
                        div.innerHTML = "Hello";
                        document.body.appendChild(div);
                        $("#fade"+random).delay(3000).fadeOut("slow"); //Fadeout
                });
         });


        //LOCAL FUNCTIONS
        function showName(Name) {
                document.getElementById("name").innerHTML = Name + " just followed.";
        }

</script>
 </head>
 <body>
 </body>

这个想法是，zIndex将允许文本出现在另一个上面然后它会淡出，并且可以在顶部创建另一个div。 div本身是动态制作的（它们使用随机标签使它们成为唯一的。）

目前，他们都是在上一个div的下面创建的。如何制作它以便它们都在容器的一般区域（在这种情况下是身体）

Answer 1

淡出后删除div，它们在淡出后仍占用空间。

var req = http.request({
  method: 'GET',
  // Add your request hostname, path, etc. here
  responseType: 'arraybuffer'
}, function(res){
  var tarExtractor = tar.extract();

  res.on('data', function (chunk) {
    tarExtractor.write(new Buffer(chunk));
  });
  res.on('end', tarExtractor.end.bind(tarExtractor));
  res.on('error', function (error) {
    console.log(error);
  });

  tarExtractor.on('entry', function(header, stream, callback) {
     console.log("File found " + header.name);
     stream.on('end', function() {
       console.log("<<EOF>>");
       callback();
     })
     stream.resume(); // This won't be necessary once you do something with the data
   })

  .on('finish', function(){
     console.log("All files parsed");
   });
});

如果您需要再次显示它们并且无法删除它们，您可以使div绝对定位，使它们不在文档的流程中。

JS - 在可以重叠的有限空间中创建div标签

1 个答案: