利用js、html以及Css简单制作了一个模拟手机短信发送 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>MyPhoneSend</title>
    <style type="text/css">
        #phoneOut{
            width: 320px;
            height: 500px;
            border:1px solid #333;
            border-radius: 10px;
            margin-left: 30px;
        }
        #phoneIn{
            width: 300px;
            height: 450px;
            border:1px solid yellow;
            margin: 0 auto;
            margin-top: 20px;
            border-radius: 10px;
        }
        #phoneReception{
            width: 300px;
            height: 400px;
            border-radius: 10px;
            margin: 0 auto;
            /*text-indent: 4px;*/
            text-align: right;
            /*text-decoration-color: green;*/
            color: green;
        }
        
        #phoneOperation{
            width: 295px;
            height: 40px;
            margin: 0 auto;
            border:1px solid #A9A9A9;
            position: relative;
        }
        #phoneImg{
            display: inline-block;
            width: 30px;
            height: 28px;
            margin: 0 auto;
            border:1px solid yellow;
            margin-top: 5px;
            border-radius: 30px;
        }
        img{
            width: 30px;
            height: 28px;
        }
        #phoneSend{
            width: 50px;
            height: 30px;
            position: absolute;
            margin-top: 5px;
            margin-left: 210px;
        }
        #phoneText{
            position: absolute;
            margin-top: 5px;
            padding: 5px;
        }
        #left{

           display: block;
           background-color: green;
           color: #fff;
           float: left;
           border-radius: 5px;
        }
        #right{
           display: block;
           float: right;
            background-color: green;
           color: #fff;
           border-radius: 5px;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var oImg=document.getElementById('phoneImg');
            var oImg1=document.getElementById('img1');
            var oText=document.getElementById('phoneText');
            var oSend=document.getElementById('phoneSend');
            var oReception=document.getElementById('phoneReception');
            var oleft=document.getElementById('left');
            var oright=document.getElementById('right');
            var num=1;
            oImg.onclick=function(){    
               num=-num;
               if(num==1){
                   oImg1.src="smell1.jpg";
                   oImg1.value="smell1.jpg";
               }else if(num==-1){
                   oImg1.src="smell3.jpg";
                   oImg1.value="smell3.jpg";
               }
            }
            oSend.onclick=function(){
                 
                 var imgString;
                 var TextString;

                 if(num==1){
                     imgString='<img src="smell1.jpg" />';
                 }else if(num==-1){
                    imgString='<img src="smell3.jpg" />';
                 }
                 // 根据一个就是由于加号是一个字符串的形式，所以考虑将你所需要
                 // 进行的操作变成一个字符串。
                 oReception.innerHTML=oReception.innerHTML+ imgString +': '+oText.value+'<br />';
                 // 
                 oText.value='';
            }
        }
    </script>
</head>
<body>
  <div id="phoneOut">
      <div id="phoneIn">
         <div id="phoneReception"><span id="left"></span><span id="right"></span></div>
          <div id="phoneOperation">
            <!-- <input  id="phoneImg" type="button" name=""> -->
            <span id="phoneImg" ><img id="img1" src="smell1.jpg"></span>
            <input  id="phoneText" type="text" size="30px" />
            <input  id="phoneSend" type="button" name="" value="Send">
          </div>
      </div>
      
      
  </div> 
</body>
</html>

 

posted on 2017-03-22 22:13  Bean_love  阅读(717)  评论(0)    收藏  举报

导航