视频网站开发：JavaWeb做一个带自定义小表情的评论功能

电玩女神 2022-05-11 13:18 302阅读 0赞

前几天一直在做视频网站的评论功能，如今虽然说做的不是很好，但也算是挺满意的实现了。自我感觉做的最好的最有花样的就是为评论功能添加了小表情评论。见如下效果图

![00570.jpg][]

1.首先第一步，收集你想要使用的小表情，我因为比较喜欢QQ的嗷小喵表情，所以就一个一个的将它们添加至工程。当然后来又添加了小黄脸表情。

![00571.jpg][]

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>
    	       
    	       <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类来将评论进行加工，如下所示![00575.jpg][]

4.最后，就可以看到你评论的包括小表情的内容了

![00576.jpg][]

欢迎大家访问我的视频网站[553影院][553]，注册并登陆后即可拥有发表评论，记录自己的播放，搜索，登陆记录以及收藏视频等功能。我在553影院等你![haixiu.gif][]

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

[00570.jpg]: http://www.longqcloud.cn/images/upload/00570.jpg
[00571.jpg]: http://www.longqcloud.cn/images/upload/00571.jpg
[00575.jpg]: http://www.longqcloud.cn/images/upload/00575.jpg
[00576.jpg]: http://www.longqcloud.cn/images/upload/00576.jpg
[553]: http://www.zy52113.com/
[haixiu.gif]: /images/20220505/28186e5817164604bfafbd882de09f9f.png
[Link 1]: http://www.longqcloud.cn