模拟手机短信发送
模拟手机短信发送
feifei080366 发表于2个月前
模拟手机短信发送
  • 发表于 2个月前
  • 阅读 1
  • 收藏 0
  • 点赞 0
  • 评论 0
摘要: 模拟手机短信发送
<!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.onclick=function () {
        if(onclickImg){
            oImg.src="img1/1.jpg";
        }else{
            oImg.src="img1/2.jpg";
        }

        onclickImg=! onclickImg;
    }
    button.onclick=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>
共有 人打赏支持
粉丝 0
博文 7
码字总数 1528
×
feifei080366
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: