zoukankan      html  css  js  c++  java
  • 广州某公司笔试题(英文)js

    JavaScript

    1.Please use javascript to create a class of right-Click-Menu that base on the web.

    2.make this class extend to a new class that can expand a second menu.

    3.make this class extend to a new class that can expand a limitless menu.

    explanationfor example, like the windows, when we click the right button of the mouse on the desk, that will pop-up a menu, that is what we

    call the right-click-menu. watch carefully, our right-click-menu is base on the web but not the others, also not like the fixed navigation.

     

    references blow,you can implements it:

    <html>

    <head>

    <title>右键无限级菜单</title>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

    <STYLE>

    .menutable {

           BORDER-RIGHT: #307ce8 1px solid; BORDER-TOP: #94bcf3 1px solid; FONT-SIZE: 12px; Z-INDEX: 100; BORDER-LEFT: #307ce8 5px solid; BORDER-BOTTOM: #307ce8 1px solid; POSITION: absolute; BACKGROUND-COLOR: #ffffff

    }

    .menutrin {

           CURSOR: hand; COLOR: #ffffff; BACKGROUND-COLOR: #1a71e6

    }

    .menutrout {

           CURSOR: hand; COLOR: #000000

    }

    .menutd0 {

           WIDTH: 28px; HEIGHT: 25px; TEXT-ALIGN: center; 改变这个修改菜单高度---:

    }

    .menutd1 {

           WIDTH: 46px; FONT-FAMILY: Webdings; TEXT-ALIGN: right

    }

    .linktd1 {

           WIDTH: 46px

    }

    .menutd2 {

           WIDTH: 4px

    }

    .menuhr {

           BORDER-RIGHT: #307ce8 1px inset; BORDER-TOP: #307ce8 1px inset; BORDER-LEFT: #307ce8 1px inset; BORDER-BOTTOM: #307ce8 1px inset

    }

    </STYLE>

    <BGSOUND id=theBS src="" loop=0>

    <body bgcolor="#FFFFFF" >

      <script><!----

     

    /*-----------------------------------------------------------

    鼠标右键菜单 1.0

    --------------------------------------------------------------*/

     

    //---------------  有关数据 -----------------//

     

    var IconList = new Array();   // icon图片 集合, 下标从 1 开始

     

           IconList[1] = new Image();

          

           IconList[1].src = "icon/edit.gif";

          

           IconList[2] = new Image();

          

           IconList[2].src = "icon/sub.gif";

     

           IconList[3] = new Image();

          

           IconList[3].src = "icon/com.gif";      

          

           IconList[4] = new Image();

          

           IconList[4].src = "icon/hel.gif";

     

    //----------------  检测变量 菜单的显示隐藏就靠它了!!!  ------------------//     

     

    var JustMenuID = "";

     

    var SubMenuList = new Array();

     

    var NowSubMenu = "";     

     

    var mouseCanSound = true;      //---------------------------  声音开关 ------  声音开关 ------------------//

     

    var menuSpeed     =  50;   //---------- 菜单显示速度 ------------//

     

    var alphaStep     =  30;   //---------- Alpaha 变化 -----------//

          

    //------------- 构建 主菜单 对象 -------------//

     

    function MouseMenu(objName)

    {

           this.id     = "Menu_"+objName;

           this.obj  = objName;

           this.length  = 0;

          

          

           this.addMenu = addMenu;

           this.addLink = addLink;

           this.addHR   = addHR;     

          

           JustMenuID = this.id;

          

           document.body.insertAdjacentHTML('beforeEnd','<table id="'+this.id+'" border="0" cellspacing="0" cellpadding="0" style="top: 0; left: 0; visibility: hidden; filter:Alpha(Opacity=0);" class="menutable" onmousedown=event.cancelBubble=true; onmouseup=event.cancelBubble=true></table>');

    }

     

    //----------- 构建 子菜单 对象 -------------//

     

    function SubMenu(objName,objID)

    {

           this.obj = objName;

           this.id  = objID;

     

           this.addMenu = addMenu;

           this.addLink = addLink;

           this.addHR   = addHR;

     

           this.length  = 0;

    }

     

     

    //-------------- 生成 菜单 makeMenu 方法 -----------//

    function makeMenu(subID,oldID,word,icon,url,target,thetitle)

    {

           var thelink = '';

          

     

           if(icon&&icon!="")

           {

                  icon = '<img border="0" src="'+IconList[icon].src+'">';

           }

           else

           {

                  icon = '';

           }

          

           if(!thetitle||thetitle=="")

           {

                  thetitle = '';

           }

          

          

           if(url&&url!="")

           {

                  thelink += '<a href="'+url+'" ';

                 

                  if(target&&target!="")

                  {

                         thelink += '  ';

                         thelink += 'target="'+target+'" '

                  }

                 

                  thelink += '></a>';

           }

          

           var Oobj = document.getElementById(oldID);

     

           /*--------------------------------------------- 菜单html样式

          

             <tr class="menutrout" id="trMenu_one_0" title="I am title">

          <td class="menutd0"><img src="icon/sub.gif" border="0" width="16" height="16"></td>

          <td><a href="javascript:alert('I am menu');" target="_self"></a><nobr>菜单一</nobr></td>

          <td class="menutd1">4</td>

          <td class="menutd2">&nbsp;</td>

        </tr>

     

          

           --------------------------------------------------*/

          

           Oobj.insertRow();

          

     

           with(Oobj.rows(Oobj.rows.length-1))

           {

                  id                  = "tr"+subID;

                  className    = "menutrout";

                 

                  title       = thetitle;

     

           }

          

           eventObj = "tr"+subID;

          

           eval(eventObj+'.attachEvent("onmouseover",MtrOver('+eventObj+'))');      

           eval(eventObj+'.attachEvent("onclick",MtrClick('+eventObj+'))');    

                 

           var trObj = eval(eventObj);

     

           for(i=0;i<4;i++)

           {

                  trObj.insertCell();

           }

     

           with(Oobj.rows(Oobj.rows.length-1))

           {

                  cells(0).className = "menutd0";

                  cells(0).innerHTML = icon;

     

                  cells(1).innerHTML = thelink+'<nobr class=indentWord>'+word+'</nobr>';

                  cells(1).calssName = "indentWord"

                 

                  cells(2).className = "menutd1";

                  cells(2).innerHTML = "4";

                 

                  cells(3).className = "menutd2";

                  cells(3).innerText = " ";

                 

           }    

          

          

          

           document.body.insertAdjacentHTML('beforeEnd','<table id="'+subID+'" border="0" cellspacing="0" cellpadding="0" style="top: 0; left: 0; visibility: hidden; filter:Alpha(Opacity=0);" class="menutable" onmousedown=event.cancelBubble=true; onmouseup=event.cancelBubble=true></table>');

          

          

                 

    }

     

     

    //---------------- 生成连接 makeLink 方法 ------------//

    function makeLink(subID,oldID,word,icon,url,target,thetitle)

    {

          

          

           var thelink = '';

          

           if(icon&&icon!="")

           {

                  icon = '<img border="0" src="'+IconList[icon].src+'">';

           }

           else

           {

                  icon = '';

           }

          

           if(!thetitle||thetitle=="")

           {

                  thetitle = '';

           }

          

          

           if(url&&url!="")

           {

                  thelink += '<a href="'+url+'" ';

                 

                  if(target&&target!="")

                  {

                         thelink += '  ';

                         thelink += 'target="'+target+'" '

                  }

                 

                  thelink += '></a>';

           }

          

           var Oobj = document.getElementById(oldID);

          

          

           /*--------------------------------------------- 连接html样式

          

             <tr class="menutrout" id="trMenu_one_0" title="I am title">

          <td class="menutd0"><img src="icon/sub.gif" border="0" width="16" height="16"></td>

          <td><a href="javascript:alert('I am link');" target="_self"></a><nobr>连接一</nobr></td>

          <td class="linktd1"></td>

          <td class="menutd2">&nbsp;</td>

        </tr>

     

          

           --------------------------------------------------*/   

          

           Oobj.insertRow();

          

     

           with(Oobj.rows(Oobj.rows.length-1))

           {

                  id                  = "tr"+subID;

                  className    = "menutrout";          

                  title       = thetitle;

     

           }

          

           eventObj = "tr"+subID;

          

           eval(eventObj+'.attachEvent("onmouseover",LtrOver('+eventObj+'))');

           eval(eventObj+'.attachEvent("onmouseout",LtrOut('+eventObj+'))');          

           eval(eventObj+'.attachEvent("onclick",MtrClick('+eventObj+'))');    

                 

           var trObj = eval(eventObj);

     

           for(i=0;i<4;i++)

           {

                  trObj.insertCell();

           }

     

           with(Oobj.rows(Oobj.rows.length-1))

           {

                  cells(0).className = "menutd0";

                  cells(0).innerHTML = icon;

     

                  cells(1).innerHTML = thelink+'<nobr class=indentWord>'+word+'</nobr>';

     

                  cells(2).className = "linktd1";

                  cells(2).innerText = " ";

                 

                  cells(3).className = "menutd2";

                  cells(3).innerText = " ";

                 

           }    

     

    }

     

     

    //-------------- 菜单对象 addMenu 方法 ------------//

    function addMenu(word,icon,url,target,title)

    {

           var subID    = this.id + "_" + this.length;

           var subObj  = this.obj+"["+this.length+"]";

          

           var oldID   = this.id;

          

           eval(subObj+"= new SubMenu('"+subObj+"','"+subID+"')");

          

            makeMenu(subID,oldID,word,icon,url,target,title);

            

            this.length++;

          

    }

     

     

    //------------- 菜单对象 addLink 方法 -------------//

    function addLink(word,icon,url,target,title)

    {

           var subID    = this.id + "_" + this.length;

           var oldID  = this.id;

          

            makeLink(subID,oldID,word,icon,url,target,title);

            

            this.length++;   

    }

     

    //------------ 菜单对象 addHR 方法 -----------------//

    function addHR()

    {

           var oldID = this.id;

     

           var Oobj = document.getElementById(oldID);

          

           Oobj.insertRow();

          

           /*------------------------------------------

          

            <tr>

          <td colspan="4">

                  <hr class="menuhr" size="1" width="95%">

           </td>

        </tr>

          

           --------------------------------------------*/    

     

          

           Oobj.rows(Oobj.rows.length-1).insertCell();

     

           with(Oobj.rows(Oobj.rows.length-1))

           {

                  cells(0).colSpan= 4;

                  cells(0).insertAdjacentHTML('beforeEnd','<hr class="menuhr" size="1" width="95%">');        

           }    

          

    }

     

     

     

     

     

     

    //--------- MtrOver(obj)-------------------//

    function MtrOver(obj)

    {

           return sub_over;

          

           function sub_over()

           {

          

                  var sonid = obj.id.substring(2,obj.id.length);

                 

                  var topobj = obj.parentElement.parentElement;

                 

                  NowSubMenu = topobj.id;

                 

                  if(obj.className=="menutrout")

                  {

                         mouseWave();

                  }           

                 

                  HideMenu(1);             

                 

                  SubMenuList[returnIndex(NowSubMenu)] = NowSubMenu;

     

                  ShowTheMenu(sonid,MPreturn(sonid))         

                 

                  SubMenuList[returnIndex(obj.id)] = sonid;

                 

                  if(topobj.oldTR)

                  {

                         eval(topobj.oldTR+'.className = "menutrout"');

                  }

     

                  obj.className = "menutrin";

     

                  topobj.oldTR = obj.id;

                 

     

           }

    }

     

    //--------- LtrOver(obj)-------------------//

    function LtrOver(obj)

    {

           return sub_over;

          

           function sub_over()

           {

                  var topobj = obj.parentElement.parentElement;

     

                  NowSubMenu = topobj.id;

                 

                  HideMenu(1);

                 

                  SubMenuList[returnIndex(NowSubMenu)] = NowSubMenu;

                               

                  if(topobj.oldTR)

                  {

                         eval(topobj.oldTR+'.className = "menutrout"');

                  }

     

                  obj.className = "menutrin";

     

                  topobj.oldTR = obj.id;

     

           }

    }

     

    //--------- LtrOut(obj)-------------------//

    function LtrOut(obj)

    {

           return sub_out;

          

           function sub_out()

           {

                  var topobj = obj.parentElement.parentElement;

                 

                  obj.className = "menutrout";

                 

                  topobj.oldTR = false;

           }

    }

     

    //----------MtrClick(obj)-----------------//

     

    function MtrClick(obj)

    {

           return sub_click;

          

           function sub_click()

           {

                  if(obj.cells(1).all.tags("A").length>0)

                  {

                         obj.cells(1).all.tags("A")(0).click();

                  }    

     

           }

    }

     

     

    //---------- returnIndex(str)--------------//

     

    function returnIndex(str)

    {

           return (str.split("_").length-3)

    }

     

     

    //---------ShowTheMenu(obj,num)-----------------//

     

    function ShowTheMenu(obj,num)

    {

           var topobj = eval(obj.substring(0,obj.length-2));

          

           var trobj  = eval("tr"+obj);

          

           var obj = eval(obj);

          

           if(num==0)

           {

                  with(obj.style)

                  {

                         pixelLeft = topobj.style.pixelLeft +topobj.offsetWidth;

                         pixelTop  = topobj.style.pixelTop + trobj.offsetTop;

                  }

           }

           if(num==1)

           {

                  with(obj.style)

                  {

                         pixelLeft = topobj.style.pixelLeft + topobj.offsetWidth;

                         pixelTop  = topobj.style.pixelTop  + trobj.offsetTop + trobj.offsetHeight - obj.offsetHeight;

                  }

           }

           if(num==2)

           {

                  with(obj.style)

                  {

                         pixelLeft = topobj.style.pixelLeft -  obj.offsetWidth;

                         pixelTop  = topobj.style.pixelTop + trobj.offsetTop;

                  }    

           }

           if(num==3)

           {

                  with(obj.style)

                  {

                         pixelLeft = topobj.style.pixelLeft -  obj.offsetWidth;

                         pixelTop  = topobj.style.pixelTop  + trobj.offsetTop + trobj.offsetHeight - obj.offsetHeight;

                  }    

           }

          

           obj.style.visibility  = "visible";

          

           if(obj.alphaing)

           {

                  clearInterval(obj.alphaing);

           }

          

           obj.alphaing = setInterval("menu_alpha_up("+obj.id+","+alphaStep+")",menuSpeed);   

    }

     

    //----------HideMenu(num)-------------------//

     

    /*----------------------

    var SubMenuList = new Array();

     

    var NowSubMenu = "";     

     

    ---------------------*/

     

    function HideMenu(num)

    {

           var thenowMenu = "";

          

           var obj = null;

          

           if(num==1)

           {

                  thenowMenu = NowSubMenu

           }

          

          

          

           for(i=SubMenuList.length-1;i>=0;i--)

           {

                  if(SubMenuList[i]&&SubMenuList[i]!=thenowMenu)

                  {

                        

                         obj = eval(SubMenuList[i]);

                        

                         if(obj.alphaing)

                         {

                                clearInterval(obj.alphaing);

                         }    

     

                         obj.alphaing = setInterval("menu_alpha_down("+obj.id+","+alphaStep+")",menuSpeed);

                        

                         obj.style.visibility = "hidden";         

                        

                         eval("tr"+SubMenuList[i]).className = "menutrout";

                                             

                         SubMenuList[i] = null;

                  }

                  else

                  {

                         if(SubMenuList[i]==thenowMenu)

                         {

                                return;

                         }

                  }

           }

          

           NowSubMenu = "";

    }

     

     

     

     

    //-----------MainMenuPosition return()------------//

     

    function MMPreturn()

    {

           var obj = eval(JustMenuID);

          

           var x = event.clientX;

           var y = event.clientY;

          

           var judgerX = x + obj.offsetWidth;

           var judgerY = y + obj.offsetHeight;

     

           var px = 0;

           var py = 0;

          

           if(judgerX>document.body.clientWidth)

           {

                  px = 2;

           }

           if(judgerY>document.body.clientHeight)

           {

                  py = 1;

           }

                 

           return (px+py);

    }

     

    //-----------MenuPosition return(obj)--------------//

     

    function MPreturn(obj)

    {

           var topobj = eval(obj.substring(0,obj.length-2));

          

           var trobj  = eval("tr"+obj);

          

           var x = topobj.style.pixelLeft + topobj.offsetWidth;

           var y = topobj.style.pixelTop  + trobj.offsetTop;

     

           obj = eval(obj);

          

           var judgerY =  obj.offsetHeight + y;

           var judgerX =  obj.offsetWidth  + x;

          

           var py = 0;

           var px = 0;

          

           if(judgerY>=document.body.clientHeight)

           {

                  py = 1;

           }

          

           if(judgerX>= document.body.clientWidth)

           {

                  px = 2;

           }

                        

           return (px+py);

    }

     

    //-----------mouseWave()-------------//

     

    function mouseWave()

    {

           if(mouseCanSound)

           {

                  theBS.src= "sound.wav";

           }    

    }

     

    //----------- menu_alpha_down -------//

     

    function menu_alpha_down(obj,num)

    {

                  var obj = eval(obj);

                 

                  if(obj.filters.Alpha.Opacity > 0 )

                  {

                         obj.filters.Alpha.Opacity += -num;

                  }    

                  else

                  {    

                         clearInterval(obj.alphaing);

                         obj.filters.Alpha.Opacity = 0;

                         obj.alphaing = false;                

                         obj.style.visibility = "hidden";

                  }    

    }

     

     

    //------------ menu_alpha_up --------//

     

    function menu_alpha_up(obj,num)

    {

                  var obj = eval(obj);

                 

                  if(obj.filters.Alpha.Opacity<100)

                         obj.filters.Alpha.Opacity += num;

                  else

                  {    

                         clearInterval(obj.alphaing);

                         obj.filters.Alpha.Opacity = 100;

                         obj.alphaing = false;

                  }    

    }

     

     

    //----------- IE ContextMenu -----------------//

     

    function document.oncontextmenu()

    {

           return false;

    }

     

     

    //----------- IE Mouseup ----------------//

     

    function document.onmouseup()

    {

           if(event.button==2)

           {

          

                  HideMenu(0);

                 

     

                  var obj = eval(JustMenuID)

                 

                 

                         obj.style.visibility = "hidden";

                        

                        

                         if(obj.alphaing)

                         {

                                clearInterval(obj.alphaing);

                         }

                        

                         obj.filters.Alpha.Opacity = 0;

                        

                         var judger = MMPreturn()

                        

                         if(judger==0)

                         {

                                with(obj.style)

                                {

                                       pixelLeft = event.clientX + document.body.scrollLeft;

                                       pixelTop  = event.clientY + document.body.scrollTop;

                                }

                         }

                         if(judger==1)

                         {

                                with(obj.style)

                                {

                                       pixelLeft = event.clientX + document.body.scrollLeft;

                                       pixelTop  = event.clientY - obj.offsetHeight + document.body.scrollTop;

                                }

                         }

                         if(judger==2)

                         {

                                with(obj.style)

                                {

                                       pixelLeft = event.clientX - obj.offsetWidth + document.body.scrollLeft;

                                       pixelTop  = event.clientY + document.body.scrollTop;

                                }

                         }

                         if(judger==3)

                         {

                                with(obj.style)

                                {

                                       pixelLeft = event.clientX - obj.offsetWidth + document.body.scrollLeft;

                                       pixelTop  = event.clientY - obj.offsetHeight + document.body.scrollTop;

                                }

                         }

                        

                         mouseWave();

                                             

                         obj.style.visibility = "visible";

                        

                         obj.alphaing = setInterval("menu_alpha_up("+obj.id+","+alphaStep+")",menuSpeed);

     

                 

                 

           }

    }

     

    //---------- IE MouseDown --------------//

     

    function document.onmousedown()

    {

           if(event.button==1)

           {

                  HideMenu();

                 

                  var obj = eval(JustMenuID)

                 

                  if(obj.alphaing)

                  {

                         clearInterval(obj.alphaing);

                  }

                 

                  obj.alphaing = setInterval("menu_alpha_down("+obj.id+","+alphaStep+")",menuSpeed);

                 

           }

    }

    //----->

     

    </script>

    <script>

           var one = new MouseMenu("one");

          

           one.addMenu("菜单一",1,"javascript:alert('I am menu');","_self","I am title");

                  one[0].addLink("连接一",2,"javascript:alert('I am link1')")

                  one[0].addHR()

                  one[0].addLink("连接二","","javascript:alert('I am link2')")        

                  one[0].addMenu("菜单三");

                  one[0][one[0].length-1].addLink("连接一",1,"javascript:;")

                  one[0].addLink("连接三","","javascript:alert('I am link3')")

                  one[0].addLink("连接四","","javascript:alert('I am link4')")

           one.addLink("连接二","","javascript:alert('I am link2')")

           one.addMenu("菜单二",3);

                  one[2].addLink("连接一","","javascript:alert('I am link1')")

           one.addHR();

           one.addLink("连接三,多长都可以",4,"javascript:alert('I am link3')")  

           one.addHR();

           one.addLink("收集",4,"javascript:alert('最好的javascript脚本')")

    </script>

  • 相关阅读:
    132123
    (一)robotframework自动化环境搭建
    python读取xlsx、csv、txt、html文件
    (二)robotframework自动化中遇到的错误及解决思路
    python使用小技巧
    三生零基础大白菜自动重装系统教程
    安装JDK和配置环境变量
    webpack 一套工程代码 管理多个相似项目
    box2dWeb 学习笔记
    简单计时器
  • 原文地址:https://www.cnblogs.com/CharmingDang/p/9663799.html
Copyright © 2011-2022 走看看