留言板实践代码

留言板HTML

<p><br/></p><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>留言板</title><style type="text/css">

css部分

*{
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
    @media screen and (min-width: 400px ){
    body{
        text-align:center;
        width: 500px;
        margin-left: 40%;
        margin-right:40%;
    }
    }
    div{
        margin: 0 auto;
        margin-right: 0.3rem;
        margin-left: 0.3rem;
        right: 20rem;
        width: 25fr;
        height: 30rem;
        background-color: aqua;
        text-align: center;
        margin-top: 0.9rem;
        padding-top: 0.3rem;
    }
    div>p{ 
        padding-top: 0.5rem;
        margin-top: 0.2rem; 
        letter-spacing: 5px; 
    }
    ul>li{
        display: grid;
        list-style: none;
        font-size: 0.16rem;
        text-align: left;
        margin-left: 0.3rem;
    }
    ul{
        margin-top: 0.5rem;
    }
    input{
        margin-top:1rem;
        width: 80%;            
        height:1.5rem;
        padding-left:left 5rem;
        border-radius: 0.1px;
        border: 0rem;
    }
    button{
        color: blue;
        border: 0px;
        background-color:aqua;
        margin-left:80% ;
    }</style><div><p>留言板</p><hr/><input type="text" onkeydown="addMgs(this)" placeholder="请输入内容"/><ul class="list"></ul></div>

JS部分

    <script>function addMgs(ele){
        if (event.key==='Enter'){
            const ul=document.querySelector('.list');
           if (ele.value.trim().length===0){
               alert('留言不能为空');
               ele.focus();
               return false;
           }
        //    添加一条新留言
           const li=document.createElement('li');
           li.innerHTML = ele.value + '<button onclick="del(this.parentNode)">删除</button>';
           ul.insertAdjacentElement('afterBegin',li);
           ele.value=null;
           ele.focus();
        }
    }
    // 删除
    function del(ele){
        return confirm('是否删除')?ele.remove():false;
    }
    </script>
    <!--!doctype-->