js 模拟发短信 

<!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>

 

posted @ 2015-05-03 22:33  mayufo  阅读(359)  评论(0)    收藏  举报