JS经典基础案例,对话框

 admin  WEB  2019-11-15

输入框中没有输入东西的时候按钮式是橘色的,不能点击,当有东西输入的时候按钮立马变成粉色,并且点击提交之后,会在下面生成一个信息框,点击右上角的x号,可以删除那条信息框:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrap{
            width: 800px;
            /*height: 1500px;*/
            border:3px solid ;
            margin:0 auto;
            padding-bottom: 20px;
        }
        textarea{
            display: block;
            width: 90%;
            height: 300px;
            border:5px solid pink;
            margin:0 auto;
            margin-top:50px;

            outline: none;

        }
        input[type="button"]{
            display: block;
            background-color: pink;
            width: 80px;
            height: 30px;
            margin-left: 40px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div class="wrap">
    <textarea  cols="30" rows="10" id="content"></textarea>
    <input type="button" value="提交">
</div>
</body>
<script>
    //获取元素
    var inp = document.querySelector("input");
    var text = document.getElementById("content");
    var wrap = document.querySelector(".wrap");
    //点击事件
    inp.onclick = function(){
        //当文本框中输入不为空时
        if(text.value!=""){
            console.log(text.value);
            //创建一个对话框
            var dialog = document.createElement("div");
            //为对话框设置样式
            dialog.style.width="85%";
            dialog.style.border="3px solid pink";
            dialog.style.backgroundColor="#A3DAC1";
            dialog.style.marginLeft="40px";
            dialog.style.marginTop="10px";
            dialog.style.position="relative";
            dialog.style.borderRadius="5px";
            //设置换行,中文是默认可以换行的,英文需要设置
            dialog.style.wordWrap="break-word"
            dialog.style.padding="20px";
            //将对话框添加到wrap的子级中
            wrap.appendChild(dialog);

            //将获取到的value添加到对话框中
            dialog.innerHTML+=text.value;

            //创建删除的按钮
            var d = document.createElement("div");
            //为删除按钮设置样式
            d.style.width="15px";
            d.style.height="15px";
            d.innerHTML="X";
            d.style.position="absolute";
            d.style.top="0px";
            d.style.right="0px";
            d.style.cursor="pointer";
            //将删除按钮添加到对话框中
            dialog.appendChild(d);
            console.log(d);
            console.log(dialog);

            //将value置空
            text.value="";

            //当点击删除按钮时删除对话框
            d.onclick = function(){
                dialog.remove();
            }
        }
    }

    setInterval(function(){
        if(text.value){
            inp.style.backgroundColor="#F49D9A";
            inp.disabled=false;
        }else{
            inp.style.backgroundColor="#F4D6B4";
            inp.disabled=true;
        }
    },10);
</script>
</html>

效果如图: