模拟手机短信发送

来源：互联网发布：淘宝上开店要多少钱编辑：程序博客网时间：2024/05/29 08:57
实现效果图
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>模拟手机发送短信</title>    <style type="text/css">    *{padding:0;margin: 0;list-style: none;box-sizing: border-box;}        .box{width: 260px;height: 430px;border: 4px solid #000;}        .dialog{            border-bottom: 1px solid #000;            width: 252px;            height: 380px;            margin-bottom: 5px;            padding: 5px;            /*border: 1px solid red;*/        }        .dialog>div{            margin-bottom: 5px;        }        .left{            background: url(img/1.png) -2px -3px no-repeat;        }        .left span{            margin-left: 30px;            background: green;            display: inline-block;            padding: 2px;            color: #fff;            font-size: 14px;            font-family: "微软雅黑";        }        .right{            background: url(img/2.png) right -5px no-repeat;            position: relative;            overflow: hidden;            /*border: 1px solid red;*/        }        .right span{            background: #ccc;            display: inline-block;            padding: 2px;            color: #fff;            font-size: 14px;            font-family: "微软雅黑";            float: right;            margin-right: 32px;        }        .footer{            height: 34px;            /*border: 1px solid red;*/            position: relative;        }        .span1{            display: inline-block;            height: 30px;            width: 30px;            background: url(img/1.png);            margin-right: 5px;        }        #txt1{height: 30px;position:absolute;top: 3px; }        #btn1{height: 30px;position:absolute;top: 0px;right: 4px;border: none;            background: #fff; outline: none;}    </style>    <script type="text/javascript">    window.onload=function(){        var oDialog=document.getElementById('dialog');        var oSpan1=document.getElementById('span1');        var oTxt1=document.getElementById('txt1');        var oBtn1=document.getElementById('btn1');        //改变笑脸（做的时候缺什么，就随时定义一个变量或自定义属性去做）        var onOff=true;        oSpan1.onclick=function bg(){            if(onOff){                this.style.background='url(img/2.png)';                onOff=false;                return false;            }else{                this.style.background='url(img/1.png)';                onOff=true;                return true;            }        }        // 点击发送时把内容，表情都发送过去        oBtn1.onclick=function(){            if(oTxt1.value==''){                alert('请输入内容！');            }else if(onOff){                oDialog.innerHTML+='<div class="left"><span>'+oTxt1.value+'</span></div>';                oTxt1.value='';            }else{                oDialog.innerHTML+='<div class="right"><span>'+oTxt1.value+'</span></div>';                oTxt1.value='';            }        }    }    </script></head><body>    <div class="box">        <div class="dialog" id="dialog">            <!-- 做之前一定先用html把所有结果写出来，再用js去实现 -->            <!-- <div class="left"><span>你好，请问你是lily么你好</span>            </div>            <div class="right"><span>是的，请问找我有事情么</span>            </div>            <div class="left"><span>我想你啦</span>            </div> -->        </div>        <div class="footer">            <span class="span1" id="span1"></span>            <input id="txt1" type="text" name="">            <input id="btn1" type="button" name="" value="发送">        </div>    </div></body></html>
阅读全文
0 0