1 <!DOCTYPE html> 2 <!--suppress ALL --> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <style> 8 * 9 { 10 margin: 0; 11 padding: 0; 12 } 13 #wrap 14 { 15 width:500px; 16 margin: 50px auto; 17 padding: 20px; 18 background: #ccc; 19 } 20 #tit 21 { 22 width:440px; 23 height:30px; 24 } 25 #con textarea 26 { 27 width:438px; 28 height:200px; 29 } 30 #right 31 { 32 text-align: right; 33 margin-top: 10px; 34 } 35 #right button 36 { 37 width:70px; 38 height:35px; 39 margin: 10px 0; 40 } 41 #list 42 { 43 list-style: none; 44 word-break: break-all; 45 } 46 #list li:after 47 { 48 clear: both; 49 display: block; 50 content:""; 51 } 52 #list h2 53 { 54 padding: 0 10px; 55 background: #999; 56 height: 35px; 57 line-height: 35px; 58 margin: 10px 0; 59 } 60 #list h2:after 61 { 62 clear: both; 63 display: block; 64 content:""; 65 } 66 #list h2 a 67 { 68 float: right; 69 font-weight: bold; 70 text-decoration: none; 71 } 72 #list div 73 { 74 text-indent: 2em; 75 } 76 </style> 77 </head> 78 <body> 79 <div id="wrap"> 80 <div id="tit"> 81 <span>标题：</span> 82 <input type="text" value="" id="inp"> 83 </div> 84 <div id="con"> 85 <span>内容：</span> 86 <textarea name="" id="texta" cols="30" rows="10"></textarea> 87 </div> 88 <div id="right"> 89 <p>还可以输入<span id="wenzi">200</span>个字</p> 90 <button id="btn">发布</button> 91 </div> 92 <div id="show"> 93 <h2>发布内容</h2> 94 <ul id="list"> 95 96 </ul> 97 </div> 98 </div> 99 <script src="jquery-1.8.3.min.js"></script> 100 <script> 101 $(function () { 102 $('#btn').click(function () { 103 if ($('#inp').val()== ""||$('#texta').valueOf()=="") { 104 alert('标题或者内容不能为空'); 105 }else { 106 var str='<li style="display: none"><h2>'+$('#inp').val()+'<a href="javascript:;">X</a></h2><div>'+$('#texta').val()+'</div></li>'; //创建一个li，为其添加内容，然后插入到ul中 107 $('#list').prepend(str); 108 $('#list li').eq(0).slideDown(); 109 $('#inp,#texta').val(''); 110 $('#wenzi').html(200); 111 $('#inp').css('color','#ccc'); 112 } 113 $('#list a').click(function () { 114 var i=$(this).index(); 115 $(this).parent().parent().slideUp(function () { 116 $(this).remove(); 117 }) 118 }) 119 }) 120 var time=null; 121 function xianzhi() {//右侧字数限制的函数 122 var length=$('#texta').val().length; 123 var len=200; 124 len=len-length; 125 if(len<=0){ //判断字数是否超出范围 126 len=0; 127 $('#texta').val($('#texta').val().substr(0,200)); 128 alert("stop!") 129 } 130 $('#wenzi').html(len); 131 } 132 $('#texta').focus(function () {//获取焦点时启动计时器 133 time=setInterval(xianzhi,50); 134 }) 135 $('#texta').blur(function () {//失去焦点时清除计时器 136 clearInterval(time); 137 }) 138 }) 139 </script> 140 </body> 141 </html>