首页 > 经验记录 > JavaScript做了个类似于手机通信的东西

JavaScript做了个类似于手机通信的东西


长这样…
旁边的滑动栏是超过这个空间才会出现的,在聊天内容没有超过空间时不会出现那个滑动栏
emmmmmmm虽然没什么屌用
 
代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#d1{
				background-image: url(../img/phone.png);
				background-size: 100% 100%;
				border: 1px solid white;
				width: 30%;
				height: 970px;
				margin: 0 auto;
			}
			#d2{
				width: 69%;
				background-color: lightgrey;
				margin-left: 15%;
				border: 0px solid black;
				height: 675px;
				margin-top: 135px;
				margin-bottom: 10px;
				OVERFLOW-Y: auto;
				OVERFLOW-X:hidden;
				text-align: center;
			}
			#d3{
				width: 70%;
				margin: 0px auto;
				padding: ;
			}
			.input1{
				height: 50px;
			}
			#img1{
				border: 1px solid black;
				width: 50px;
				border-radius:50px;
				float: right;
				text-align: right;
			}
			#img2{
				border: 1px solid black;
				width: 50px;
				border-radius:50px;
				float: left;
				text-align: left;
			}
			#p1{
				background-color: yellowgreen;
				float: right;
				text-align: right;
				border: 0px solid black;
				border-radius: 7px;
				width: 37%;
				margin-right: 20px;
				padding: 5px;
				word-wrap:break-word;
    			word-break:break-all;
    			overflow: hidden;
			}
			#p2{
				background-color: white;
				float: left;
				text-align: left;
				border: 0px solid black;
				border-radius: 7px;
				width: 37%;
				margin-left: 20px;
				padding: 5px;
				word-wrap:break-word;
    			word-break:break-all;
    			overflow: hidden;
			}
			#sf{
				width: 75px;
				height: 60px;
				border-radius:20px;
				background-size: 100% 100%;
				background-image: url(../img/111.jpg);
			}
			#fs{
				border: 2px solid yellowgreen;
				border-radius:10px;
				background-color: forestgreen;
				color: white;
			}
			#divEle1{
				text-align: right;
			}
			#divEle2{
				text-align: left;
			}
			.clear{ clear:both;}
		</style>
		<script type="text/javascript">
			var a = true;
			function fasong(){
				var mes = document.getElementById("mes").value;
				//获取id为d2的div节点
				var div2 = document.getElementById("d2");
				//创建一个P节点
				var pEle = document.createElement("p");
				//给p节点赋值
				pEle.innerHTML = mes;
				//new一个图片
				var img = new Image();
				//new一个div
				var divEle = document.createElement("div");
				if(a){
					pEle.id = "p1";
					img.id = "img1";
					img.src="../img/111.jpg";
					divEle.id = "divEle1";
				}else{
					pEle.id = "p2";
					img.id = "img2";
					img.src="../img/222.jpg";
					divEle.id = "divEle2";
				}
				//把图片放进新建的div里
				divEle.appendChild(img);
				//把p标签放到新建的div里
				divEle.appendChild(pEle);
				//再把div放进已有的div里
				div2.appendChild(divEle);
				//new一个用来清除浮动的DIV
				var clearDiv = document.createElement("div");
				clearDiv.className="clear";
				div2.appendChild(clearDiv);
			}
			function bianhuan(imm){
				if(a){
					imm.style.backgroundImage="url(../img/222.jpg)";
				}else{
					imm.style.backgroundImage="url(../img/111.jpg)";
				}
				a = !a;
			}
		</script>
	</head>
	<body>
		<div id="d1">
			<div id="d2">
			</div>
<!----------------------------------------------------------------------------->
			<div id="d3">
				<table width="100%" align="center">
					<tr>
						<td><input id="sf" type="button" onclick="bianhuan(this)"/></td>
						<td width="500px"><input id="mes" class="input1" style="width: 250px;"/></td>
						<td><input id="fs" class="input1" type="button" value="发送" onclick="fasong()"/></td>
					</tr>
				</table>
			</div>
		</div>
	</body>
</html>

 
 
最主要是js那两个方法。创建对象啊,获得属性啊,设置属性啊,赋值啊啥的。
但也不算难

           


EA PLAYER &

历史记录 [ 注意:部分数据仅限于当前浏览器 ]清空

      00:00/00:00