`

添加表情的代码

    博客分类:
  • .NET
阅读更多

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

 

 

下面代码和网上下载的素材是不一样的,素材中的是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" onkeydown=gbcount(this.form.gb_word,this.form.total,this.form.used,this.form.remain); onkeyup=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转换成图片显示

 

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

 

 

素材图片请在在下面下载

 

 

 

 

 

分享到:
评论

相关推荐

    javascript发表留言添加表情代码

    在JavaScript开发中,实现“发表留言添加表情代码”的功能是一项常见的需求,特别是在构建社交媒体或论坛类网站时。这个功能允许用户在发表评论或留言时,选择并插入预定义的表情符号,增强文字表达的情感色彩。本篇...

    表情代码_劲舞团_劲舞团各种表情_

    玩家或者游戏开发者可以通过修改这个文件来添加、删除或调整表情代码,但通常这类操作需要一定的技术知识,因为不正确的修改可能导致游戏出现问题。 总的来说,“劲舞团”通过表情代码这一创新功能,增强了游戏的...

    Yy全部表情代码

    在IT行业中,尤其是在社交软件和在线聊天平台的开发与应用中,表情代码扮演着重要的角色。"Yy全部表情代码"这个主题涉及到的是一个特定聊天系统或应用内的一系列表情符号及其对应的编码。表情代码通常是为了使用户...

    php留言板中的表情添加 表情添加 源代码

    - 创建一个表情代码库,例如`$emoji_array = array(':smile:' =&gt; 'img/smile.png', ...)`,将每个表情代码与其对应的图片路径关联起来。 - 在用户输入的文本中,遍历并查找这些表情代码,用相应的HTML img标签替换...

    添加聊天表情源代码 (as)

    【标题】"添加聊天表情源代码 (AS)" 涉及到的是在ActionScript(AS)环境下实现聊天功能,特别是表情集成的编程实践。ActionScript是Adobe Flash开发中使用的一种面向对象的脚本语言,主要用于创建交互式内容、网页...

    jQuery聊天表情代码转换图片.zip

    【jQuery聊天表情代码转换图片.zip】是一个用于网页聊天功能的资源包,主要依赖于jQuery库,特别是`jquery.1.11.1.min.js`这个版本。jQuery是JavaScript的一个库,它极大地简化了DOM操作、事件处理、动画设计以及...

    CSS3卡通DIY马铃薯土豆表情代码.zip

    【CSS3卡通DIY马铃薯土豆表情代码】是一个利用jQuery和CSS3技术实现的创新性特效,旨在创建可互动的、生动有趣的卡通马铃薯表情。这个项目展示了如何通过编程方式来绘制图形,为网页增加趣味性和用户体验。在本案例...

    jQuery评论框插入QQ表情代码.zip

    3. **插入表情代码**:当用户点击表情图片时,我们需要将对应的QQ表情代码(通常是ASCII字符或自定义的字符串)插入到评论框中。这可以通过监听表情图片的`click`事件来实现,获取选中的表情图片的标识,然后将其...

    微信小程序Emoji表情源代码

    以下是对"微信小程序Emoji表情源代码"这个主题的详细说明: 1. **表情的表示方式**: 微信小程序中,Emoji表情通常有两种表示方式:Unicode编码和图片资源。Unicode编码是一种国际标准,用于表示各种字符,包括...

    html输入QQ 表情

    同时,编辑器内部需要将代码转换为实际的图片,这通常通过在编辑器的源码模式下替换表情代码为标签实现,标签的src属性指向表情图片。 4. 兼容性处理:确保你的解决方案在主流浏览器(如Chrome、Firefox、Safari、...

    微信小程序表情包制作源码,后端源代码,PHP版本

    在标签中提到的“表情包制作神器”和“表情包DIY”意味着此源码支持用户自定义表情元素,例如添加文字、贴图、滤镜等。用户可以根据自己的喜好组合不同的元素,创建独一无二的表情包,然后方便地分享到微信或其他...

    qt 表情代码

    "qt 表情代码"这个主题涉及到如何在Qt应用程序中实现表情符号的支持,包括显示和插入表情的功能。下面将详细阐述相关知识点。 1. **Qt Widgets与QTextBrowser**: Qt提供了丰富的控件库,如QTextEdit和QTextBrowser...

    Android 模仿qq添加表情

    注意,因为表情是字符串形式,而不是图片,所以需要将表情代码以特殊方式存储,例如用自定义的SpannableString对象来包裹。 5. **表情删除** - 当用户按下Backspace键时,检查光标前的字符是否为表情代码。如果是...

    android添加表情(含 socket方式)

    3. **处理表情输入**:当用户点击表情时,需要将选中的表情代码(通常是Unicode编码)插入到输入框的光标位置。为此,你需要监听表情面板的点击事件,然后在EditText中使用`getText().insert()`方法插入表情代码。 ...

    Android 表情功能的实现

    一旦检测到表情代码,用相应的图片替换它,并在输入框中插入一个自定义的`SpannableString`,这样可以保持文本和表情的可编辑性。 5. **动态加载**:如果表情库很大,一次性加载所有图片可能会消耗大量内存。为了...

    微信小程序表情包制作前端源代码.zip

    本文将详细讲解“微信小程序表情包制作前端源代码”这一主题,主要涵盖微信小程序的开发、表情包制作的原理及其实现方式。 首先,微信小程序是腾讯推出的一种轻量级应用开发平台,它允许开发者在微信环境中构建原生...

    jQuery多说QQ表情留言评论框代码.zip

    // 对评论内容进行预处理,如添加QQ表情 // ... // 调用多说API发送评论 duoshuoQuery.comments.post({ short_name: 'your_short_name', content: comment }); }); }); ``` 在上述代码中,`duoshuoQuery`是...

    QQ名字怎么加表情 QQ昵称上添加表情方法.docx

    需要注意的是,不同的表情代码可能会随着QQ版本的更新而有所变化,所以如果找不到某个表情的代码,尝试更新QQ至最新版本,或者在网络搜索最新的表情代码列表。 通过以上步骤,你就可以在QQ昵称中自由地添加各种表情...

    jQuery表情图片选择器代码.rar

    【jQuery表情图片选择器代码】是一个使用了前端技术栈,包括Bootstrap、jQuery和自定义的emoji-picker.js插件,来实现的功能性组件。这个组件的主要目的是在网页的文本输入框中方便用户插入表情图片,从而增强用户的...

    jQuery文本框输入表情符号代码

    《jQuery实现文本框输入表情符号技术详解》 在现代网页应用中,用户交互体验的提升是至关重要的。其中,允许用户在文本输入框中...通过这个功能,用户可以在输入文本时轻松地添加情感表达,提高了沟通的趣味性和效率。

Global site tag (gtag.js) - Google Analytics