视频网站开发：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影院等你

本篇博文已同步至本人个人博客网站，欢迎访问