javaScript简单的留言板

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>留言板</title>
        <style>
            *{margin: 0;padding: 0;list-style: none;}
            .wapr{
                width: 300px;
                margin: 50px auto 0;
                color: white;
            }
            .wapr h2{
                            text-align: center;
                            height: 40px;font-size: 24px;font-weight: normal;line-height: 40px;background: #CD853F;}
            .wapr textarea{width: 298px;height: 60px;resize: none;}
            .wapr input{height: 40px;width: 300px;margin-bottom: 20px;}
            .wapr ul{
                width: 258px;
                padding: 0 20px;
                border-top: 1px solid #CD853F;
            }
            .wapr li{font-size: 14px;line-height: 28px;border-bottom: 1px solid #CD853F;color: black;}
            .wapr li:nth-of-type(2n){background: beige;}
        </style>
    </head>
    <body>
        <div class="wapr">
            <h2>留言板</h2>
            <textarea id="text"></textarea>
            <input type="button" value="发送" id="btn" />
            <ul id="list">
            </ul>
        </div>
    </body>
    <script type="text/javascript">
        window.onload=function(){
            var text=document.querySelector('#text')
            var btn=document.querySelector('#btn')
            var list=document.querySelector('#list')
            btn.onclick=function(){
                var val=text.value;    
                if(text.value==""){
                    alert("请输入内容")
                }else{
                    list.innerHTML+='<li>'+val+'</li>';                    
                    text.value=""
                }                
            }
            
        }
    </script>
</html>
javaScript简单的留言板

猜你喜欢
