效果如下：

代码如下：

！DOCTYPE html html head meta charset=' UTF-8 ' title/title style * { margin 33600；划水：0;} # wrap { width:800px高度：550 px背景# E9E8E8margin:0 auto位置：相对；} #内容{宽度：750像素高度：400 px背景# fffmargin :0 auto order-radius : 15px；位置：相对；飞越：隐藏；}输入input:nth第(1)种类型{宽度：250像素高度：30 px余量余量：20px 0 0 200px}输入： th第(2)种类型{ width :60 pxh three :33 px }。p { height:30px线高：30 px位置：绝对；top :0 left :770 pxfont-weight :900；font-size : 30px}/style/head body div id=' wrap ' div id=' content '/div输入类型='text' id='txt '占位符='一起来吐槽吧~'/input type='button' value='发送id=' BTN '/div脚本src=' http :http://libs。百度。com/jquery/1。9 .1/jquery。js/script script $(function(){ $(' # BTN ')).单击(函数(){ var $value=$('#txt ')).val()；var $ p=$(' p/p ')；$ p . addCLaSS(' p ')；$ p . text($ value)；$('#txt ').val(" ")；//点击过后设置文本框内容为空var _ top=数学。地板(数学。random()*($(“# content”).内部高度()-30))；var _ font size=16数学。地板(数学。random()* 10)；var _ RGB=' RGB(' Math . floor(math . random()* 255)'，' math。地板(数学。random()* 255)'，' math。地板(数学。random()* 255)')'；$p.css({'top':_top，' font-size':_fontsize，' color ' : _ RGB })；$('#content ').追加($ p)；var _ timer=数学。天花板(数学。random()* 4000)3000；$p.stop().animate({'left':'-500px'}，_timer，function(){ $(this).移除();});});})/脚本/正文/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！