当前位置： 移动技术网 > IT编程>开发语言>JavaScript > js模拟手机短信发送（代码教程）

js模拟手机短信发送（代码教程）

2019年05月17日  | 移动技术网IT编程  | 我要评论

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做的关于模拟手机短信发送的功能，功能基本可以，还有待改善。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网