js模拟手机短信发送

最新推荐文章于 2023-08-21 19:34:24 发布

belong_me

最新推荐文章于 2023-08-21 19:34:24 发布

阅读量637

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/belong_me/article/details/78856130

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>模拟手机短信</title>
<style type="text/css">
#box{width:276px;height:560px;position: relative;background: url(images/iphone.png) no-repeat;margin:0 auto;}
#div1{width: 248px;height:401px;position: absolute;top:55px;left:12px;}
#content{width:248px;height: 49px;position: absolute;bottom: 55px;left:12px;border-top:1px solid #d7d7d7; }
#img{width:24px;height: 24px;margin-top:6px;margin-left:5px;border:1px solid #d7d7d7;}
#text{width:150px;height:24px;position: absolute;top:6px;margin-left:5px;}
#btn{width:55px;height: 28px;position: absolute;top:7px;right: 3px;border:none;background: #fff;}
.left, .left img, .left p {float: left;}
.left {	width: 100%;}

.left img {width:24px;height: 24px;margin: 6px auto auto 5px;}
.left p ,.right p{padding:0 5px;border-radius: 3px;}
.left p{background: #d7d7d7;}
.right, .right img, .right p{float: right;}

.right{width: 100%;}

.right img {width:24px;height: 24px;margin: 6px auto auto 5px;}

.right p {background: #02EA2C;}
</style>
<script type="text/javascript">
    window.οnlοad=function(){
    	var oDiv=document.getElementById('div1');
    	var oImg=document.getElementById('img');
    	var oText=document.getElementById('text');
    	var oBtn=document.getElementById('btn');
    	var arr = [ 'images/girl.png' , 'images/boy.png' ];
		var num = 0 ;
    	oImg.onclick = function (){

			if( num ){
				num=0;
				oImg.src = arr[1];
			} else {
				oImg.src = arr[num];
				num=1;
			};
			
		};

		oBtn.onclick = function (){

			if( oText.value == '' ){
				alert('请输入');
			} else if( num ){
				oDiv.innerHTML = '<div class="right"><img src="images/girl.png"><p>' + oText.value + '</P></div>' + oDiv.innerHTML;
				oText.value = '';
			} else {
				oDiv.innerHTML = '<div class="left"><img src="images/boy.png"><p>' + oText.value + '</p></div>' + oDiv.innerHTML;
				oText.value = '';
				
			};
		};
	};
</script>
</head>
<body>
   <div id="box">
     <div id="div1"></div>
      <div id="content">
         <img id="img" src="images/boy.png">
         <input id="text" type="text">
         <input id="btn" type="button" value="发送">
      </div>
   </div>
</body>
</html>

这是我使用js做的关于模拟手机短信发送的功能，功能基本可以，还有待改善。