模拟手机短信发送

最新推荐文章于 2022-05-15 13:49:01 发布

chexijing7210

最新推荐文章于 2022-05-15 13:49:01 发布

阅读量192

点赞数

原文链接：https://my.oschina.net/u/3402290/blog/1532131

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #message{
            width:400px;
            height: 400px;
            border:#cccccc solid 1px;
            background-color: #cccccc;
            margin:0 auto;
        }
        .fl,.fr{
           float:none;
        }

        .fl li{
             margin-left: 5px;
            float: left;
            list-style: none;
         }
        .fr li{
            margin-right: 5px;
            float: right;
            list-style: none;
        }
        .fl p{line-height: 28px;
                max-width: 280px;
            background-color: red;
            margin-left: 40px;
        }
        .fr p{line-height: 28px;
            max-width: 280px;
            background-color: red;
            float: right;
        }
        .fr ,.fl{margin-bottom: 5px;}
        .set{
            width: 400px;
            margin:0 auto;
        }
    </style>
</head>
<body>
<div id="message">
    <ul class="fl">
        <li><img src="img1/1.jpg" alt="#"></li>
        <p>发送信息发送信息发送信息发送信息发送信息发送信息</p>
    </ul>
    <ul class="fr">
        <li><img src="img1/2.jpg" alt="#"></li>
        <p>发送信息发送信息发送信息发送信息发送信息发送信息</p>
    </ul>
</div>
<div class="set">
    <span><img src="img1/1.jpg" alt="#" id="img"></span>
    <input type="text" id="text" name="text">
    <input type="button" id="button" value="发送">
</div>
</body>
<script>
    var oImg=document.getElementById("img");
    var text=document.getElementById("text");
    var button=document.getElementById("button");
    var message=document.getElementById("message");
    var fl=document.getElementsByClassName("fl");
    var fr=document.getElementsByClassName("fr");


   var onclickImg=true;
    oImg.οnclick=function () {
        if(onclickImg){
            oImg.src="img1/1.jpg";
        }else{
            oImg.src="img1/2.jpg";
        }

        onclickImg=! onclickImg;
    }
    button.οnclick=function () {
        if (onclickImg){
            message.innerHTML='<ul class="fl"><li><img src="img1/1.jpg" alt="#"></li>' +
               ' <p>'+text.value+'</p> </ul><br>'+message.innerHTML;
        }else{
            message.innerHTML='<ul class="fr"><li><img src="img1/2.jpg" alt="#"></li>' +
                    ' <p>'+text.value+'</p> </ul><br>'+message.innerHTML;
        }
        onclickImg=! onclickImg;
    text.value='';
    }
</script>
</html>

转载于:https://my.oschina.net/u/3402290/blog/1532131