自己做的面板，提示错误不知道如何解决
这是 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;
}
