css
<style> body { text-align: center } div { width: 600px; height: 300px; border: 1px solid; overflow: hidden; position: relative; left: 450px; } p{ width: 600px; height: 300px; margin: auto; } li { list-style: none; width:200px; height:30px; line-height:30px; overflow:hidden } </style>html
<body> <h2>点击发送弹幕</h2> <div><p></p></div> 昵称：<input type="text" placeholder="请输入昵称"><br /> <span>您还可以输入<i>10</i>个字</span><br />留言： <input type="text" placeholder="请输入留言内容"><br /> <input type="radio" value="12px" name="size" checked="checked" /><label>12px</label> <input type="radio" value="24px" name="size" /><label>24px</label> <input type="radio" value="36px" name="size" /><label>36px</label><br /> <input type="radio" value="red" name="color" checked="checked" /><label>red</label> <input type="radio" value="green" name="color" /><label>green</label> <input type="radio" value="blue" name="color" /><label>blue</label> <input type="button" value="发表"> </body>script
<script> $(function() { //字个数 $("input:text:last").keyup(function() { if($("input:text:last").val().length >= 10) { $("input:text:last").val($("input:text:last").val().substring(0, 10)); num = 0; } $("i").text(10 - $("input:text:last").val().length); }) $("input:button").click(function() { var $size = $("input:radio:checked").val(); //获取字体 var $color = $("input:radio:checked:last").val(); //获取颜色 if($("input:text:first").val() == "" || $("input:text:last").val() == "") { alert("请填写完整"); } else { var $name = $("input:text:first").val(); var $ly = $("input:text:last").val(); $("input:text:first").val(""); $("input:text:last").val(""); $("i").text(10); //重置字数 var result = $name + ":" + $ly; var newli = $('<li>' + result + '</li>'); $("p").prepend(newli); $("li:first").css("color", $color); //改变当前节点的颜色 $("li:first").css("font-size", $size); //改变当前节点的字体大小 function play() {//弹幕 var randleft = $('div').width(); var randtop = Math.random() * 300; console.log(randleft) newli.css({ left: randleft, top: randtop, position: 'absolute', }) .animate({ left: -600 + 'px' }, 7000, function() { $(this).remove(); }) .appendTo('p') } play(); } }); }); </script>