css+js简易微博效果

作者: 郭钰涛 | 来源:发表于2017-05-24 15:43 被阅读0次

<style>
        #d1{
            width: 800px;
            height: 500px;
            border: 5px solid black;
        }
        #txt{
            width: 300px;
            height: 200px;
            border: 2px solid #ccc;
        }
        #d2{
            width: 200px;
        }
        li{
            list-style: none;
        }
    </style>
</head>
<body>
    <div id="d1">
        <textarea  id="txt" cols="30" rows="10"></textarea>
        <button id="btn">发布</button>
        <ul id="ul1"></ul>
    </div>
</body>
<script>
    var oBtn=document.getElementById('btn');
    var oTxt=document.getElementById('txt');
    var oUl1=document.getElementById('ul1');
    oBtn.onclick=function(){
        var newLi = document.createElement('li');
        var child=oUl1.children;
        oUl1.insertBefore(newLi,child[0]);
        newLi.innerHTML=txt.value;

    }
</script>