课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

自己做的面板，提示错误不知道如何解决

来源：4-3 [DOM事件] QQ面板状态切换效果

大酒神之戟

2016-06-08 08:55

这是 html

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" href="css/master.css">

    <script type="text/javascript" src="js/script.js"></script>

</head>

<body>

    <div id="all">

        <div></div>

        <div>

            <span><img src="images/02d029edb652d44fdcbae37f448d6635.jpg"></span>

            <span>登陆</span>

        </div>

        <div>

            <div>

                <span>账 号:</span>

                <span ><input type="text" ></span>

            </div>

            <div class="foot2 clearfix">

                <span>密 码:</span>

                <span><input type="text"></span>

            </div>

            <div class="foot3 clearfix">

                <div id="foot3_left">登 录</div>

                <div class="foot3_right clearfix">

                    <div></div>

                    <div title="选择在线状态" id="right_box">

                        <div id="login_show" class="right_box_1 online"></div>

                        <div></div>

                        <div id="stateTxt">线上</div>

                        <ul id="panel_div">

                            <li id="online clearfix">

                               <div class="icon online"></div> 

                               <div>我在线上</div> 

                            </li>

                            <li id="callme clearfix">

                               <div class="icon callme"></div> 

                               <div>我在忙碌</div> 

                            </li>

                            <li id="away clearfix">

                               <div class="icon away"></div> 

                               <div>我在隐身</div> 

                            </li>

                            <li id="busy clearfix">

                               <div class="icon busy"></div> 

                               <div>我不在线</div> 

                            </li>

                            

                        </ul>

                    </div>

                    

                </div>

            </div>

        </div>

    </div>


</body>

</html>



这是js

window.onload=drag;

function getByClass(clsName,parent){

    var oParent=parent?document.getElementById(parent):document,

        eles=[],

        elements=oParent.getElementsByTagName("*");

    for(var i=0,l=elements.length;i<l;i++){

        if(elements[i].className==clsName){

            eles.push(elements[i]);

        }

    }

    return eles;

}



function drag(){

    var oTittle = getByClass("YD","all")[0];

    //拖动

    oTittle.onmousedown=fnDown;

    var foot3_left = document.getElementById("foot3_left")

    foot3_left.onclick=function(){

            alert("哈哈")

    }

    //切换状态

    var right_box = document.getElementById("right_box"),

        panel_div = document.getElementById("panel_div"),

        lis= panel_div.getElementsByTagName("li"),

        stateTxt = document.getElementById("stateTxt"),

        login_show =document.getElementById("login_show");

        right_box.onclick=function(e){

            e = e || window.event;

            if(e.stopPropagation){

                e.stopPropagation()

            }else{

                e.cancelBubble=true

            }

            panel_div.style.display="block";

        }

    //鼠标滑过、离开和点击状态列表时

    for(var i=0,l=lis.length;i<l;i++){

        lis[i].onmouseover=function(){

            this.style.background="#567";

            this.style.color="#fff"

        }

        lis[i].onmouseout=function(){

            this.style.background="#fff";

            this.style.color="#000"

        }

        lis[i].onclick=function(e){

            e = e || window.event;

            if(e.stopPropagation){

                e.stopPropagation()

            }else{

                e.cancelBubble=true;

            }

            var id = this.id,

            panel_div.style.display="none";

            stateTxt.innerHTML=getByClass('select_text',id)[0].innerHTML;

            login_show.className=null;

            login_show.className="right_box_1 "+id;

        }

    }

}


function fnDown(event){

    event = event || window.event;

    var oDrag = document.getElementById("all");

//    document.onmousemove=function(event){

//        event = event || window.event;

//        oDrag.style.left=event.clientX+"px";

//        oDrag.style.top=event.clientY+"px"

//    }

//    光标按下时光标和面板之间的距离

    disxX=event.clientX-oDrag.offsetLeft,

    disxY=event.clientY-oDrag.offsetTop;

    document.onmousemove=function(event){

        event = event||window.event

        fnMove(event,disxX,disxY);

    }

    document.onmouseup=function(){

         document.onmousemove=null;

         document.onmouseup=null;

        

    }

}


