添加表情的代码

最新推荐文章于 2021-06-14 14:43:21 发布

mgtts

最新推荐文章于 2021-06-14 14:43:21 发布

阅读量169

点赞数

分类专栏： .NET 文章标签： HP ASP 应用服务器 XHTML HTML

.NET 专栏收录该内容

52 篇文章 0 订阅

订阅专栏

先在网上找到附件中的素材和部分源码，在稍加改造即可应用于评论框或者留言框旁边

下面代码和网上下载的素材是不一样的，素材中的是html控件，而下面则改成了服务器控件（为了能在后台获取文本框的值），先上代码，改动说明下面再说：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test2.aspx.cs" Inherits="common_test2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
	创建时间：08/25/2010 22:07:24
	说明：
-->
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
</head>
<body>
    <form id="form1" runat="server">


<div class="team_l">
<asp:TextBox ID="txtname" runat="server" Height="106px" TextMode="MultiLine"
        Width="182px" οnkeydοwn=gbcount(this.form.gb_word,this.form.total,this.form.used,this.form.remain); οnkeyup=gbcount(this.form.gb_word,this.form.total,this.form.used,this.form.remain);></asp:TextBox>
<br />
<div class="team_r" style="width:380px">
  <p><img src="../images/1.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[-_-] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/2.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[@o@] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/3.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[-|-] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/4.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[o_o] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/5.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[ToT] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/6.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[*_*] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/7.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[-x-] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/8.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[-_-zz] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/9.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[t_t] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/10.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[-_-!] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/11.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[:,] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/12.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[:P] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/13.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[:D] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/14.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[:)] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/15.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[:(] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/16.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[:O] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/17.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[:#] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/18.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[:Z] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/19.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[:0=] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/20.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[/:P] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/21.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[:$] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/22.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[-.-] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/23.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[/-_-] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/24.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[:{] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/25.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[zz] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/26.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[|-_-|] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/27.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[-_-||] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/28.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[:.] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/29.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[:-Q] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/30.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[9_9] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/31.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[:,.] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/32.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[:?] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/33.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[:-|] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/34.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[:K] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/35.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[:G] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/36.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[:L] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/37.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[:c] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/38.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[:q] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/39.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[:Y] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/40.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[/gs] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/41.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[/sg] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/42.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[/hp] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/43.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[/ok] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/44.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[/rain] ';document.getElementById('txtname').focus()" style="cursor:hand">
      <img src="../images/45.gif" width="20" height="20" onClick="document.getElementById('txtname').value+='[/yin] ';document.getElementById('txtname').focus()" style="cursor:hand">
    </p>
</div>
<input type="reset" name="Submit2" value="重置">
    <asp:Button ID="submit" runat="server" Text="提交" OnClick="submit_Click" /><img src='../images/23.gif' width='20' height='20'/>
</div>
</form>
</body>
</html>

原素材是获取name，而服务器控件没有name，故我们改成获取id

即将onClick="document.forms[0].gb_word.value（这句看不懂没有关系，是素材中的）改成

onClick="document.getElementById('txtname').value

注：txtname为文本框的id值

这样就能在.cs文件中能取得文本框的值，从而添加到数据库中

注：服务器控件的id转成html的id后是一段很长的字符串，如果上面改动不能用，就把txtname改成对应生成的html页面的id即可

到此为止，展示页面的代码就改完了，接下来在后面进行处理，主要用到了replace（用法在网上搜一下就知道了，非常好用的）函数。

符号装成图片的方法

 public string PictureSwap(string str)
    {
        string[] a = new string[] { "[-_-]", "[@o@]", "[-|-]", "[o_o]", "[ToT]", "[*_*]", "[-x-]", "[-_-zz]", "[t_t]", "[-_-!]", "[:,]", "[:P]", "[:D]", "[:)]", "[:(]", "[:O]", "[:#]", "[:Z]", "[:0=]", "[/:P]", "[:$]", "[-.-]", "[/-_-]", "[:{]", "[zz]", "[|-_-|]", "[-_-||]", "[:.]", "[:-Q]", "[9_9]", "[:,.]", "[:?]", "[:-|]", "[:K]", "[:G]", "[:L]", "[:c]", "[:q]", "[:Y]", "[/gs]", "[/sg]", "[/hp]", "[/ok]", "[/rain]", "[/yin]" };
        for (int i = 1; i <= 45; i++)
        {
            str = str.Replace(a[i - 1], "<img src='../images/" + i + ".gif' width='20' height='20'/>");
           
        }
        Response.Write(str + "asadadadad<br/>");
        return str;
    }

参数str为要要转换的文字，比如说是整个留言的内容（其中加有类似（[-|-]）的符号）

用到了数组跟循环，也不太难就不说了

调用方法

string s = PictureSwap(txtname.Text.toString());

s即为转换后的能显示图片的字符串

显示时有两种处理方式：

1.在存入数据库之前调用PictureSwap改变成图片地址

2、取出数据时调用PictureSwap转换成图片显示

这就看个人爱好，也看是哪一个使用频繁咯。

素材图片请在在下面下载

mgtts

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录