視頻網站開發：JavaWeb做一個帶自定義小表情的評論功能

        前幾天一直在做視頻網站的評論功能，如今雖然說做的不是很好，但也算是挺滿意的實現了。自我感覺做的最好的最有花樣的就是爲評論功能添加了小表情評論。見如下效果圖

1.首先第一步，收集你想要使用的小表情，我因爲比較喜歡QQ的嗷小喵表情，所以就一個一個的將它們添加至工程。當然後來又添加了小黃臉表情。

2.接下來，需要通過程序將其顯示在網頁中，這裏我使用的是Java結合HTML和css以及js來實現的，其中Java主要是定義表情名的字符數組以供循環顯示錶情；css控制小表情的樣式，js來實現表情的隨意顯示與隱藏，以及點擊表情後，評論文本框自動輸入指定文本的功能。

<!-- 實現評論功能-開始 -->
       <form action="/SendCom" method="post">
       		<textarea rows="5" id="comme" cols="170" name="comment" placeholder="一起評論吧"></textarea>
	       <br><img alt="嗷大喵表情" title="嗷大喵表情" style="width: 18px;height: 18px" src="/images/util/face-2x.png" onmousedown="imgAo()">
	       <img alt="小黃臉表情" title="小黃臉表情" style="width: 18px;height: 18px" src="/images/huang/wx.gif" onmouseover="closeImgHu()" onmousedown="openImgHu()">
	       <img alt="" style="width: 18px;height: 18px" src="/images/util/image-2x.png" onclick="openFile()">
	       	<font size="-2" color="gray">鼠標放上顯示錶情包，點擊隱藏表情包(評論發表後將刷新進入該界面，請記準你看到哪個地方了再發布)</font>
	       <!-- 將視頻主頁鏈接以及發表評論者一併通過表單傳遞以存入評論表中，style的display設爲none -->
	       <input type="text" style="display: none" name="url" value="<%=url%>"> 
	       <input type="text" style="display: none" name="nick" value="<%=nick%>"> 
	       <input type="submit" value="發表" class="fabiao">
       </form>
       <div class="ao" id="ao" style="display: none;">
       		<%
       		String ao[]={"baibai","bishi","caidao","cangsang","chanle","chijing","dengyan"
       				,"dese","deyi","guzhang","haixiu","haode","jingdaile","jingjingkan","keai"
       				,"kun","lianhong","nidongde","qidai","qinqin","shangxin","shengqi"
       				,"shuai","sikao","tongxin","touxiao","wabikong","weixiao","wulian"
       				,"wuyu","xiaoku","xiaozheku","xihuan","yaobai","yihuo","zan"
       				,"zhayan","zhenjing","zhenjingku","zhuakuang"};
       		for(int i=0;i<ao.length;i++){
       			if(i%10==0){
       				out.write("<br>");
       			}
       			%>
       			<img alt="" src="/images/aodamiao/<%=ao[i]%>.gif" onclick="appendValueAo('<%=ao[i]%>')">
       			<%
       		}
       		%>
       </div>
       <div id="huang" class="ao" style="display: none;">
	       <%
	       		String hu[]={"wx","pz","se","fd","dy","ll","hx","bz","shui","dk","gg","fn"
	    		   ,"tp","cy","jy","ng","ku","lh","zk","tu","tx","ka","by","am"
	    		   ,"jie","kun","jk","liuh","hanx","db","fend","zm","yw","xu","yun","zm"
	    		   ,"shuai","kl","qiao","zj","ch","kb","gz","qd","huaix","zhh","yhh","hq"
	    		   };
	       		for(int i=0;i<hu.length;i++){
	       			if(i%12==0){
	       				out.write("<br>");
	       			}
	       			%>
	       			<img alt="" src="/images/huang/<%=hu[i]%>.gif" onclick="appendValueHu('<%=hu[i]%>')">
	       			<%
	       		}
	       %>
       </div>
       <script type="text/javascript">
       //onmousedown--鼠標按下。onmouseover--鼠標靠近
       		function imgAo(){
    	    	var d=document.getElementById("ao").style.display;
       			if(d=="none")//必須用==
       			{//不在的時候點擊讓其出現且讓“huang”消失
       				document.getElementById("ao").style.display="block";
           			document.getElementById("huang").style.display="none";
       			}else{//在的時候點擊讓其消失
       				document.getElementById("ao").style.display="none";
       			}
       		}
       		//按表情，改變textarea中內容
       		function appendValueAo(v){
       			var value=document.getElementById("comme");
       			//value.value=value.value+"<img alt='"+v+"' src='/images/aodamiao/"+v+".gif'>";
       			//存入數據庫的不是路徑，需對評論內容拆分後加路徑再顯示
       			value.value=value.value+"【"+v+"】";
       		}
       		function openImgHu(){
       			document.getElementById("huang").style.display="block";
       			document.getElementById("ao").style.display="none";
       		}
       		function closeImgHu(){
       			document.getElementById("huang").style.display="none";
       		}
       		
       		function appendValueHu(v){
       			var value=document.getElementById("comme");
       			value.value=value.value+"《"+v+"》";
       		}
       </script>
        <!-- 實現評論功能-結束 -->

3.根據以上的程序，結合數據庫就可以將帶有小表情的評論存儲至數據庫了，接下來是加載評論，由於爲了減輕數據庫存儲量的問題，在上面代碼中，存儲至數據庫的並不是小表情的完整路徑，而是自己定義的特殊字符裏面囊括了小表情的名稱，所以在加載評論的時候，需要用Java的String類來將評論進行加工，如下所示

4.最後，就可以看到你評論的包括小表情的內容了

 

歡迎大家訪問我的視頻網站553影院，註冊並登陸後即可擁有發表評論，記錄自己的播放，搜索，登陸記錄以及收藏視頻等功能。我在553影院等你

本篇博文已同步至本人個人博客網站，歡迎訪問