js模拟手机短信发送（代码教程）
程序员文章站
2022-06-21 19:29:04
js模拟手机短信发送（代码教程）
js模拟手机短信发送（代码教程）
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="https://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;}
#p1{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.onload=function(){
var odiv=document.getelementbyid('p1');
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 = '<p class="right"><img src="images/girl.png"><p>' + otext.value + '</p></p>' + odiv.innerhtml;
otext.value = '';
} else {
odiv.innerhtml = '<p class="left"><img src="images/boy.png"><p>' + otext.value + '</p></p>' + odiv.innerhtml;
otext.value = '';
};
};
};
</script>
</head>
<body>
<p id="box">
<p id="p1"></p>
<p id="content">
<img id="img" src="images/boy.png">
<input id="text" type="text">
<input id="btn" type="button" value="发送">
</p>
</p>
</body>
</html>
这是我使用js做的关于模拟手机短信发送的功能，功能基本可以，还有待改善。