<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义字体形状</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
        }
        #wrap {
            background: url(12-img/bg.jpg) 0 0 no-repeat;
            width: 556px;
            height: 535px;
            margin: 10px auto;
            position: relative;
            display: block;
        }
        #showbox {
            position: absolute;
            top: 100px;
            left: 10px;
            height: 270px;
            width: 385px;
            display: block;
            font-size: 16px;
            overflow: auto;
        }
        textarea {
            border: none;
            position: absolute;
            width: 385px;
            height: 75px;
            left: 10px;
            top: 415px;
            font-size: 16px;
        }
        select {
            position: absolute;
            top: 385px;
            left: 8px;
        }
        input {
            position: absolute;
            top: 509px;
            left: 323px;
            width: 80px;
            cursor: pointer;
        }
        #showbox div {
            width: 20px;
            display: inline-block;
            font-size: 16px;
            margin: 2px 0;
        }
        div img {
            width: 16px;
            height: 16px;
        }
    </style>
    <script>
        
    </script>
</head>
<body>
    <div id="wrap">
        <div id="showbox">
            <!--<div><img src="12-img/balloon.png"><span>哈<span></div>-->
        </div>
        <select name="fontStyle" id="fontStyle">
            <option value="balloon">气球字体</option>
            <option value="love">表白字体</option>
            <option value="knife">砍刀字体</option>
            <option value="jiong">囧人字体</option>
            <option value="shuai">衰人字体</option>
            <option value="default" selected>默认字体</option>
        </select>
        <textarea id="con"></textarea>
        <input type="button" value="发送" id="btn">
    </div>
</body>
</html>
<script src="../public.js"></script>
<script>
    json = {
                'balloon': '12-img/balloon.png',
                'love': '12-img/heart.gif',
                'knife': '12-img/knife.gif',
                'jiong': '12-img/jiong.gif',
                'shuai': '12-img/shuai.gif'
            };
    var box = $id("showbox");
    //点击发送按钮时 判断是否是默认字体
    $id("btn").onclick = function(){
        var val = $id("fontStyle").value;
        var str = $id("con").value;
        if( val == "default" ){
            box.innerHTML += str + "<br>";
        }else{
            //将字符串拆分成数组
            var arr = str.split("");//1,2,3,4,5
            var html = "";//用来拼接div
            for( var i = 0 ; i < arr.length ; i++ ){
                html += '<div><img src="'+json[val]+'"><span>'+arr[i]+'<span></div>';   
            }
            box.innerHTML += html + "<br>";
        }
        $id("con").value = "";
    }
</script>

