1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <style> 8 *{ 9 margin: 0;10 padding: 0;11 }12 html,body{13 width: 100%;14 height: 100%;15 }16 p{17 display: inline-block;18 }19 20 span{21 position: absolute;22 }23 .boxDom{24 width: 100%;25 height: 100%;26 position: relative;27 overflow: hidden;28 }29 .idDom{30 width: 100%;31 height: 20%;32 position: fixed;33 bottom: 0;34 background-color: #ccc;35 }36 .content{37 position: absolute;38 top:0;39 right: 0;40 left:0;41 bottom:0;42 width: 30%;43 height: 20%;44 margin: auto;45 }46 47 48 </style>49 50 51 </head>52 <body>53 <div class="boxDom">54 <div class="idDom">55 <div class="content">56 <p>弹幕内容</p>57 <input type="text">58 <button>launch</button>59 </div>60 </div>61 </div>62 63 64 65 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>66 <script>67 68 $(function () {69 70 var colors = ["#000","#f00","#0f0","#00f","#f1f","#f10215","#f40","#ccc","#ff7"];71 72 $("button").click(function () {73 var text = $("input[type=\"text\"]").val();74 var Y = parseInt(Math.random() * ($(".boxDom").height() - $(".idDom").height()));75 var selectedColor = colors[parseInt(Math.random() * colors.length)];76 77 //开始创建弹幕78 $("<span></span>").text(text).css("color",selectedColor).css("left","-10px").css("top",Y).animate({left:$(window).width()},3000,"linear",function () {79 $(this).remove();80 }).prependTo(".boxDom");81 82 $("input[type=\"text\"]").val("");83 84 });85 86 87 $("input[type=\"text\"]").keyup(function (e) {88 if(e.keyCode==13){89 $("button").click();90 }91 });92 93 94 });95 </script>96 97 98 </body>99 </html>