qq聊天字体选择

时间 2019-11-18 标签聊天字体选择

qq聊天字体选择 ,文件以下

qq聊天字体选择 ,效果以下

html

<!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">
            <!--
                flwejlfjlewj
                
            表白字体    
            吊死扶伤分为非-->
            <!-- <div><img src="12-img/heart.gif"><span>吊</span></div>
            <div><img src="12-img/knife.gif"><span>死</span></div>
            <div><img src="12-img/heart.gif"><span>扶</span></div>
            <div><img src="12-img/heart.gif"><span>伤</span></div>

            <div><img src="12-img/heart.gif"><span>1</span></div> -->
        </div>
        <select name="fontStyle" id="fontStyle">
            <option value="balloon">气球字体</option>
            <option value="heart">表白字体</option>
            <option value="knife">砍刀字体</option>
            <option value="jiong">囧人字体</option>
            <option value="shuai">衰人字体</option>
            <option value="default" selected>默认字体</option>
        </select>
        <textarea id="cont"></textarea>
        <input type="button" value="发送" id="send">
    </div>
</body>

</html>
<script src="../common.js"></script>
<script type="text/javascript">
    //1.在输入框输入想说的话
    //2.选择想要的字体方式
    //3.点击发送
    //4.在显示区显示内容
    //逻辑：点击发送，获得输入的文字内容，根据字体方式，显示内容
    //点击发送
    var obj = {
        balloon: "balloon.png",
        heart: "heart.gif",
        knife: "knife.gif",
        jiong: "jiong.gif",
        shuai: "shuai.gif"
    }

    let $showbox = $('#showbox'),
        $cont = $('#cont'),
        $fontStyle = $('#fontStyle'),
        $send_btn = $('#send'),
        str = '';

    $send_btn.onclick = function () {
        let cValue = $cont.value,
            fValue = $fontStyle.value,
            $frag = document.createDocumentFragment();
        if (fValue == "default") {
            $showbox.innerHTML += cValue + "<br />";
        } else {
            for (let i = 0; i < cValue.length; i++) {
                let $div = document.createElement('div'),
                    $img = document.createElement('img'),
                    $span = document.createElement('span');
                $img.src = `12-img/${obj[fValue]}`;
                $span.innerHTML = cValue[i];
                $div.appendChild($img);
                $div.appendChild($span);
                $frag.appendChild($div);
            }
            $showbox.appendChild($frag);
            // console.log(str);
            $showbox.innerHTML += str + "<br />";
        }
        $cont.value = null;
    }   
</script>

common.js

//  判断数组是否还有这个元素
function include(arr, item) {
    for(var i = 0; i < arr.length; i++) {
       if(arr[i] === item) {
           return true;
       } 
    }
    return false;
}
// 返回元素所在的位置
function indexOf(arr, item) {
    for(var i = 0; i < arr.length; i++) {
        if(arr[i] === item) {
            return i;
        } 
     }
     return -1;
}

// 任意区间随机整数
function getRandom(max, min) {
    min = min || 0;
    if(min > max) {
        var a = min;
        min = max;
        max = a;
    }
    return min + Math.floor(Math.random() * (max - min + 1));
}

// 数组去重
function noRepeat(arr) {
    var __arr = [];
    for(var i = 0; i < arr.length; i++) {
        // 存在返回true, 不存在返回false
        var bool = __arr.indexOf(arr[i])
        if(bool == -1) {
            __arr.push(arr[i]);
        }
    }
    return __arr;
}

function $(ele) {
    return document.querySelector(ele);
}
function $A(ele) {
    return document.querySelectorAll(ele);
}

function getRandomColor() {
    var str = '0123456789abcdef';
    var color = '#';
    for(var i = 0; i < 6; i++) {
        color += str[getRandom(str.length - 1)];
    }
    return color;
}

// 格式化url, 获取参数
function parseUrl(url) {
    var obj = {};
    url = url.split('?')[1].split('#')[0];
    url = url.split('&');
    url.forEach(function (x) {
        var arr = x.split('=');
        obj[arr[0]] = arr[1];
    })
    return obj;
}

// 获取非行内样式
function getStyle(ele, attr) {
    if(window.getComputedStyle) {
        return window.getComputedStyle(ele, null)[attr]
    }
    return ele.currentStyle[attr];
}