QQ聊天字体选择

Posted tis100204

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了QQ聊天字体选择相关的知识,希望对你有一定的参考价值。


<!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聊天字体选择的主要内容,如果未能解决你的问题,请参考以下文章

QQ聊天里面的“戳一戳”啥意思?

Android中类似QQ和微信中聊天消息中包含有电话号码,点击可以选择拨打的功能怎么实现?

QQ里的聊天记录怎么可以查以前聊过的记录?

QQ点了输入栏里的A字体变成了蓝色的,怎么弄回来?

怎么查看QQ以前的聊天记录啊

怎样下载服务器上的QQ聊天记录