第1课--1.1模拟手机短信发送

最新推荐文章于 2023-11-18 02:10:57 发布

汪超凡

最新推荐文章于 2023-11-18 02:10:57 发布

阅读量548

点赞数

分类专栏：妙味课堂Js基础课后练习文章标签： JS基础妙味课堂课后练习手机短信

本文链接：https://blog.csdn.net/wcf1991/article/details/78369321

版权

妙味课堂Js基础课后练习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!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"就可以看到！

汪超凡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第1课--1.1模拟手机短信发送

个人代码，供学习交流。
复制链接

扫一扫

专栏目录