<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{
margin: 0px;
padding: 0px;
}
#wrap{
border: 1px solid #ccc;
background: white;
width:300px;
height:480px;
margin:0 auto;
position: relative;
margin-top: 10px;
}
#text{
width: 270px;
height: 400px;
border: 1px solid #ccc;
position: absolute;
left: 15px;
top:20px;
}
#face{
width: 24px;
height: 24px;
border: 1px solid #ccc;
display: inline-block;
background: url(images/icon4.png);
left:15px;
top:435px;
position: absolute;
}
#writen{
height: 24px;
position: absolute;
top:435px;
left: 50px;
width:180px;
border-radius: 5px;
}
#button{
position: absolute;
right: 15px;
height: 25px;
width: 40px;
top:435px;
}
.right{
position:absolute;
right:33px;
background:pink;
padding:2px;
}
.left{
position:absolute;
left:33px;
background:#ccc;
padding:2px;
}
</style>
<script>
window.onload = function (){
var oText = document.getElementById("text");
var oFace = document.getElementById("face");
var aInput = document.getElementsByTagName("input");
var onff = true;
aInput[1].onclick = function (){
if(!aInput[0].value){
alert("Please Input");
}
else if( onff){
oText.innerHTML = ‘<p style="height:25px;line-height:25px;background:#ccc;float:right;margin-right:35px;margin-top:3px;padding:2px;clear:both;"><img src= "images/icon4.png"style="position:absolute;right:5px;">‘+ aInput[0].value +‘</p>‘ + oText.innerHTML;
aInput[0].value = "";
}
else {
oText.innerHTML = ‘<p style="height:25px;line-height:25px;background:pink;float:left;margin-left:35px;margin-top:3px;padding:2px;clear:both;"><img src= "images/icon3.png"style="position:absolute;left:5px;">‘+ aInput[0].value +‘</p>‘ + oText.innerHTML;
aInput[0].value = "";
}
}
oFace.onclick = function(){
if(onff){
oFace.style.background ="url(images/icon3.png)";
onff = !onff;
}
else
{
oFace.style.background ="url(images/icon4.png)";
onff = !onff;
}
}
}
</script>
</head>
<body>
<div id = "wrap">
<div id = "text">
</div>
<div id = "face"></div>
<input type = "text" id = "writen">
<input type = "button" id = "button" value = "发送">
</div>
</body>
</html>
时间： 2024-10-15 22:20:11