类似扣扣表情包发送(练习)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table id="menu">
<tr>
<td><img src="images/1.jpg" alt=""></td>
<td><img src="images/2.jpg" alt=""></td>
<td><img src="images/3.png" alt=""></td>
<td><img src="images/4.jpg" alt=""></td>
<td><img src="images/5.jpg" alt=""></td>
<td><img src="images/6.png" alt=""></td>
</tr>
<tr>
<td><img src="images/7.jpg" alt=""></td>
<td><img src="images/8.png" alt=""></td>
<td><img src="images/9.png" alt=""></td>
<td><img src="images/10.jpg" alt=""></td>
<td><img src="images/11.jpg" alt=""></td>
<td><img src="images/12.jpg" alt=""></td>
</tr>
<tr>
<td><img src="images/13.jpg" alt=""></td>
<td><img src="images/14.jpg" alt=""></td>
<td><img src="images/15.png" alt=""></td>
<td><img src="images/16.png" alt=""></td>
<td><img src="images/17.png" alt=""></td>
<td><img src="images/18.jpg" alt=""></td>
</tr>
<tr>
<td><img src="images/19.png" alt=""></td>
<td><img src="images/20.png" alt=""></td>
<td><img src="images/21.png" alt=""></td>
<td><img src="images/22.png" alt=""></td>
<td><img src="images/23.png" alt=""></td>
<td><img src="images/24.jpg" alt=""></td>
</tr>
<tr>
<td><img src="images/25.jpg" alt=""></td>
<td><img src="images/26.jpg" alt=""></td>
<td><img src="images/27.jpg" alt=""></td>
<td><img src="images/28.jpg" alt=""></td>
<td><img src="images/29.png" alt=""></td>
<td><img src="images/30.png" alt=""></td>
</tr>
</table>
<span id="show" style="width: 60px;height: 60px;position: absolute;left: 130px;top:0px;background: pink;display: none;text-align: center;line-height: 60px;"></span>
<div id="txt" style="width: 180px;height: 50px;border: 1px #ccc solid"></div>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
var menu=$("menu");
var trs=menu.getElementsByTagName("tr");
var tds=menu.getElementsByTagName("td");
var imgs=menu.getElementsByTagName("img");
var show=$("show");
var btn=$("btn");
var txt=$("txt");
for(var i=0;i<trs.length;i++){
for(var j=0;j<tds.length;j++){
tds[i,j].onclick=function(){
show.style.display="block";
show.innerHTML=this.innerHTML;
txt.innerHTML+=this.innerHTML;
}
}

}
</script>
</body>
</html>

posted @ 2017-04-19 23:37  非凡。  阅读(122)  评论(0编辑  收藏  举报