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>
