js留言功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>留言板</title>
    <style>
        * {
            padding: 0;
            margin: 0
        }

        h4 {
            height: 40px;
            width: 600px;
            display: block;
            margin: 0 auto;
            border-bottom: 1px solid black;
            line-height: 40px;
        }

        ul {
            width: 600px;
            /*height:80px;*/
            padding:20px 0;
            /*padding: 40px 0;*/
            margin: 0 auto;
            border: 1px solid black;
        }

        ul li {
            width: 600px;
            height: 40px;
            position: relative;
            list-style:none;
            cursor: pointer;
            text-indent:1em;
        }

        ul li p {
            float: left
        }

        ul li .p3 {
            position: absolute;
            right: 0;
            top: -20px;
            display: none;
        }

        textarea {
            width: 600px;
            height: 50px;
            margin: 0 auto;
            display: block;
            margin-top: 20px;
        }

        input {
            width: 600px;
            height: 40px;
            margin: 0 auto;
            display: block;
        }
    </style>
</head>
<body>
<h4>留言内容</h4>
<ul id='ul'>
    <span id="oSpan">请输入想说的内容...</span>
</ul>
<textarea id="te"></textarea><br />
<input type="button" value="发表留言" id='obt'>
</body>
<script>
    window.onload=function() {
        var otext = document.getElementById('te');
        var index =0;
        obt.onclick = function () {
            index++
            oTex = otext.value;
            if (oTex !== '') {
                oLi = document.createElement('li');
                ul.appendChild(oLi);
                oLi.innerHTML = index+oTex;
                oSpan.style.display = 'none';
                otext.value = '';

                oLi.onclick = function () {
                    this.parentNode.removeChild(this);
                };

                oLi.onmouseover = function () {
                   this.style.background='#f2f2f2';
                    oP = document.createElement('p');
                    this.appendChild(oP);
                    oP.innerHTML = '你确认删除吗';
                    oP.className = 'p3';
                    oP.style.display = 'block';
                };

                oLi.onmouseout = function () {
                    this.style.background='';
                    this.removeChild(this.children[0]);
                }
            };
        }
    }
</script>
</html>
猜你喜欢
