留言板

1、样式

 * {
        margin: 0;
        padding: 0;
    }

    #box {
        width: 600px;
        height: 300px;
        ;
        border: 1px solid rgb(0, 0, 0);
        margin-bottom: 20px;
        margin-left: 20px;
        margin-top: 40px;
        overflow: hidden;
        overflow: scroll;

    }

    #box>ul>li {
        list-style: none;
    }

    #text {
        width: 600px;
        height: 200px;
        border: 1px solid rgb(0, 179, 155);
        outline: none;
        margin-left: 20px;
    }

    button {
        width: 600px;
        height: 40px;
        background: rgb(1, 194, 168);
        color: #fff;
        outline: none;
        margin-left: 20px;
        display: block;
    }

    #box>#uls>li>button {
        width: 50px;
        height: 25px;
        float: right;
        margin-right: 10px;
        margin-top: 4px;
        border: none;
        background: red;
    }

    #box>#uls>li {
        height: 30px;
        display: block;
    }

2、html内容

 

    






发布

3、js实现

 //解决命名
function $(name) {
        return document.getElementById(name);
}
    var box = $('box');
    var text = $('text');
    var btn = $('btn');
    var uls = $('uls')

    if(text.value == ''){
        bth.disabled = true;
    }else{
        bth.disabled = false;
    }

//点击button获取text输入的内容
function butt() {
// btn.disabled = true;    //将按钮禁用，如果写在butt点击事件里面的话点击一次才能禁用；
    var texthq = text.value;  //将文本框输入的内容赋值给texthq；
    var ul_li = document.createElement('li');  //新建一个li
    var span = document.createElement('span');  //新建一个span
    span.innerText = texthq;  //将文本内容插入到span里
    ul_li.appendChild(span);  //将span插入到li里
    uls.appendChild(ul_li);   //将li插入到ul里


    text.value = "";    //执行完一次给text文本域清空
    var del = document.createElement('button');  //新建一个button按钮
    del.innerText = '删除';  //将删除写入到del中
    ul_li.appendChild(del);  //将button插入到li里面

    uls.onclick = function () {  //绑定事件，绑定到button的父级元素上面
        if (event.target.nodeName == 'BUTTON') {  //确定需要绑定的子元素
            event.target.parentNode.style = 'display:none'   //如果是button就点击button隐藏父级元素
        }
    }
}