效果如下
<html> <head> <title></title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> </head> <body> <div class="container"> <div> <h4>在这里输入弹幕</h4> <input id ="danmu" type="" name=""> <button>发射</button> </div> <div class="show"> <div id="start"></div> </div> </div> <script type="text/javascript"> var dammuNum = 0; function create(msg){ dammuNum++; $('#start').append("<div id=""+dammuNum+"">"+msg+"</div>"); var top = Math.ceil(Math.random()*50); fun(dammuNum,900,top); } function fun(cla,n,top){ if(n>0){ n--; $("#"+cla).css({left:+n+"px",position:"absolute",top:""+top+"0px"}); setTimeout(fun,10,cla,n); }if(n==0){ $("#"+cla).remove(); } } $("button").click(function(){ create($("#danmu").val()); }); </script> </body> </html>