解释javscript代码 老师要答辩 自己不会 想请大牛解释 最好的能加上注释 因为是小白

本帖最后由 showbo 于 2014-09-23 08:57:18 编辑

解决方案 »

  1.   

    getElementById 根据id获取元素
    dom.getElementsByTagName  获取dom元素下所有标签为指定标签的元素
    dom.style...设置dom的样式
    appendChild  removeChild添加、移除子元素基本上没复杂的东西啊 貌似  自己好好看几遍就明白了
      

  2.   

    请贴出对应的HTML部分，光有JS代码很难解释清楚。
      

  3.   

    小白白好，这么菜的代码还好意思拿去答辩，a忽悠b b忽悠a.
      

  4.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>会员管理界面</title>
    <style type="text/css">
    body{
    font-size:12px;
    background-image: url(images/bg.gif);
    background-repeat: repeat;
    }
    ul,li,h2{margin:0;padding:0;}
    ul{list-style:none;}
    #top{
    width:909px;
    height:26px;
    background-image: url(images/h2bg.gif);
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    background-repeat: repeat-x;
    }
    #top h2{
    width:150px;
    height:24px;
    float:left;
    font-size:12px;
    text-align:center;
    line-height:20px;
    color:#0066FF;
    font-weight: bold;
    padding-top: 2px;
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #99BBE8;
    border-left-color: #99BBE8;
    }
    #top .jg {
    width: 5px;
    float: left;
    background-color: #DCE6F5;
    height: 26px;
    }
    #topTags{
    width:740px;
    height:24px;
    float:left;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    padding-top: 2px;
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #99BBE8;
    border-left-color: #99BBE8;
    padding-left: 10px;
    }
    #topTags ul li{
    float:left;
    width:100px;
    height:21px;
    margin-right:4px;
    display:block;
    text-align:center;
    cursor:pointer;
    padding-top: 3px;
    color: #15428B;
    font-size: 12px;
    }
    #main{
    width:909px;
    height:501px;
    background-color:#F5F7E6;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    }
    #main .jg {
    width: 5px;
    float: left;
    background-color: #DFE8F6;
    height: 500px;
    }
    #leftMenu{
    width:150px;
    height:500px;
    background-color:#DAE7F6;
    float:left;
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #99BBE8;
    border-left-color: #99BBE8;
    }
    #leftMenu ul{margin:10px;}
    #leftMenu ul li{
    width:130px;
    height:22px;
    display:block;
    cursor:pointer;
    text-align:center;
    margin-bottom:5px;
    background-color: #D9E8FB;
    background-image: url(images/tabbg01.gif);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    padding-top: 2px;
    line-height: 20px;
    }
    #leftMenu ul li a{
    color:#000000;
    text-decoration:none;
    background-image: url(images/tb-btn-sprite_03.gif);
    background-repeat: repeat-x;
    }
    #content{
    width:750px;
    height:500px;
    float:left;
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #99BBE8;
    border-left-color: #99BBE8;
    background-color: #DAE7F6;
    }
    .content{
    width:740px;
    height:490px;
    display:none;
    padding:5px;
    overflow-y:auto;
    line-height:30px;
    background-color: #FFFFFF;
    }
    #footer{
    width:907px;
    height:26px;
    background-color:#FFFFFF;
    line-height:20px;
    text-align:center;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #99BBE8;
    border-left-color: #99BBE8;
    background-image: url(images/h2bg.gif);
    background-repeat: repeat-x;
    }
    .content1 {width:740px;height:490px;display:block;padding:5px;overflow-y:auto;line-height:30px;}
    </style>
    <script type="text/javascript">
    window.onload=function(){
    function $(id){return document.getElementById(id)}
    var menu=$("topTags").getElementsByTagName("ul")[0];//顶部菜单容器
    var tags=menu.getElementsByTagName("li");//顶部菜单
    var ck=$("leftMenu").getElementsByTagName("ul")[0].getElementsByTagName("li");//左侧菜单
    var j;
    //点击左侧菜单增加新标签
    for(i=0;i<ck.length;i++){
    ck[i].onclick=function(){
    $("welcome").style.display="none"//欢迎内容隐藏
    clearMenu();
    this.style.background='url(images/tabbg02.gif)'
    //循环取得当前索引
    for(j=0;j<8;j++){
    if(this==ck[j]){
    if($("p"+j)==null){
    openNew(j,this.innerHTML);//设置标签显示文字
     }
    clearStyle();
    $("p"+j).style.background='url(images/tabbg1.gif)';
    clearContent();
    $("c"+j).style.display="block";
       }
     }
    return false;
      }
     }
    //增加或删除标签
    function openNew(id,name){
    var tagMenu=document.createElement("li");
    tagMenu.id="p"+id;
    tagMenu.innerHTML=name+"&nbsp;&nbsp;"+"<img src='images/off.gif' style='vertical-align:middle'/>";
    //标签点击事件
    tagMenu.onclick=function(evt){
    clearMenu();
    ck[id].style.background='url(images/tabbg02.gif)'
    clearStyle();
    tagMenu.style.background='url(images/tabbg1.gif)';
    clearContent();
    $("c"+id).style.display="block";
    }
    //标签内关闭图片点击事件
    tagMenu.getElementsByTagName("img")[0].onclick=function(evt){
    evt=(evt)?evt:((window.event)?window.event:null);
    if(evt.stopPropagation){evt.stopPropagation()} //取消opera和Safari冒泡行为;
    this.parentNode.parentNode.removeChild(tagMenu);//删除当前标签
    var color=tagMenu.style.backgroundColor;
    //设置如果关闭一个标签时，让最后一个标签得到焦点
    if(color=="#ffff00"||color=="yellow"){//区别浏览器对颜色解释
    if(tags.length-1>=0){
    clearStyle();
    tags[tags.length-1].style.background='url(images/tabbg1.gif)';
    clearContent();
    var cc=tags[tags.length-1].id.split("p");
    $("c"+cc[1]).style.display="block";
    clearMenu();
    ck[cc[1]].style.background='url(images/tabbg1.gif)';
     }
    else{
    clearContent();
    clearMenu();
    $("welcome").style.display="block"
       }
      }
    }
    menu.appendChild(tagMenu);
    }
    //清除菜单样式
    function clearMenu(){
    for(i=0;i<ck.length;i++){
    ck[i].style.background='url(images/tabbg01.gif)';
     }
    }
    //清除标签样式
    function clearStyle(){
    for(i=0;i<tags.length;i++){
    menu.getElementsByTagName("li")[i].style.background='url(images/tabbg2.gif)';
      }
    }
    //清除内容
    function clearContent(){
    for(i=0;i<7;i++){
    $("c"+i).style.display="none";
     }
    }
    }
    </script>
    </head>
    <body>
    <div id="top">
    <h2>管理菜单</h2>
    <div class=jg></div>
    <div id="topTags">
    <ul>
    </ul>
    </div>
    </div>
    <div id="main"> 
    <div id="leftMenu">
    <ul>
    <li>个人资料</li>
    <li>上传列表</li>
    <li>下载列表</li>
    <li>留言管理</li>
    <li>帮助信息</li>
    </ul>
    </div>
    <div class=jg></div>
    <div id="content">
    <div id="welcome" class="content" style="display:block;">
      <div align="center">
        <p>&nbsp;</p>
        <p><strong>欢迎使用用户管理系统！</strong></p>
        <p>&nbsp;</p>
        </div>
    </div>
    <div id="c0" class="content">个人资料</div>
    <div id="c1" class="content">上传列表</div>
    <div id="c2" class="content">下载列表</div>
    <div id="c3" class="content">留言管理</div>
    <div id="c6" class="content">帮助信息</div>
    </div>
    </div>
    <div id="footer">jsp大作业</div>
    </body>
    </html>
      

  5.   

    <script type="text/javascript">
    window.onload=function(){
    function $(id){return document.getElementById(id)}//一个辅助方法，表示下面代码使用$(id)就相当于该id值的元素对象
    var menu=$("topTags").getElementsByTagName("ul")[0];//先获取id位topTags的元素，就是一个div,自己可以找找，再获取该div下标签名为ul的第一个标签元素，就div下面的那个<ul></ul>
    var tags=menu.getElementsByTagName("li");//获取上面那个ul下面的所有li标签，暂时不知道这是干嘛的，很明显没有li标签。
    var ck=$("leftMenu").getElementsByTagName("ul")[0].getElementsByTagName("li");//同上，获取id为leftMenu的元素，也是一个div,再获取这个div下面第一个<ul>标签下的所有<li>标签，就是从那个个人资料到帮助信息
    var j;
    //遍历li标签，就是从个人资料到帮助信息
    for(i=0;i<ck.length;i++){
    //给每个li标签加一个点击事件
    ck[i].onclick=function(){
    $("welcome").style.display="none"//讲id为welcome的元素隐藏-欢迎内容隐藏
    clearMenu();//方法调用
    this.style.background='url(images/tabbg02.gif)'//把当前li标签的背景图片换了
    //循环取得当前索引
    //这谁写的代码，j<8..... 无视这句话啊，吐槽一下╮(╯▽╰)╭
    for(j=0;j<8;j++){
    if(this==ck[j]){
    获取当前li标签的索引，比如说是第一个li标签就是j=0
    if($("p"+j)==null){
    再以第一个标签为例啊，就是判断id为p0的元素是否为空，为空就进来,很明显为空，继续往下走啊
    openNew(j,this.innerHTML);//方法调用，把当前索引和当前li标签里面的内容传人方法。作用是设置标签显示文字
     }
    clearStyle();//方法调用，清楚样式
    $("p"+j).style.background='url(images/tabbg1.gif)';//将新添加的id为P(j)的标签加上背景图片,应该是openNew那个方法添加的
    clearContent();
    $("c"+j).style.display="block";//把id为c(j)的元素显示,就是那些div
       }
     }
    return false;
      }
     }
    //下面不解释了，好累楼主可以去看看最基本的js和dom语法，花不了半个小时
    //增加或删除标签
    function openNew(id,name){
    var tagMenu=document.createElement("li");
    tagMenu.id="p"+id;
    tagMenu.innerHTML=name+"  "+"<img src='images/off.gif' style='vertical-align:middle'/>";
    //标签点击事件
    tagMenu.onclick=function(evt){
    clearMenu();
    ck[id].style.background='url(images/tabbg02.gif)'
    clearStyle();
    tagMenu.style.background='url(images/tabbg1.gif)';
    clearContent();
    $("c"+id).style.display="block";
    }
    //标签内关闭图片点击事件
    tagMenu.getElementsByTagName("img")[0].onclick=function(evt){
    evt=(evt)?evt:((window.event)?window.event:null);
    if(evt.stopPropagation){evt.stopPropagation()} //取消opera和Safari冒泡行为;
    this.parentNode.parentNode.removeChild(tagMenu);//删除当前标签
    var color=tagMenu.style.backgroundColor;
    //设置如果关闭一个标签时，让最后一个标签得到焦点
    if(color=="#ffff00"||color=="yellow"){//区别浏览器对颜色解释
    if(tags.length-1>=0){
    clearStyle();
    tags[tags.length-1].style.background='url(images/tabbg1.gif)';
    clearContent();
    var cc=tags[tags.length-1].id.split("p");
    $("c"+cc[1]).style.display="block";
    clearMenu();
    ck[cc[1]].style.background='url(images/tabbg1.gif)';
     }
    else{
    clearContent();
    clearMenu();
    $("welcome").style.display="block"
       }
      }
    }
    menu.appendChild(tagMenu);
    }
    //清除菜单样式
    function clearMenu(){
    for(i=0;i<ck.length;i++){
    ck[i].style.background='url(images/tabbg01.gif)';
     }
    }
    //清除标签样式
    function clearStyle(){
    for(i=0;i<tags.length;i++){
    menu.getElementsByTagName("li")[i].style.background='url(images/tabbg2.gif)';
      }
    }
    //清除内容
    function clearContent(){
    for(i=0;i<7;i++){
    $("c"+i).style.display="none";
     }
    }
    }
    </script>
      

  6.   

    不是不想解释，真心不知道解释啥看样子楼主没javascript基础，还是赶紧拿本书，看几天就OK