<!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>
