模拟手机短信发送

最新推荐文章于 2021-06-05 00:38:19 发布

VLilyV

最新推荐文章于 2021-06-05 00:38:19 发布

阅读量1.7k

点赞数

分类专栏： js 文章标签： js案例

本文链接：https://blog.csdn.net/VLilyV/article/details/72297428

版权

js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

实现效果图

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