演示图：
完成图：
微博演示代码如下：
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <style> 7 .dvOut {border:1px solid black; 8 position:absolute; 9 left:86px;465px; 10 top:110px;height:156px; 11 } 12 .txtAra {border:1px black solid; 13 left:87px;427px; 14 top:112px;height:66px; 15 } 16 .aa { 17 } 18 .dvTopic,.dvFriend,.dvFace,.dvPhoto,.dvVideo {22px; 19 top:204px;height:15px; 20 } 21 .dvTopic { 22 left:120px; 23 } 24 .dvFriend { 25 left:161px; 26 } 27 .dvFace { 28 left:204px; 29 } 30 .dvPhoto { 31 left:244px; 32 } 33 .dvVideo { 34 left:286px; 35 } 36 .dvShowCharNum {left:422px;top:220px; 37 100px;height:18px; 38 } 39 .btnSend {left:444px;top:214px; 40 94px;height:27px; 41 background-color:#b6ff00; 42 } 43 </style> 44 <script src="jquery-1.11.2.js"></script> 45 <script type="text/javascript"> 46 //发送按钮高亮显示 47 $(function () { 48 $('.dvSend .btnSend').click(function () { 49 $(this).css('backgroundPosition', '0 -195px').css('backgroundColor', 'red'); 50 }).mouseout(function () { 51 $(this).css('backgroundPosition', '-117px -165px').css('backgroundColor', '#b6ff00'); 52 }); 53 }); 54 </script> 55 <script type="text/javascript"> 56 //显示剩余多少字符 57 $(function () { 58 $('.dvTxt .txtAra').change(function () { 59 var len = 140 - $(this).val().length; 60 if (len >= 0) { 61 $('.sp1').html('还剩<em>' + len + '</em>个字符'); 62 } else { 63 $('.dvShowCharNum .sp1').html('超出<font color="red"><em>' + Math.abs(len) + '</em></font>个字符'); 64 } 65 }); 66 var interId = setInterval(function () { 67 $('.dvTxt .txtAra').change(); 68 }, 1000) 69 }); 70 </script> 71 <script type="text/javascript"> 72 //显示话题 73 $(function () { 74 $('.dvTopic a').click(function () { 75 $(this).css({ 'backgroundPosition': '0 -195px', 'cursor': 'pointer' }); 76 }).click(function () { 77 if ($('.dvTxt .txtAra').val().length <= 0) { 78 $('.dvTxt .txtAra').val('#显示话题标题#'); //selectRange(1,7) 高亮显示 79 } 80 }).mouseout(function () { 81 $(this).css('backgroundPosition', '-117px -165px'); 82 }); 83 }); 84 </script> 85 <script type="text/javascript"> 86 //显示朋友 87 $(function () { 88 $('.dvFriend a').click(function () { 89 if ($('#dvF').length > 0) { 90 $('#dvF').remove(); 91 } 92 var dvFObj = $('<div id="dvF" style="100px;border:1px solid black;background-color:green;position:absolute;"></div>').appendTo($('body')); 93 var dvX = $(this).offset().left + 'px'; 94 var dvY = $(this).offset().top + $(this).height() + 'px'; 95 dvFObj.css({ 'left': dvX, "top": dvY }); 96 var spp1Obj = $('<span id="spp1" style="background-color:gray;cursor:pointer;float:right;">关闭</span>').click(function () { 97 $(this).parent().remove(); 98 }).appendTo('#dvF'); 99 var friends = ['涂函', '鞠婧祎', '朴智妍', '朴妮麦', '陈淑君', '刘红霞', '易倾城', '唯我独尊']; 100 var uu1Obj = $('<ul id="uu1" style="list-style-type:none;clear:both;margin:0px;padding:0px;"></ul>').appendTo(dvFObj); 101 for (var i = 0; i < friends.length; i++) { 102 var li1Obj = $('<li style="cursor:pointer;font-color:yellow;">@' + friends[i] + '</li>').click(function () { 103 if ($('.dvTxt .txtAra').val() == '#显示话题标题#') { 104 $('.dvTxt .txtAra').val($(this).text()); 105 } else { 106 $('.dvTxt .txtAra').val($('.dvTxt .txtAra').val() + $(this).text()); 107 } 108 }).appendTo(uu1Obj) 109 } 110 }); 111 }); 112 </script> 113 <script type="text/javascript"> 114 //显示表情 115 $(function () { 116 var dict = { 117 "00.gif": "00", "01.gif": "01", "02.gif": "02", "03.gif": "03", "04.gif": "04", "05.gif": "05", "06.gif": "06", "07.gif": "07", "08.gif": "08", "09.gif": "09", 118 "10.gif": "10", "11.gif": "11", "12.gif": "12", "13.gif": "13", "14.gif": "14", "15.gif": "15", "16.gif": "16", "17.gif": "17", "18.gif": "18", "19.gif": "19", 119 "20.gif": "20", "21.gif": "21", "22.gif": "22", "23.gif": "23", "24.gif": "24", "25.gif": "25", "26.gif": "26", "27.gif": "27", "28.gif": "28", "29.gif": "29", 120 "30.gif": "30", "31.gif": "31", "32.gif": "32", "33.gif": "33", "34.gif": "34", "35.gif": "35", "36.gif": "36", "37.gif": "37", "38.gif": "38", "39.gif": "39", 121 "40.gif": "40", "41.gif": "41", "42.gif": "42", "43.gif": "43", "44.gif": "44", "45.gif": "45", "46.gif": "46" 122 }; 123 $('.dvFace a').click(function () { 124 if ($('#dvFaceImg').length > 0) { 125 $('#dvFaceImg').remove(); 126 } 127 var dvFaceImg = $('<div id="dvFaceImg" style="300px;position:absolute;background-color:#B56;border:1px solid blue;"></div>').appendTo('body'); 128 var dvXX = $(this).offset().left + 'px'; 129 var dvYY = $(this).offset().top + $(this).height() + 'px'; 130 dvFaceImg.css({"left":dvXX,"top":dvYY}); 131 $('<span id="spShowFace" style="float:left">表情<span>').appendTo(dvFaceImg); 132 $('<span id="spCloseFace" style="float:right;background-color:gray;cursor:pointer;">关闭</span>').click(function () { 133 $(this).parent().remove(); 134 }).appendTo(dvFaceImg); 135 var dvFaceImage = $('<div id="dvFaceImage" style="clear:both;"></div>').appendTo(dvFaceImg); 136 for (var key in dict) { 137 $('<img src="/face/' + key + '" title="' + dict[key] + '" style="cursor:pointer;"></img>').click(function () { 138 if ($('.dvTxt .txtAra').val() == "#显示话题标题#") { 139 $('.dvTxt .txtAra').val('[' + $(this).attr('title') + ']'); 140 } else { 141 $('.dvTxt .txtAra').val($('.dvTxt .txtAra').val() + '[' + $(this).attr('title') + ']'); 142 } 143 }).appendTo(dvFaceImage); 144 } 145 }); 146 }); 147 </script> 148 </head> 149 <body style="background-color:#0094ff"> 150 <div> 151 <div class="dvOut"> 152 <div> 153 <label><strong>夏天来了，你懂得......</strong></label> 154 </div> 155 <div class="dvTxt"> 156 <textarea class="txtAra"></textarea> 157 </div> 158 <span class="dvTopic"> 159 <a class="aa" href="javascript:void(0)">话题</a> 160 </span> 161 <span class="dvFriend"> 162 <a class="aa" href="javascript:void(0)">朋友</a> 163 </span> 164 <span class="dvFace"> 165 <a class="aa" href="javascript:void(0)">表情</a> 166 </span> 167 <span class="dvPhoto"> 168 <a class="aa" href="javascript:void(0)">照片</a> 169 </span> 170 <span class="dvVideo"> 171 <a class="aa" href="javascript:void(0)">视频</a> 172 </span> 173 <div class="dvShowCharNum"> 174 <span class="sp1"></span> 175 </div> 176 <div class="dvSend"> 177 <input class="btnSend" type="button" value="广播" /> 178 </div> 179 </div> 180 </div> 181 </body> 182 </html>