首页 > 代码库 > 发布留言--JQ版
发布留言--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 } 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>
发布留言--JQ版
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。