第1课--1.1模拟手机短信发送_模拟短信发送页面,联系人信息通过点击按钮打开新的页面(或系统联系人)获取,短信内-优快云博客

本文链接：https://blog.youkuaiyun.com/wcf1991/article/details/78369321

本文介绍了一个简单的网页版模拟短信发送界面的设计与实现。通过HTML、CSS和JavaScript构建了一个交互式的模拟手机短信应用，用户可以输入文本并发送，界面会根据发送者切换显示不同的头像。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>模拟手机短信发送</title>
	<style>
		input,ul{
			padding:0px;margin:0;
		}
		li{
			list-style:none;
		}
		.clear{
			zoom = 1;
		}
		.clear:after{
			content:"";display:block;clear:both;overflow:hidden;
		}
		body{
			background:url(smartisan.png) no-repeat 500px -30px;
		}
		.bottom{
			width:262px;
			height:42px;
			padding:2px;
			text-align:center;
			position:absolute;
			left:568px;
			top:512px;
		}
		.bottom img{
			border:1px solid #f1f1f1;
			float:left;

		}
		.bottom input[type = "text"]{
			width:176px;
			height:38px;
			float:left;
			
			
		}
		.bottom input[type = "button"]{
			width:40px;
			height:42px;
			float:left;
		}
		#content{
			width:264px;
			height:420px;
			position:absolute;
			left:567px;
			top:88px;
			overflow:auto;
		}
		#content li{
			

		}
		#content #left_li img{
			float:left;
		}
		#content #left_li p {
			font:14px/30px "宋体";
			float:left;
			background-color:red;
			max-width:200px;
		}
		#content #right_li img{
			float:right;
		}
		#content #right_li p {
			font:14px/30px "宋体";
			float:right;
			background-color:green;
			max-width:200px;
		}
	</style>

	<script>
	window.onload = function(){
		var oContent = document.getElementById("content");
		var oChange = document.getElementById("change");
		var oText = document.getElementById("text");
		var oSend = document.getElementById("send");

		var oNoff = true;

		oChange.onclick = function(){
				if(oNoff){
					oChange.src = "face_2.png";
				}else{
					oChange.src = "face_1.png";
				}
				oNoff = !oNoff;
		}

		oSend.onclick = function (){
			if(oNoff){
				oContent.innerHTML = '<li id = "left_li" class = "clear"><img src = "face_1.png"/><p>' + oText.value + '</p></li>' + oContent.innerHTML;
			}else{
				oContent.innerHTML = '<li id ="right_li" class = "clear"><img src = "face_2.png"/><p>'+ oText.value +'</p></li>' + oContent.innerHTML;
			}
			oText.value = "";
		}
	}
	</script>
</head>
<body>
	<div id = "phone">
	<ul id = "content">
		
	</ul>
	<div class = "bottom clear">
		<img src = "face_1.png" id = "change"/><input type = "text"/ id = "text"/><input type = "button" value = "发送" id = "send"/>
	</div>
	
	</div>
</body>
</html>

下面是图片地址：打开从“http......ter"就可以看到！