js 模拟发短信

野性酷女 2021-12-21 01:17 292阅读 0赞

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    *{
            margin: 0px;
            padding: 0px;
    }
    #wrap{
            border: 1px solid #ccc;
            background: white;
            width:300px;
            height:480px;
            margin:0 auto;
            position: relative;
            margin-top: 10px;
    }
    #text{
            width: 270px;
            height: 400px;
            border: 1px solid #ccc;
            position: absolute;
            left: 15px;
            top:20px;
    }
    #face{
            width: 24px;
            height: 24px;
            border: 1px solid #ccc;
            display: inline-block;
            background: url(images/icon4.png);
            left:15px;
            top:435px;
            position: absolute;
    }
    
    
    #writen{
            height: 24px;
            position: absolute;
            top:435px;
            left: 50px;
            width:180px;
            border-radius: 5px;
    
    
    }
    #button{
            position: absolute;
            
            right: 15px;
            height: 25px;
            width: 40px;
            top:435px;
    }
    .right{
            position:absolute;
            right:33px;
            background:pink;
            padding:2px;
    }
    
    .left{
            position:absolute;
            left:33px;
            background:#ccc;
            padding:2px;
    }
    
    </style>
    <script>
            window.onload = function (){
                    var oText = document.getElementById("text");
                    var oFace = document.getElementById("face");
                    var aInput = document.getElementsByTagName("input");
                    var onff = true;
    
                    aInput[1].onclick = function (){
                            
                            if(!aInput[0].value){
                                    alert("Please Input");
                            }
                            else if( onff){
                                    oText.innerHTML = '<p style="height:25px;line-height:25px;background:#ccc;float:right;margin-right:35px;margin-top:3px;padding:2px;clear:both;"><img src= "images/icon4.png"style="position:absolute;right:5px;">'+ aInput[0].value +'</p>' + oText.innerHTML;
                                    aInput[0].value = "";
                            }
                            else {
                                    oText.innerHTML = '<p style="height:25px;line-height:25px;background:pink;float:left;margin-left:35px;margin-top:3px;padding:2px;clear:both;"><img src= "images/icon3.png"style="position:absolute;left:5px;">'+ aInput[0].value +'</p>' + oText.innerHTML;
                                    aInput[0].value = "";
                            }
                    }
                    oFace.onclick = function(){
    
                            
                            if(onff){
                                    oFace.style.background ="url(images/icon3.png)";
                                    onff = !onff;
                            }
                            else
                            {
                                    oFace.style.background ="url(images/icon4.png)";
                                    onff = !onff;
                            }
                    }
            }
    </script>
    </head>
    <body>
                    <div id = "wrap">
                            <div id = "text">
    
                                    
                            </div>
                            
                            
                            <div id = "face"></div>
                            <input type = "text" id = "writen">
                            <input type = "button" id = "button" value = "发送">
                            
                    </div>
    </body>
    </html>

转载于:https://www.cnblogs.com/mayufo/p/4474895.html