标签：
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 } 45 #list li:after 46 { 47 clear: both; 48 display: block; 49 content:""; 50 } 51 #list h2 52 { 53 padding: 0 10px; 54 background: #999; 55 height: 35px; 56 line-height: 35px; 57 margin: 10px 0; 58 } 59 #list h2:after 60 { 61 clear: both; 62 display: block; 63 content:""; 64 } 65 #list h2 a 66 { 67 float: right; 68 font-weight: bold; 69 text-decoration: none; 70 } 71 #list div 72 { 73 text-indent: 2em; 74 height:200px; 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‘)[0].value == "") { 104 alert(‘标题或者内容不能为空‘); 105 } else if ($(‘#texta‘)[0].value == "") { 106 alert(‘标题或者内容不能为空‘); 107 } else { 108 var str=‘<li><h2>‘+$(‘#inp‘).val()+‘<a href="javascript:;">X</a></h2><div>‘+$(‘#texta‘).val()+‘</div></li>‘; //创建一个li，为其添加内容，然后插入到ul中 109 $(‘#list‘).prepend(str); 110 $(‘#list li‘).eq(0).slideDown(); 111 $(‘#inp,#texta‘).val(‘‘); 112 $(‘#wenzi‘).html(‘200‘); 113 $(‘#inp‘).css(‘color‘,‘#ccc‘); 114 } 115 $(‘#list a‘).click(function () { 116 var i=$(this).index(); 117 $(this).parent().parent().slideUp(function () { 118 $(this).remove(); 119 }) 120 }) 121 }) 122 var time=null; 123 function xianzhi() {//右侧字数限制的函数 124 var length=$(‘#texta‘).val().length; 125 var len=200; 126 len=len-length; 127 if(len<0){ //判断字数是否超出范围 128 len=0; 129 $(‘#texta‘)[0].value().substring(0,200); 130 } 131 $(‘#wenzi‘).html(len); 132 } 133 $(‘#texta‘).focus(function () {//获取焦点时启动计时器 134 time=setInterval(xianzhi,100); 135 }) 136 $(‘#texta‘).blur(function () {//失去焦点时清除计时器 137 clearInterval(time); 138 }) 139 }) 140 </script> 141 </body> 142 </html>
标签：
原文地址：http://www.cnblogs.com/yoyoyoyoyoyo/p/5866101.html
