用js操作元素的属性模拟手机发短信 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>模拟手机发短信实例</title>
    <style type="text/css">

        #box{
            width:180px;
            height:280px;
            background-color: #ebebeb;
            border:5px solid #5f5f47;
            border-radius:16px;
            padding:10px;
            word-break:break-all;   /*div里面的文字的长度超过div的宽度的时候，文字自动换行*/
            overflow-y:auto;    /*当文字超过div的高度时候出现竖向滚动条*/
            overflow-y:auto;    /*当文字超过div的高度时候出现竖向滚动条*/

        }
    </style>
</head>
<body>

<div id="box"></div>
<span id="span1">妙味:</span>
<input type="text" id="text1" value="" style="width:80px"/>
<input type="button" id="btn1" value="发送"/>
<script type="text/javascript">
    var oBox = document.getElementById("box");
    var oSpan = document.getElementById("span1");
    var oText = document.getElementById("text1");
    var oBtn = document.getElementById("btn1");
    oBtn.onclick = function(){
        oBox.innerHTML += oSpan.innerHTML+oText.value+'<br/>';
        oText.value = '';
    }
</script>
</body>
</html>

 

posted on 2016-05-26 23:23  冬刻忆  阅读(174)  评论(0)    收藏  举报