JavaScript# DOM实现留言板

╰+哭是因爲堅強的太久メ 2022-05-19 00:24 738阅读 0赞

![70][]

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <style>  
        .wrap\{  
            width: 500px;  
            /\*height: 400px;\*/  
            border: 3px solid black;  
            /\*position: relative;\*/  
            top: 0;  
            left: 0;  
            padding: 50px;  
            margin: 0 auto;

\}  
        .textBox\{  
            width: 500px;  
            height: 250px;  
            border: 1px solid \#CBA4C3;  
            margin: 0 auto;  
        \}  
        .send\{  
            width: 50px;  
            height: 30px;  
            background: orange;  
              
        \}  
    </style>  
</head>  
<body>  
    <div class="wrap">  
        <textarea class="textBox" ="" id="" cols="30" rows="10"></textarea>  
        <input type="button" value="发表" class="send">  
    </div>  
</body>  
<script>  
    //获取元素  
    var wrap = document.querySelector(".wrap");  
    var textBox = document.querySelector(".textBox");  
    var btn = document.querySelector("input");      
            // 点击按钮发送  
            btn.onclick = function()\{  
                // 首先判断在文本框中是否有输入值  
                if (textBox.value != "") \{  
                // 获取文本框的文本  
                // 并且在wrap中添加一个div，内有文本框的文本  
                // 创建div  
                var message = document.createElement("div");  
                // 创建删除按钮  
                var x = document.createElement("div");  
                // 在删除按钮右上角写上X  
                x.innerHTML = "X";  
                // 将删除按钮定位在message右上角  
                message.style.width = "500px";  
                  
                message.style.background = "\#D9AEC7";  
                message.style.position = "relative";  
                message.style.bottom = "0px";  
                message.style.marginTop = "10px";  
                message.style.overflow = "hidden";     
                x.style.position = "absolute";  
                x.style.right = "0px";  
                x.style.top = "0px";  
                x.style.cursor = "pointer";  
                console.log(message);  
                console.log(x);  
                // 将信息盒写入wrap中  
                wrap.appendChild(message);  
                // 将文本框的值写入信息盒中  
                message.innerHTML = textBox.value;  
                // 点击x号  
                message.appendChild(x);  
                x.onclick = function()\{  
                    // 获取信息盒高度  
                    var height = message.offsetHeight;  
                    console.log(height);  
                    // 计时器不断减少高度  
                    var timer = setInterval(function()\{  
                        height -= 1;  
                        if (height == 0 ) \{  
                            message.style.display = "none";  
                            clearInterval(timer);  
                        \}  
                        message.style.height = height + "px";  
                    \},10);  
                      
                \}          
            \}else\{  
                alert("输入信息不可为空");  
            \}  
        \}  
</script>  
</html>

[70]: /images/20220519/1ce4872ebf07420fa79b028ab9a2608f.png