自定义字体 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#wrap{
    background:url(img/qq.jpg) no-repeat;
    width:556px;
    height:535px;
    margin:10px auto;
    position:relative;
    display:block;
    }
#box{
    position:absolute;
    top:100px;
    left:10px;
    height:270px;
    width:385px;
    display:block;
    font-size:16px;
    overflow:auto;
    }
#box div{
    width:20px;
    display:inline-block;
    font-size:16px;
    margin:2px 0;
    }    
select{
    position:absolute;
    top:381px;
    left:5px;
    }
textarea{
    border:none;
    position:absolute;
    width:385px;
    height:75px;
    left:10px;
    top:415px;
    font-size:16px;
    }
input{
    position:absolute;
    top:505px;
    left:320px;
    width:80px;
    cursor:pointer;
    }
div img{
    width:16px;
    height:16px;
    }                
</style>
<script type="text/javascript">
    window.onload = function ()
    {
        var obtn = document.getElementsByTagName('input')[0];
        var oselect = document.getElementsByTagName('select')[0];
        var obox = document.getElementById('box');
        var otext = document.getElementsByTagName('textarea')[0];
        var json =  {
            'love':'img/love.gif',
            'knife':'img/knife.gif'
            }
        obtn.onclick = function ()
        {
            var str = otext.value;
            if(str == '')
            {
                alert('请输入内容');
            }
            if(oselect.value == 'default')
            {
                obox.innerHTML += str + '<br>';
                otext.value = '';
            }
            for( attr in json)
            {
                usefont(attr,json[attr],str);
            }
        };
        
        function usefont(fontstyle,url,str)
        {
            if(fontstyle == oselect.value)
            {
                var arr = str.split('');
                var str = '';
                for( var i =  0; i < arr.length; i++ )
                {
                    obox.innerHTML += '<div><img src = "' + url + '"><span>' + arr[i] + '</span></div>';
                }
                obox.innerHTML += str + '<br>';
                otext.value = '';
            }
            
            
        }    
    };
</script>
</head>

<body>
<div id="wrap">
    <div id="box"></div>
    <select id="font-style">
        <option value="love">爱心文字</option>
        <option value="knife">小刀文字</option>
        <option selected="" value="default">默认文字</option>
    </select>
    <textarea></textarea>
    <input type="button" value="发送">
</div>
</body>
</html>

 

posted @ 2014-12-29 11:55  mayufo  阅读(182)  评论(0)    收藏  举报