QQ聊天字体选择的更多相关文章

  1. QQ聊天气泡（图片拉伸不变样）、内容尺寸定制（高度随字数、字体而变）

    - (void)viewDidLoad { [super viewDidLoad]; self.view.backgroundColor = [UIColor whiteColor]; /** QQ聊 ...

  2. 43.QQ聊天软件GUI窗口编写

    QQ聊天软件代码功能编写 一,Tkinter聊天界面编写 1,聊天软件客户端界面开发-1 Tkinter的模块(“TK接口”)是标准的Python接口从Tk的GUI工具包 https://i.cnbl ...

  3. 搭建QQ聊天通信的程序：（1）基于 networkcomms.net 创建一个WPF聊天客户端服务器应用程序 （1）

    搭建QQ聊天通信的程序:(1)基于 networkcomms.net 创建一个WPF聊天客户端服务器应用程序 原文地址(英文):http://www.networkcomms.net/creating ...

  4. 一键QQ聊天与一键加群QQ功能

    最新有项目要求,点击页面上的一个按钮,实现直接启动QQ聊天,添加QQ群的功能. 开始以为会很复杂,百度后发现QQ已经有考虑到这方面的需求,只需进入:QQ推广 -> 推广工具 就能看到如下界面

  5. Objective－c——UI基础开发第八天（QQ聊天界面）

    一.知识点: QQ聊天界面 双模型的使用(dataModel和frameModel) UITextField的使用 通知的使用 拉伸图片的两种方法(slicing/image对象的resizeable ...

  6. 屏蔽QQ聊天对话框中的广告

    原文地址: 怎么在QQ聊天对话框中屏蔽广告_百度经验 http://jingyan.baidu.com/article/48a42057ca12c1a924250402.html     QQ已经成为 ...

  7. JS简单仿QQ聊天工具的制作

    刚接触JS,对其充满了好奇,利用刚学到的一点知识,写了一个简单的仿QQ聊天的东西,其中还有很多的不足之处,有待慢慢提高. 功能:1.在输入框中输入内容,点击发送,即可在上方显示所输入内容. 2.点击‘ ...

  8. QQ聊天界面的布局和设计(IOS篇)-第二季

    QQChat Layout - 第二季 本来第二季是快写好了, 也花了点功夫, 结果gitbook出了点问题, 给没掉了.有些细节可能会一带而过, 如有疑问, 相互交流进步~. 在第一季中我们完成了Q ...

  9. QQ聊天界面的布局和设计(IOS篇)-第一季

    我写的源文件整个工程会再第二季中发上来~,存在百度网盘, 感兴趣的童鞋, 可以关注我的博客更新,到时自己去下载~.喵~~~ QQChat Layout - 第一季 一.准备工作 1.将假数据messa ...

随机推荐

  1. k8s 的使用

    Kubernetes 是什么:在 Docker 技术的基础上,为容器化的应用提供部署运行.资源调度.服务发现和动态伸缩等一系列完整功能,提高了大规模容器集群管理的便捷性的工具.

  2. java-文件和I/O

    理解IO:http://www.importnew.com/23708.html 一.读写文件: FileInputStream 该流用于从文件读取数据,它的对象可以用关键字 new 来创建. 有多种 ...

  3. Redis sortedset有效集合数据结构

    1. 增加一个有效集合 2. 查看元素个数 3. zscore 4. zcount 5. 返回指定元素的索引 zrank 6.zincrby 给元素a加90分 7. zrange查看范围

  4. SQL2008：WITH MOVE 子句可用于重新定位一个或多个文件

    sql2008数据库 还原备份文件还原产生这个错误的原因是:还原目录下存在多个同名文件, 如图所示,只需要将第2个以及以后的mdf文件改成其它名字就行了,比如s.mdf,s1.mdf等等.

  5. sbt第一次运行下载jar包很慢解决办法

    一.补充sbt配置文件,添加下载路径 文件结构如下:修改了sbtconfig.txt,repo.properties. sbtconfig.txt配置内容为: # Set the java args  ...

  6. Elasticsearch的数据导出和导入操作（elasticdump工具），以及删除指定type的数据（delete-by-query插件）

    Elasticseach目前作为查询搜索平台,的确非常实用方便.我们今天在这里要讨论的是如何做数据备份和type删除.我的ES的版本是2.4.1. ES的备份,可不像MySQL的mysqldump这么 ...

  7. C#编程的最佳工具

    C#是企业中广泛使用的编程语言,特别是那些依赖微软的程序语言.如果您使用C#构建应用程序,则最有可能使用Visual Studio,并且已经寻找了一些扩展来对您的开发进行管理.但是,这个工具列表可能会 ...

  8. IIS webService 并发 性能

    IIS webService 并发 性能     做的WebService,客户压力测试500并发(随机步长60s-90s),响应速度不理想. 1,优化程序,压缩执行时间2,提高IIS“最大工作进程数 ...

  9. 《JavaScript设计模式与开发》笔记 7.单例模式

    废话一箩筐就这个原来 var instance; return function asdf(name){ if(!this.instance){ this.instance = new asdf(na ...

  10. Base64 转 图片

    static void Main(string[] args) { string s = "iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAIAAAABc2X6AAAAC ...