广州某公司笔试题(英文)-js

来源：互联网发布：网络视频直播软件下载编辑：程序博客网时间：2024/04/30 17:23

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.

explanation：for 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>

<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>

<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>

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

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>

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

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>

</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>

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>