图标文字

HTML

<div class="box">
	<p>
		<!--<i>你</i>
		<i>好</i>
		<i>！</i>
		<i>哈</i>
		<i>哈</i>
		<i>大</i>
		<i>海</i>-->
	</p>
	<span id="btn">
		<a href="javascript:;" id="btn1">正常</a>
		<span id="list">
			<span>正常</span>
			<span><img src="tamaicons-pc/babytchi.png"/></span>
			<span><img src="tamaicons-pc/mametchi.png"/></span>
			<span><img src="tamaicons-pc/mimitchi1.png"/></span>
		</span>
	</span>
	<input type="text" name="" id="" value="" />
	<input type="button" name="" id="" value="发送" />
</div>

CSS

*{
	margin: 0;
	padding: 0;
}
.box{
	margin: 0 auto;
	width: 300px;
}
p:after{
	display: block;
	clear: both;
	content: "";
}
p{
	min-height: 50px;
	border: 1px solid #000;
	margin-bottom: 10px;
}
#btn{
	width: 30px;
	height: 30px;
	position: relative;
	float: left;
	font-size: 12px;
	text-align: center;
	line-height: 30px;
}
img{
	width: 100%;
	height: 100%;
}
input{
	height: 30px;
	float: left;
	width: 200px;
}
input:nth-of-type(2){
	width: 50px;
	margin-left: 10px;
	height: 34px;
}
#btn1{
	width: 100%;
	height: 100%;
}
i{
	display: inline-block;
	float: left;
	width: 26px;
	height: 26px;
	font-style: normal;
	text-align: center;
	line-height: 26px;
	/*padding-top: 26px;*/
	position: relative;
}
em{
	display: block;
	width: 26px;
	height: 26px;
	position: absolute;
	left: 0;
	top: 0;
}
#list{
	position: absolute;
	width: 100%;
	left: 0;
	top: 30px;
	display: none;
}
#list span{
	width: 30px;
	height: 30px;
	border: 1px solid #000;
	display: block;
	border-top: none;
	text-align: center;
	line-height: 30px;
}
#list span:nth-of-type(1){
	border-top: 1px solid #000;
}

JS

	var imgArray=["正常","tamaicons-pc/babytchi.png","tamaicons-pc/mametchi.png","tamaicons-pc/mimitchi1.png"];
	var oBtn=document.getElementById("btn1");
	var oLi=document.getElementById("list");
	var aSpan=oLi.getElementsByTagName("span");
	var aIs=document.getElementsByTagName("i");
	var aEms=document.getElementsByTagName("em");
	var aInput=document.getElementsByTagName("input");
	var oP=document.getElementsByTagName("p")[0];
	var num=0;
	//点击切换字体
	//鼠标移入字体列表显示
	oBtn.onclick=function(){
		oLi.style.display="block";
	}
	//点击字体列表
	for (var i=0;i<aSpan.length;i++) {
		aSpan[i].index=i;
		aSpan[i].onclick=function(){
			num=this.index;
			oLi.style.display="none";
			oBtn.innerHTML=this.innerHTML;
		}
	}
	
	//点击发送生成文字
	aInput[1].onclick=function(){
		//获得输入框内的文字
		var txt=aInput[0].value;
		//分割成数组
		var arr=txt.split("");
		//清楚文字
		oP.innerHTML=null;
		
		//生成文字
		for (var i=0;i<arr.length;i++) {
			oP.innerHTML+="<i><em></em>"+arr[i]+"</i>";
			if(num>0){
				aEms[i].style.background="url("+imgArray[num]+")";
				aEms[i].style.backgroundSize="cover";
				aIs[i].style.paddingTop=26+"px";
			}else{
				aIs[i].style.paddingTop=0+"px";
			}
		}
		aInput[0].value=null;
	}