function fnMove(e,posX,posY){

     var oDrag = document.getElementById("all"),

         l=e.clientX-posX,

         t=e.clientY-posY;

         winW=document.documentElement.clientWidth || document.body.clientWidth,

         winH=document.documentElement.clientHeight || document.body.clientHeight,

         maxW=winW-oDrag.offsetWidth-10,

         maxH=winH-oDrag.offsetHeight;

         if(l<0){

             l=0

         }else if(l>maxW){

             l=maxW

         }

         if(t<0){

             t=10

         }else if(t>maxH){

             t=maxH

         }

         oDrag.style.left=l+"px";

         oDrag.style.top=t+"px"

    

}


这是css




/*重置样式*/

body,div,p,ul,ol,dl,dt,dd,li,form,input,table,th,td,img,h1,h2,h3,h4,h5,h6 { margin: 0;padding: 0;}

body { background: #FFF; color: #000; font-size: 12px; font-style: normal; font-family:'Microsoft Yahei','微软雅黑','Simsun','宋体','Arial', sans-serif;}

em, b, i { font-style:normal;}

li { list-style:none;}

img { border:none;}


/*通用*/

.gogo{ margin-left: 10px;}

.come{ margin-top: 20px;}

.hide {display: none;}

.flt {float:left;}

.frt {float:right;}

.clear { clear: both;}

.clearfix { *zoom: 1;} 

.clearfix:before, .clearfix:after { display: table; line-height: 0; content: "";}

.clearfix:after { clear: both;}

.pd_left20{ padding-left: 20px;}

.all{

    width: 450px;

    height: 270px;

    border: 2px solid #ccc;

    box-shadow: 0 3px 16px #ddd, 0 0 3px #ddd, 0 0 3px #ddd;

    position: absolute;

    left: 35%;

    top: 200px;

    border-radius: 10px;

    

}

.head{

    height: 80px;

    margin-top: 10px;

    width: 450px;

}

.head .span1{

    width: 80px;

    height: 80px;

    margin-left: 150px;

    display:block;

    float: left;

}

.head .span1 img{

    width: 60px;

    height: 60px;

}

.head .span2{

    height: 60px;

    line-height: 60px;

    display: block;

    width: 80px;

    float: left;

    font-size: 22px;

    font-weight: bold

}

.foot{

    width: 450px;

    height: 180px;

}

.foot1{

    width: 330px;

    padding-left: 120px;

    height: 40px;

    margin-top: 20px;

}

.foot2{

    width: 330px;

    height: 40px;

    padding-left: 120px;

}

.foot1 .span1{

    font-weight: bolder;

    font-size: 18px;

}

.foot1 input{

    border-radius: 10px;

    box-shadow: none !important;

    outline:none;

    padding-left: 10px;

    border: none;

    border: 1px solid #ccc;

    height: 20px;

}

.foot2 .span1{

    font-weight: bolder;

    font-size: 18px;

}

.foot2 input{

    border-radius: 10px;

    box-shadow: none !important;

    outline:none;

    padding-left: 10px;

    border: none;

    border: 1px solid #ccc;

    height: 20px;

}

.foot3{

    margin-top: 10px;

    height: 35px;

    width: 450px;

}

.foot3_left{

    width: 100px;

    height: 35px;

    line-height: 35px;

    background-color: #08c;

    color: #fff;

    border-radius: 10px;

    text-align: center;

    cursor: pointer;

    margin-left: 120px;

    float: left;

}

.YD{

    position: absolute;

    width: 450px;

    height: 80px;

    cursor: move;

}




.right_box{

    float: left;

    width: 200px;

    height: 30px;

    font-size: 14px;

    margin-left: 15px;

    margin-top: 10px;

    cursor: pointer;

    position: relative;

}

.online{

    background-image: url(../images/qwdr.png);

    background-repeat: no-repeat;

    background-size: 20px 20px;

    

}

.away{

    background-image: url(../images/qwdr.png);

    background-repeat: no-repeat;

    background-size: 20px 20px;

}

.callme{

    background-image: url(../images/qwdr.png);

    background-repeat: no-repeat;

    background-size: 20px 20px;

}

.busy{

    background-image: url(../images/qwdr.png);

    background-repeat: no-repeat;

    background-size: 20px 20px;

}

.right_box_1 {

    width: 25px;

    height: 25px;

    float: left

}

.right_box_2{

    background-image: url(../images/jiantou.png);

    background-repeat: no-repeat;

    background-size: 10px 6px;

    margin-top: 6px;

    width: 20px;

    height: 20px;

    float: left

}

.panel_div{

    width: 100px;

    height: 100px;

    position: absolute;

    top:0px;

    left: 0;

    display: none;

    background-color: #fff;

    border: 1px solid #ccc

}

.icon{

    width: 25px;

    height: 25px;

    float: left;

}

.select_text{

    width: 70px;

    height: 25px;

    margin-left: 3px;

    float: left;

    font-size: 12px;

    padding-top: 2px;

}

.panel_div li{

    width: 100px;

    height: 25px;

}





























写回答 关注

4回答

  • 盯叮町玎仃
    2016-06-08 12:56:52

    JS

    window.onload=drag;

function getByClass(clsName,parent){

    var oParent=parent?document.getElementById(parent):document,

        eles=[],

        elements=oParent.getElementsByTagName("*");

    for(var i=0,l=elements.length;i<l;i++){

        if(elements[i].className==clsName){

            eles.push(elements[i]);

        }

    }

    return eles;

}



function drag(){

    var oTittle = getByClass("YD","all")[0];

    //拖动

    oTittle.onmousedown=fnDown;

    var foot3_left = document.getElementById("foot3_left");

    //切换状态

    var right_box = document.getElementById("right_box"),

        panel_div = document.getElementById("panel_div"),

        lis= panel_div.getElementsByTagName("li"),

        stateTxt = document.getElementById("stateTxt"),

        login_show =document.getElementById("login_show");

        right_box.onclick=function(e){

            e = e || window.event;

            if(e.stopPropagation){

                e.stopPropagation();

            }else{

                e.cancelBubble=true;

            }

            panel_div.style.display="block";

        }

    //鼠标滑过、离开和点击状态列表时

    for(var i=0,l=lis.length;i<l;i++){

        lis[i].onmouseover=function(){

            this.style.background="#567";

            this.style.color="#fff"

        }

        lis[i].onmouseout=function(){

            this.style.background="#fff";

            this.style.color="#000"

        }

        lis[i].onclick=function(e){

            e = e || window.event;

            if(e.stopPropagation){

                e.stopPropagation()

            }else{

                e.cancelBubble=true;

            }

            var id = this.id;

            panel_div.style.display='none';

            stateTxt.innerHTML=getByClass('sTxt',id)[0].innerHTML;

            login_show.className=null;

            login_show.className="right_box_1 "+id;

        }

    }

}


function fnDown(event){

    event = event || window.event;

    var oDrag = document.getElementById("all");

//    document.onmousemove=function(event){

//        event = event || window.event;

//        oDrag.style.left=event.clientX+"px";

//        oDrag.style.top=event.clientY+"px"

//    }

//    光标按下时光标和面板之间的距离

    disxX=event.clientX-oDrag.offsetLeft,

    disxY=event.clientY-oDrag.offsetTop;

    document.onmousemove=function(event){

        event = event||window.event

        fnMove(event,disxX,disxY);

    }

    document.onmouseup=function(){

         document.onmousemove=null;

         document.onmouseup=null;

        

    }

}


function fnMove(e,posX,posY){

     var oDrag = document.getElementById("all"),

         l=e.clientX-posX,

         t=e.clientY-posY;

         winW=document.documentElement.clientWidth || document.body.clientWidth,

         winH=document.documentElement.clientHeight || document.body.clientHeight,

         maxW=winW-oDrag.offsetWidth-10,

         maxH=winH-oDrag.offsetHeight;

         if(l<0){

             l=0

         }else if(l>maxW){

             l=maxW

         }

         if(t<0){

             t=10

         }else if(t>maxH){

             t=maxH

         }

         oDrag.style.left=l+"px";

         oDrag.style.top=t+"px"

    

}


    0 0
  • 盯叮町玎仃
    2016-06-08 12:56:24

    CSS

    body,div,p,ul,ol,dl,dt,dd,li,form,input,table,th,td,img,h1,h2,h3,h4,h5,h6 { margin: 0;padding: 0;}
body { background: #FFF; color: #000; font-size: 12px; font-style: normal; font-family:'Microsoft Yahei','微软雅黑','Simsun','宋体','Arial', sans-serif;}
em, b, i { font-style:normal;}
li { list-style:none;}
img { border:none;}

/*通用*/
.all{
    width: 450px;

    height: 270px;

    border: 2px solid #ccc;

    box-shadow: 0 3px 16px #ddd, 0 0 3px #ddd, 0 0 3px #ddd;

    position: absolute;

    left: 35%;

    top: 200px;

    border-radius: 10px;

    

}
.gogo{ margin-left: 10px;}
.come{ margin-top: 20px;}
.hide {display: none;}
.flt {float:left;}
.frt {float:right;}
.clear { clear: both;}
.clearfix { *zoom: 1;} 
.clearfix:before, .clearfix:after { display: table; line-height: 0; content: "";}
.clearfix:after { clear: both;}
.pd_left20{ padding-left: 20px;}


.head{

    height: 80px;

    margin-top: 10px;

    width: 450px;

}

.head .span1{

    width: 80px;

    height: 80px;

    margin-left: 150px;

    display:block;

    float: left;

}

.head .span1 img{

    width: 60px;

    height: 60px;

}

.head .span2{

    height: 60px;

    line-height: 60px;

    display: block;

    width: 80px;

    float: left;

    font-size: 22px;

    font-weight: bold

}

.foot{

    width: 450px;

    height: 180px;

}

.foot1{

    width: 330px;

    padding-left: 120px;

    height: 40px;

    margin-top: 20px;

}

.foot2{

    width: 330px;

    height: 40px;

    padding-left: 120px;

}

.foot1 .span1{

    font-weight: bolder;

    font-size: 18px;

}

.foot1 input{

    border-radius: 10px;

    box-shadow: none !important;

    outline:none;

    padding-left: 10px;

    border: none;

    border: 1px solid #ccc;

    height: 20px;

}

.foot2 .span1{

    font-weight: bolder;

    font-size: 18px;

}

.foot2 input{

    border-radius: 10px;

    box-shadow: none !important;

    outline:none;

    padding-left: 10px;

    border: none;

    border: 1px solid #ccc;

    height: 20px;

}

.foot3{

    margin-top: 40px;

    height: 35px;

    width: 450px;

}

.foot3_left{

    width: 100px;

    height: 35px;

    line-height: 35px;

    background-color: #08c;

    color: #fff;

    border-radius: 10px;

    text-align: center;

    cursor: pointer;

    margin-left: 50px;

    float: left;

}

.YD{
    /*position: absolute;
    width: 450px;
    height: 80px;

    cursor: move;
    */
    margin-left: 150px;
            margin-top: 5px;
            width: 100px;
            height: 50px;
            cursor: move;

}




.right_box{

    float: left;

    width: 200px;

    height: 30px;

    font-size: 14px;

    margin-left: 40px;

    margin-top: 10px;

    cursor: pointer;

    position: relative;

}

.online{

    background-image: url(../images/qwdr.png);

    background-repeat: no-repeat;

    background-size: 20px 20px;

    

}

.away{

    background-image: url(../images/qwdr.png);

    background-repeat: no-repeat;

    background-size: 20px 20px;

}

.callme{

    background-image: url(../images/qwdr.png);

    background-repeat: no-repeat;

    background-size: 20px 20px;

}

.busy{

    background-image: url(../images/qwdr.png);

    background-repeat: no-repeat;

    background-size: 20px 20px;

}

.right_box_1 {

     /*width: 25px;*/

    height: 25px;

    float: left

}

.right_box_2{

    background-image: url(../images/jiantou.png);

    background-repeat: no-repeat;

    background-size: 10px 6px;

    margin-top: 6px;

    width: 20px;

    height: 20px;

    float: left

}

.panel_div{

    width: 100px;

    height: 100px;

    position: absolute;

    top:0px;

    left: 0;

    display: none;

    background-color: #fff;

    border: 1px solid #ccc

}

.icon{

    width: 25px;

    height: 25px;

    float: left;

}

.select_text{

    width: 70px;

    height: 25px;

    margin-left: 3px;

    float: left;

    font-size: 12px;

    padding-top: 2px;

}

.panel_div li{

    width: 100px;

    height: 25px;

}


    0 0
  • 盯叮町玎仃
    2016-06-08 12:55:41
    HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
     <link href="css/main.css" rel="stylesheet" />
    <script src="js/drag.js"></script>
</head>
<body>
    <div id="all" class='all'>
        <div class ='YD' style=" width:160px; overflow:hidden ">
            <!--<img src="images/02d029edb652d44fdcbae37f448d6635.jpg">-->
            <span><img src="images/login_window_logo.png" ></span>
        </div>
        <div>
            <div class="foot2 clearfix">
                <span>账 号:</span>
                <span ><input type="text" ></span>
            </div>
            <div class="foot2 clearfix">
                <span>密 码:</span>
                <span><input type="text"></span>
            </div>
            <div class="foot3  foot3_left clearfix">
                <div id="foot3_left" ><p style='font-size: 20px;'>登 录</p></div>
            </div>

                <!--具体状态选择-->
                <!--<div class="foot3_right clearfix">-->
                <div class="right_box">
                    <div title="选择在线状态" id="right_box">
                        <div id="login_show" class="right_box_1 online"></div>
                        <div id="stateTxt">线上</div>

                        <ul id="panel_div">
                            <li id="online">
                               <div class="state online"></div> 
                               <div class='sTxt'>我在线上</div> 
                            </li>
                            <li id="callme">
                               <div class="state callme"></div> 
                               <div class='sTxt'>我在忙碌</div> 
                            </li>
                            <li id="away">
                               <div class="state away"></div> 
                               <div class='sTxt'>我在隐身</div> 
                            </li>
                            <li id="busy">
                               <div class="state busy"></div> 
                               <div class='sTxt'>我不在线</div> 
                            </li>
                        </ul>
                    </div>
                </div>
            
        </div>
    </div>
</body>
</html>



    0 0
  • 盯叮町玎仃
    2016-06-08 11:18:50

    报错提示贴上来看一下，还有，哪些部分是你自己写的？

    4 0

    盯叮町玎仃 回复大酒神之戟

    你html代码里面没有YD这个class啊，你运行的时候报错没有显示吗？

    2016-06-08 15:14:10

    共 4 条回复 >

DOM事件探秘

DOM事件？本课程会通过实例来给小伙伴们讲解如何使用这些事件

99532 学习 · 1300 问题

查看课程

相似问题

bug 如何解决

回答 2

如何检验代码的错误？

回答 1

面板不能拖拽且title没显示

回答 1

如何解决鼠标和键盘冲突的问题？

回答 2

不知道为什么不能运行，求解答

回答 3

打开慕课网App查看更多内容