发布留言--JQ版 

  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>

 

posted @ 2016-09-12 20:16  舍近求猿  阅读(181)  评论(0)    收藏  举报