留言板设计的流程,拖动窗口

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{width: 300px;margin: 100px auto;position: relative;}
            p{width: 300px;line-height: 60px;text-align: center;background-color: #ccc;border-radius: 5px;margin-top: 5px;}
            #box1{width: 250px;height: 150px;position: absolute;top: 100px;left: 25px;background-color: whitesmoke;margin: 0 auto;display: none;}
            h3{width: 250px;height: 30px;line-height: 30px;text-align: center;background-color: orange;margin: 0;padding: 0;}
            #area{width: 230px;background-color: white;margin-left: 10px;height:110px;}
        </style>
    </head>
    <body>
        <div id="box">
            <p>你好</p>
            <p>我好</p>
            <p>大家好</p>
            <div id="box1">
                <h3 id="oh3">弹出窗口</h3>
                <textarea id="area"></textarea>
                <input type="button" name="btn1" id="btn1" value="确定" />
                <input type="button" name="btn2" id="btn2" value="取消" />
            </div>
        </div>
        <input type="button" name="btn" id="btn" value="添加" />
    </body>
    <script type="text/javascript">
        var oh3 = document.querySelector("#oh3") 
        var obox = document.querySelector("#box") 
        var obox1 = document.querySelector("#box1") 
        var oarea = document.querySelector("#area")
        var obtn1 = document.querySelector("#btn1")
        var obtn2 = document.querySelector("#btn2")
        var obtn = document.querySelector("#btn")
        btn.onclick = function(){
            obox1.style.display="block";
            
            obtn1.onclick = function(){
                
                var op = document.createElement("p")
                obox.appendChild(op)
                if(oarea.value.length<150){
                    op.innerHTML=oarea.value;
                    oarea.value=""
                }else{
                    op.style.display="none"
                }
                
            }
            oarea.onkeydown= function(eve){
                var e = eve || window.event;
                if(e.keyCode==13){
                    var op = document.createElement("p")
                obox.appendChild(op)
                if(oarea.value.length<150){
                    op.innerHTML=oarea.value;
                    oarea.value=""
                }else{
                    op.style.display="none"
                }
                }
            }
            
            obtn2.onclick = function(){
                obox1.style.display="none"
            }
            
            oh3.addEventListener("mousedown",fn1)
            function fn1 (eve){
                e1=eve||window.event;
                oh3.addEventListener("mousemove",fn2)
                function fn2(eve){
                    e2=eve||window.event;
                    obox1.style.left=e2.pageX-e1.offsetX-650+"px";
                    obox1.style.top=e2.pageY-e1.offsetY-96+"px";
                }
                oh3.addEventListener("mouseup",fn3)
                function fn3(eve){
                    e3=eve||window.event;
                    oh3.removeEventListener("mousemove",fn2)
                }
            }
        }
        
    </script>
</html>
留言板设计的流程,拖动窗口

猜你喜欢
