Javascript 零散无序列表

我有一个无序的列表，我希望添加这样一个效果：当某个东西被添加到列表中时，它每次都会出现在屏幕上的一个随机位置。然而，由于它是列表中的文本，我不能让每个随机位置重叠。附加的文本将具有5秒的淡出计时器，因此一旦消息淡出，该空间将变为可用

这可能吗？如果是这样，下面是我正在使用的HTML：

<ul id="messagebox" >

</ul>

<div>

<input type="text" id="typetextbox" maxlength="120"  autocomplete="off" />

<button type="submit" id="submit" onblur="submit"> </button>


</div> 

下面是Javascript/jquery：

$(document).ready(function(){

  $('#typetextbox').keypress(function (e){
     if(e.keyCode == 13 ) $('#submit').click();
  });

  $('#submit').click(function(){
     var message = $('#typetextbox').val();
     if (message.replace(/ /g, ''))
       $('#messagebox').append(message + "<br/>");
     $("#typetextbox").val("");
  });
});

$（文档）.ready（函数（）{
$（'#typetextbox'）。按键（功能（e）{
如果（e.keyCode==13）$（“#提交”），单击（）；
});
$（“#提交”）。单击（函数（）{
var message=$（'#typetextbox'）.val（）；
if（message.replace（//g'，））
$（'#messagebox'）。追加（message+“
”）；
$（“#typetextbox”）.val（“”）；
});
});

如果没有，我可以做些什么来达到这个效果

---

谢谢大家

以下代码将起作用。检查此URL。这是预期的行为吗

$('#submit').click(function(){
    var message = $('#typetextbox').val();
    if (message.replace(/ /g, '')){
        var li = $('<li>');
        li.hide();
        li.text(message);
        $('#messagebox').append(li);     
        li.fadeIn('slow'); 
        //li.slideDown();
    $("#typetextbox").val("");
    }


});

$（“#提交”）。单击（函数（）{
var message=$（'#typetextbox'）.val（）；
if（message.replace（//g'，））{
var li=$（“
”）；
li.hide（）；
李.文本（信息）；
$（'#messagebox'）。追加（li）；
li.fadeIn（“慢”）；
//li.slideDown（）；
$（“#typetextbox”）.val（“”）；
}
});

以下代码将起作用。检查此URL。这是预期的行为吗

$('#submit').click(function(){
    var message = $('#typetextbox').val();
    if (message.replace(/ /g, '')){
        var li = $('<li>');
        li.hide();
        li.text(message);
        $('#messagebox').append(li);     
        li.fadeIn('slow'); 
        //li.slideDown();
    $("#typetextbox").val("");
    }


});

$（“#提交”）。单击（函数（）{
var message=$（'#typetextbox'）.val（）；
if（message.replace（//g'，））{
var li=$（“
”）；
li.hide（）；
李.文本（信息）；
$（'#messagebox'）。追加（li）；
li.fadeIn（“慢”）；
//li.slideDown（）；
$（“#typetextbox”）.val（“”）；
}
});

以下代码将起作用。检查此URL。这是预期的行为吗

$('#submit').click(function(){
    var message = $('#typetextbox').val();
    if (message.replace(/ /g, '')){
        var li = $('<li>');
        li.hide();
        li.text(message);
        $('#messagebox').append(li);     
        li.fadeIn('slow'); 
        //li.slideDown();
    $("#typetextbox").val("");
    }


});

$（“#提交”）。单击（函数（）{
var message=$（'#typetextbox'）.val（）；
if（message.replace（//g'，））{
var li=$（“
”）；
li.hide（）；
李.文本（信息）；
$（'#messagebox'）。追加（li）；
li.fadeIn（“慢”）；
//li.slideDown（）；
$（“#typetextbox”）.val（“”）；
}
});

以下代码将起作用。检查此URL。这是预期的行为吗

$('#submit').click(function(){
    var message = $('#typetextbox').val();
    if (message.replace(/ /g, '')){
        var li = $('<li>');
        li.hide();
        li.text(message);
        $('#messagebox').append(li);     
        li.fadeIn('slow'); 
        //li.slideDown();
    $("#typetextbox").val("");
    }


});

$（“#提交”）。单击（函数（）{
var message=$（'#typetextbox'）.val（）；
if（message.replace（//g'，））{
var li=$（“
”）；
li.hide（）；
李.文本（信息）；
$（'#messagebox'）。追加（li）；
li.fadeIn（“慢”）；
//li.slideDown（）；
$（“#typetextbox”）.val（“”）；
}
});

为了让列表项显示在随机位置上，应该将其CSS设置为

位置：绝对

，然后根据生成的随机值设置左侧和顶部

CSS

JavaScript

$(document).ready(function(){

  $('#typetextbox').keypress(function (e){
     if(e.keyCode == 13 ) $('#submit').click();
  });

  $('#submit').click(function(){
      var message = $('#typetextbox').val();
      if (message.replace(/ /g, '')){
          var positions = makeNewPosition();
          var el = $('<li>'+message+'</li>');
          el.attr('gridpos', positions[0].toString()+"x"+positions[1].toString())
          el.css('left', positions[1] * window.li_width);
          el.css('top', positions[0] * window.li_height);
          $('#messagebox').append(el);


          setTimeout(function() {
              el.fadeOut();
              var gridpos = el.attr('gridpos');
              delete window.grid[gridpos];
          }, 5000 );


      }
      $("#typetextbox").val("");
  });
});
window.grid = {};
window.li_height = 20;
window.li_width = 200;
function makeNewPosition(){

    // Get viewport dimensions (remove the dimension of the div)
    var h = Math.floor($(window).height()/window.li_height);
    var w = Math.floor($(window).width()/window.li_width);

    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);
    var gridpos = nh.toString() + "x" + nw.toString();
    if(typeof window.grid[gridpos] == 'undefined'){
        return [nh,nw];
    }else{
        //this could eventually run out of room, so make sure to clear the grid with delete window.grid[gridpos]; when it disappears from the screen.
        return makeNewPosition();
    }

}

$（文档）.ready（函数（）{
$（'#typetextbox'）。按键（功能（e）{
如果（e.keyCode==13）$（“#提交”），单击（）；
});
$（“#提交”）。单击（函数（）{
var message=$（'#typetextbox'）.val（）；
if（message.replace（//g'，））{
var positions=makeNewPosition（）；
变量el=$（“
”+消息+”
）；
el.attr（'gridpos'，位置[0]。toString（）+“x”+位置[1]。toString（））
立面css（'左'，位置[1]*窗口宽度）；
立面css（“顶部”，位置[0]*窗高）；
$（'#messagebox'）。追加（el）；
setTimeout（函数（）{
el.fadeOut（）；
var gridpos=el.attr（'gridpos'）；
删除window.grid[gridpos]；
}, 5000 );
}
$（“#typetextbox”）.val（“”）；
});
});
window.grid={}；
window.li_高度=20；
window.li_宽度=200；
函数makeNewPosition（）{
//获取视口尺寸（删除div的尺寸）
var h=数学地板（$（window.height（）/window.li\u height）；
var w=数学地板（$（window.width（）/window.li\u width）；
var nh=数学地板（数学随机（）*h）；
var nw=Math.floor（Math.random（）*w）；
var gridpos=nh.toString（）+“x”+nw.toString（）；
if（window.grid[gridpos]==‘未定义’）{
返回[nh，nw]；
}否则{
//这可能最终会耗尽空间，因此当网格从屏幕上消失时，请确保使用delete window.grid[gridpos]；清除网格。
返回makeNewPosition（）；
}
}

gridpos基于窗口的高度和宽度以及列表项声明的高度和宽度。

为了让列表项显示在随机位置上，应该将其CSS设置为

位置：绝对

，然后根据生成的随机值设置左侧和顶部

CSS

JavaScript

$(document).ready(function(){

  $('#typetextbox').keypress(function (e){
     if(e.keyCode == 13 ) $('#submit').click();
  });

  $('#submit').click(function(){
      var message = $('#typetextbox').val();
      if (message.replace(/ /g, '')){
          var positions = makeNewPosition();
          var el = $('<li>'+message+'</li>');
          el.attr('gridpos', positions[0].toString()+"x"+positions[1].toString())
          el.css('left', positions[1] * window.li_width);
          el.css('top', positions[0] * window.li_height);
          $('#messagebox').append(el);


          setTimeout(function() {
              el.fadeOut();
              var gridpos = el.attr('gridpos');
              delete window.grid[gridpos];
          }, 5000 );


      }
      $("#typetextbox").val("");
  });
});
window.grid = {};
window.li_height = 20;
window.li_width = 200;
function makeNewPosition(){

    // Get viewport dimensions (remove the dimension of the div)
    var h = Math.floor($(window).height()/window.li_height);
    var w = Math.floor($(window).width()/window.li_width);

    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);
    var gridpos = nh.toString() + "x" + nw.toString();
    if(typeof window.grid[gridpos] == 'undefined'){
        return [nh,nw];
    }else{
        //this could eventually run out of room, so make sure to clear the grid with delete window.grid[gridpos]; when it disappears from the screen.
        return makeNewPosition();
    }

}

$（文档）.ready（函数（）{
$（'#typetextbox'）。按键（功能（e）{
如果（e.keyCode==13）$（“#提交”），单击（）；
});
$（“#提交”）。单击（函数（）{
var message=$（'#typetextbox'）.val（）；
if（message.replace（//g'，））{
var positions=makeNewPosition（）；
变量el=$（“
”+消息+”
）；
el.attr（'gridpos'，位置[0]。toString（）+“x”+位置[1]。toString（））
立面css（'左'，位置[1]*窗口宽度）；
立面css（“顶部”，位置[0]*窗高）；
$（'#messagebox'）。追加（el）；
setTimeout（函数（）{
el.fadeOut（）；
var gridpos=el.attr（'gridpos'）；
删除window.grid[gridpos]；
}, 5000 );
}
$（“#typetextbox”）.val（“”）；
});
});
window.grid={}；
window.li_高度=20；
window.li_宽度=200；
函数makeNewPosition（）{
//获取视口尺寸（删除div的尺寸）
var h=数学地板（$（window.height（）/window.li\u height）；
var w=数学地板（$（window.width（）/window.li\u width）；
var nh=数学地板（数学随机（）*h）；
var nw=Math.floor（Math.random（）*w）；
var gridpos=nh.toString（）+“x”+nw.toString（）；
if（window.grid[gridpos]==‘未定义’）{
返回[nh，