javascript展开菜单源码

原创 2004年07月14日 11:18:00

脚本说明:
第一步:把如下代码加入<body>区域中
<SCRIPT language=JavaScript>
<!--
function MFXinitMenu(){
IE = document.all ? 1:0;
NN = document.layers ? 1:0;
HIDDEN = (NN) ? 'hide' : 'hidden';
VISIBLE = (NN) ? 'show' : 'visible';
myLayer=new Array();
mySpeed=5;
subLeft=0;
closes=true;
myLayer[0]=(NN) ? document.MFX0 : document.all.MFX0.style;
myLayer[1]=(NN) ? document.MFX1 : document.all.MFX1.style;
myLayer[2]=(NN) ? document.MFX2 : document.all.MFX2.style;
myLayer[3]=(NN) ? document.MFX3 : document.all.MFX3.style;
myLayer[4]=(NN) ? document.MFX4 : document.all.MFX4.style;
myLayer[5]=(NN) ? document.MFX5 : document.all.MFX5.style;
myLayer[6]=(NN) ? document.MFX6 : document.all.MFX6.style;
myLayer[7]=(NN) ? document.MFX7 : document.all.MFX7.style;
myLayer[8]=(NN) ? document.MFX8 : document.all.MFX8.style;
myLayer[9]=(NN) ? document.MFX9 : document.all.MFX9.style;
running=false;
whichOpen=-1;
lastMain=myLayer.length-2;
MFXmain=new Array();
for(i=0; i<myLayer.length; i++){
mainORsub= i % 2;
MFXmain[i] = mainORsub ? 0:1;
}
myTop=new Array();
myLeft=new Array();
myHeight=new Array();
myWidth=new Array();
mySlide=new Array();
for(i=0; i<myLayer.length; i++){
if(NN&&MFXmain[i]){
if(i==0){
myTop[i]=myLayer[i].top;
myLeft[i]=myLayer[i].left;}
else{
myLeft[i]=myLeft[i-2];
myTop[i]=myTop[i-2]+myHeight[i-2];}
myHeight[i]=myLayer[i].clip.height;
myWidth[i]=myLayer[i].clip.width;
myLayer[i].left=myLeft[i];
myLayer[i].top=myTop[i];
myLayer[i].visibility=VISIBLE;}
if(NN&&!MFXmain[i]){
myTop[i]=myTop[i-1]+myHeight[i-1];
myLeft[i]=myLeft[i-1];
myHeight[i]=myLayer[i].clip.height;
myWidth[i]=myLayer[i].clip.width;
mySlide[i]=myTop[i]+myHeight[i];
myLayer[i].left=myLeft[i]+subLeft;
myLayer[i].top=myTop[i];}
if(IE&&MFXmain[i]){
if(i==0){
myLeft[i]=myLayer[i].pixelLeft;
myTop[i]=myLayer[i].pixelTop;}
else{
myLeft[i]=myLeft[i-2];
myTop[i]=myTop[i-2]+myHeight[i-2];}
myHeight[i]=myLayer[i].pixelHeight;
myWidth[i]=myLayer[i].pixelWidth;
myLayer[i].left=myLeft[i];
myLayer[i].top=myTop[i];
myLayer[i].visibility=VISIBLE;}
if(IE&&!MFXmain[i]){
myTop[i]=myTop[i-1]+myHeight[i-1];
myLeft[i]=myLeft[i-1];
myHeight[i]=myLayer[i].pixelHeight;
myWidth[i]=myLayer[i].pixelWidth;
myLayer[i].pixelLeft=myLeft[i]+subLeft;
myLayer[i].pixelTop=myTop[i];
mySlide[i]=myTop[i]+myHeight[i];
}
}
}
function MFXrunMenu(myName,newspeed){
ieStep=0;
thereS=false;
thereC=false;
if(newspeed>0){mySpeed=newspeed;}
first=myName;
if(whichOpen==-1&&!running&&MFXmain[myName]&&!(whichOpen==myName)){
running=true;
if(NN){
myLayer[myName+1].clip.height=0;
myLayer[myName+1].visibility=VISIBLE;
}
if(IE){
myLayer[myName+1].clip= "rect(" + ("auto") +" "+ ("auto") +" "+ (0) +" "+ ("auto") +")";
myLayer[myName+1].visibility=VISIBLE;
}
MFXopenMenuS(myName);
MFXopenMenuC(myName);
}
if(whichOpen>=0&&!running&&!(whichOpen==myName)){
running=true;
second=whichOpen;
ieStep1=myHeight[second+1];
thereCS=false;
thereCC=false;
MFXcloseMenuS(second);
MFXcloseMenuC(second);
}
if(whichOpen>=0&&!running&&whichOpen==myName&&closes){
running=true;
second=whichOpen;
ieStep1=myHeight[second+1];
thereCS=false;
thereCC=false;
MFXcloseMenuS(second);
MFXcloseMenuC(second);
 }
}
function MFXstopCloseS(myName){
running=false;
thereCS=true;
if(closes&&first==whichOpen){whichOpen=-1;}
else{whichOpen=-1;
MFXrunMenu(first);
}
}
function MFXstopOpenS(myName){
running=false;
thereS=true;
if(IE){myLayer[myName+1].clip= "rect(" + ("auto") +" "+ ("auto") +" "+ ("auto") +" "+ ("auto") +")";}
whichOpen=myName;
}
function MFXopenMenuS(myName){
myStep=mySpeed;
if(NN&&!thereS&&!(first==lastMain)){
if(myLayer[first+2].top+myStep>mySlide[first+1]){
myStep=mySlide[first+1]-myLayer[first+2].top;
}
for(i=first+2; i<myLayer.length; i+=2){
myLayer[i].top+=myStep;
}
if(myLayer[first+2].top==mySlide[first+1]){
MFXstopOpenS(first)
}
if(running)setTimeout('MFXopenMenuS(first)',10);
}
if(IE&&!thereS&&!(first==lastMain)){
if(myLayer[first+2].pixelTop+myStep>mySlide[first+1]){
myStep=mySlide[first+1]-myLayer[first+2].pixelTop;
}
for(i=first+2; i<myLayer.length; i+=2){
myLayer[i].pixelTop+=myStep;
}
if(myLayer[first+2].pixelTop==mySlide[first+1]){
MFXstopOpenS(first)
}
if(running)setTimeout('MFXopenMenuS(first)',10);
}
}
function MFXopenMenuC(myName){
myStep=mySpeed;
if(NN&&!thereC){
if ((myLayer[first+1].clip.height+myStep)>myHeight[first+1]){
myLayer[first+1].clip.height=myHeight[first+1]
}
if(myLayer[first+1].clip.height==myHeight[first+1]){
thereC=true;
whichOpen=first;
MFXstopOpenS(first)

}else{
myLayer[first+1].clip.height+=myStep;

}
if(running)setTimeout('MFXopenMenuC(first)',10);
}
if(IE&&!thereC){
ieStep+=myStep;
myLayer[myName+1].clip= "rect(" + ("auto") +" "+ ("auto") +" "+ (ieStep) +" "+ ("auto") +")";

if(ieStep>=myHeight[first+1]){
thereC=true;
whichOpen=first;
MFXstopOpenS(first)
}
if(running)setTimeout('MFXopenMenuC(first)',10);
}
}
function MFXcloseMenuS(myName){
myStep=mySpeed;
if(NN&&!thereCS&&!(second==lastMain)){
if(myLayer[second+2].top-myStep<myTop[second+2]){
myStep=myLayer[second+2].top-myTop[second+2];
}
for(i=second+2; i<myLayer.length; i+=2){
myLayer[i].top-=myStep;

}
if(myLayer[second+2].top==myTop[second+2]){
MFXstopCloseS(second);
}
if(running)setTimeout('MFXcloseMenuS(second)',10);
}
if(IE&&!thereCS&&!(second==lastMain)){
if(myLayer[second+2].pixelTop-myStep<myTop[second+2]){
myStep=myLayer[second+2].pixelTop-myTop[second+2];
}
for(i=second+2; i<myLayer.length; i+=2){
myLayer[i].pixelTop-=myStep;

}
if(myLayer[second+2].pixelTop==myTop[second+2]){
MFXstopCloseS(second);
}
if(running)setTimeout('MFXcloseMenuS(second)',10);
}
}
function MFXcloseMenuC(myName){
myStep=-mySpeed;
ieStep1-=mySpeed;
if(NN&&!thereCC){
if ((myLayer[second+1].clip.bottom+myStep)<0){
myLayer[second+1].clip.bottom=0;
}
if(myLayer[second+1].clip.bottom==0){
thereCC=true;

if(second==lastMain)MFXstopCloseS(second);
}else{
myLayer[second+1].clip.bottom+=myStep;

}
if(running)setTimeout('MFXcloseMenuC(second)',10);
}
if(IE&&!thereCC){
if(ieStep1<=0){
myLayer[myName+1].clip= "rect(" + ("auto") +" "+ ("auto") +" "+ (0) +" "+ ("auto") +")";
thereCC=true;
if(second==lastMain)MFXstopCloseS(second);
}else{
myLayer[myName+1].clip= "rect(" + ("auto") +" "+ ("auto") +" "+ (ieStep1) +" "+ ("auto") +")";

}
if(running)setTimeout('MFXcloseMenuC(second)',10);
}
}
//-->
</SCRIPT>

<STYLE>.cn {
 FONT-SIZE: 9pt; COLOR: #ffff00; FONT-FAMILY: 宋体
}
A:link {
 FONT-SIZE: 9pt; COLOR: blue; TEXT-DECORATION: none
}
A:visited {
 FONT-SIZE: 9pt; COLOR: blue; TEXT-DECORATION: none
}
A:hover {
 FONT-SIZE: 10pt; COLOR: red; FONT-FAMILY: ""; TEXT-DECORATION: none
}
</STYLE>
<DIV id=MFX0
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; Z-INDEX: 2; LEFT: 20px; VISIBILITY: hidden; BORDER-LEFT: #000000 1px; WIDTH: 150px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 20px; HEIGHT: 20px; BACKGROUND-COLOR: #cc6666; layer-background-color: #CC6666">
<DIV align=center>
<CENTER>
<TABLE cellSpacing=0 borderColorDark=#568ac2 cellPadding=0 width="100%"
bgColor=#568ac2 borderColorLight=#ffffff border=1>
  <TBODY>
  <TR>
    <TD width="100%">
      <P class=cn align=center><A onclick=MFXrunMenu(0,5)
      href="http://pcafei.3322.net/script/java/best-menu.htm#"><FONT
      color=#ffff00>数字音效</FONT></A></P></TD></TR></TBODY></TABLE></CENTER></DIV></DIV>
<DIV id=MFX1
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; Z-INDEX: 1; LEFT: 20px; VISIBILITY: hidden; BORDER-LEFT: #000000 1px; WIDTH: 150px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 40px; HEIGHT: 60px; BACKGROUND-COLOR: #cccccc; layer-background-color: #CCCCCC">
<DIV align=center>
<CENTER>
<TABLE cellSpacing=0 borderColorDark=#ffffff cellPadding=0 width="100%"
borderColorLight=#ff0000 border=1>
  <TBODY>
  <TR>
    <TD class=eng width="100%">
      <P class=eng align=center><A
      href="http://pcafei.3322.net/script/java/best-menu.htm#"><FONT
      size=2>menu1</FONT></A></P></TD></TR>
  <TR>
    <TD class=eng width="100%">
      <P class=eng align=center><A
      href="http://pcafei.3322.net/script/java/best-menu.htm#"><FONT
      size=2>menu2</FONT></A></P></TD></TR>
  <TR>
    <TD class=eng width="100%">
      <P class=eng align=center><A
      href="http://pcafei.3322.net/script/java/best-menu.htm#"><FONT
      size=2>menu3</FONT></A></P></TD></TR></TBODY></TABLE></CENTER></DIV><BR></DIV>
<DIV id=MFX2
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; Z-INDEX: 2; LEFT: 20px; VISIBILITY: hidden; BORDER-LEFT: #000000 1px; WIDTH: 150px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 100px; HEIGHT: 20px; BACKGROUND-COLOR: #cc6666; layer-background-color: #CC6666">
<DIV align=center>
<CENTER>
<TABLE cellSpacing=0 borderColorDark=#568ac2 cellPadding=0 width="100%"
bgColor=#568ac2 borderColorLight=#ffffff border=1>
  <TBODY>
  <TR>
    <TD width="100%">
      <P class=cn align=center><A onclick=MFXrunMenu(2,5)
      href="http://pcafei.3322.net/script/java/best-menu.htm#"><FONT
      color=#ffff00>图像处理</FONT></A></P></TD></TR></TBODY></TABLE></CENTER></DIV></DIV>
<DIV id=MFX3
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; Z-INDEX: 1; LEFT: 20px; VISIBILITY: hidden; BORDER-LEFT: #000000 1px; WIDTH: 150px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 120px; HEIGHT: 60px; BACKGROUND-COLOR: #cccccc; layer-background-color: #CCCCCC">
<DIV align=center>
<CENTER>
<TABLE cellSpacing=0 borderColorDark=#ffffff cellPadding=0 width="100%"
borderColorLight=#ff0000 border=1>
  <TBODY>
  <TR>
    <TD class=eng width="100%">
      <P class=eng align=center><A
      href="http://pcafei.3322.net/script/java/best-menu.htm#"><FONT
      size=2>menu1</FONT></A></P></TD></TR>
  <TR>
    <TD class=eng width="100%">
      <P class=eng align=center><A
      href="http://pcafei.3322.net/script/java/best-menu.htm#"><FONT
      size=2>menu2</FONT></A></P></TD></TR>
  <TR>
    <TD class=eng width="100%">
      <P class=eng align=center><A
      href="http://pcafei.3322.net/script/java/best-menu.htm#"><FONT
      size=2>menu3</FONT></A></P></TD></TR></TBODY></TABLE></CENTER></DIV><BR></DIV>
<DIV id=MFX4
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; Z-INDEX: 2; LEFT: 19px; VISIBILITY: hidden; BORDER-LEFT: #000000 1px; WIDTH: 150px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 178px; HEIGHT: 20px; BACKGROUND-COLOR: #cc6666; layer-background-color: #CC6666">
<DIV align=center>
<CENTER>
<TABLE cellSpacing=0 borderColorDark=#568ac2 cellPadding=0 width="100%"
bgColor=#568ac2 borderColorLight=#ffffff border=1>
  <TBODY>
  <TR>
    <TD width="100%">
      <P class=cn align=center><A onclick=MFXrunMenu(4,5)
      href="http://pcafei.3322.net/script/java/best-menu.htm#"><FONT
      color=#ffff00>三维视频</FONT></A></P></TD></TR></TBODY></TABLE></CENTER></DIV></DIV>
<DIV id=MFX5
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; Z-INDEX: 1; LEFT: 19px; VISIBILITY: hidden; BORDER-LEFT: #000000 1px; WIDTH: 150px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 199px; HEIGHT: 64px; BACKGROUND-COLOR: #cccccc; layer-background-color: #CCCCCC">
<DIV align=center>
<CENTER>
<TABLE cellSpacing=0 borderColorDark=#ffffff cellPadding=0 width="100%"
borderColorLight=#ff0000 border=1>
  <TBODY>
  <TR>
    <TD class=eng width="100%">
      <P align=center><A
      href="http://pcafei.3322.net/script/java/best-menu.htm#"><FONT
      size=2>menu1</FONT></A></P></TD></TR>
  <TR>
    <TD class=eng width="100%">
      <P align=center><A
      href="http://pcafei.3322.net/script/java/best-menu.htm#"><FONT
      size=2>menu</FONT><FONT size=2>2</FONT></A></P></TD></TR>
  <TR>
    <TD class=eng width="100%">
      <P align=center><A
      href="http://pcafei.3322.net/script/java/best-menu.htm#"><FONT
      size=2>menu</FONT><FONT
size=2>3</FONT></A></P></TD></TR></TBODY></TABLE></CENTER></DIV><BR></DIV>
<DIV id=MFX6
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; Z-INDEX: 2; LEFT: 18px; VISIBILITY: hidden; BORDER-LEFT: #000000 1px; WIDTH: 150px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 251px; HEIGHT: 20px; BACKGROUND-COLOR: #cc6666; layer-background-color: #CC6666">
<DIV align=center>
<CENTER>
<TABLE cellSpacing=0 borderColorDark=#568ac2 cellPadding=0 width="100%"
bgColor=#568ac2 borderColorLight=#ffffff border=1>
  <TBODY>
  <TR>
    <TD width="100%">
      <P class=cn align=center><A onclick=MFXrunMenu(6,5)
      href="http://pcafei.3322.net/script/java/best-menu.htm#"><FONT
      color=#ffff00>多媒体开发</FONT></A></P></TD></TR></TBODY></TABLE></CENTER></DIV></DIV>
<DIV id=MFX7
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; Z-INDEX: 1; LEFT: 20px; VISIBILITY: hidden; BORDER-LEFT: #000000 1px; WIDTH: 150px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 280px; HEIGHT: 60px; BACKGROUND-COLOR: #cccccc; layer-background-color: #CCCCCC">
<DIV align=center>
<CENTER>
<TABLE cellSpacing=0 borderColorDark=#ffffff cellPadding=0 width="100%"
borderColorLight=#ff0000 border=1>
  <TBODY>
  <TR>
    <TD class=eng width="100%">
      <P align=center><A
      href="http://pcafei.3322.net/script/java/best-menu.htm#"><FONT
      size=2>menu1</FONT></A></P></TD></TR>
  <TR>
    <TD class=eng width="100%">
      <P align=center><A
      href="http://pcafei.3322.net/script/java/best-menu.htm#"><FONT
      size=2>menu1</FONT></A></P></TD></TR>
  <TR>
    <TD class=eng width="100%">
      <P align=center><A
      href="http://pcafei.3322.net/script/java/best-menu.htm#"><FONT
      size=2>menu1</FONT></A></P></TD></TR></TBODY></TABLE></CENTER></DIV></DIV>
<DIV id=MFX8
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; Z-INDEX: 2; LEFT: 20px; VISIBILITY: hidden; BORDER-LEFT: #000000 1px; WIDTH: 150px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 340px; HEIGHT: 20px; BACKGROUND-COLOR: #cc6666; layer-background-color: #CC6666">
<DIV align=center>
<CENTER>
<TABLE cellSpacing=0 borderColorDark=#568ac2 cellPadding=0 width="100%"
bgColor=#568ac2 borderColorLight=#ffffff border=1>
  <TBODY>
  <TR>
    <TD width="100%">
      <P class=cn align=center><A onclick=MFXrunMenu(8,5)
      href="http://pcafei.3322.net/script/java/best-menu.htm#"><FONT
      color=#ffff00>网站建设</FONT></A></P></TD></TR></TBODY></TABLE></CENTER></DIV></DIV>
<DIV id=MFX9
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; Z-INDEX: 1; LEFT: 20px; VISIBILITY: hidden; BORDER-LEFT: #000000 1px; WIDTH: 150px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 360px; HEIGHT: 60px; BACKGROUND-COLOR: #cccccc; layer-background-color: #CCCCCC">
<DIV align=center>
<CENTER>
<TABLE cellSpacing=0 borderColorDark=#ffffff cellPadding=0 width="100%"
borderColorLight=#ff0000 border=1>
  <TBODY>
  <TR>
    <TD class=eng width="100%">
      <P align=center><A
      href="http://pcafei.3322.net/script/java/best-menu.htm#"><FONT
      size=2>menu1</FONT></A></P></TD></TR>
  <TR>
    <TD class=eng width="100%">
      <P align=center><A
      href="http://pcafei.3322.net/script/java/best-menu.htm#"><FONT
      size=2>menu1</FONT></A></P></TD></TR>
  <TR>
    <TD class=eng width="100%">
      <P align=center><A
      href="http://pcafei.3322.net/script/java/best-menu.htm#"><FONT
      size=2>menu1</FONT></A></P></TD></TR></TBODY></TABLE></CENTER></DIV></DIV>

 

第二步:把<body>中的内容改为:
<body  onload=MFXinitMenu()>

Android自定义View——从零开始实现可展开收起的水平菜单栏

继承ViewGroup(RelativeLayout)实现可展开收起的水平菜单栏控件
  • lly347705530
  • lly347705530
  • 2017年11月10日 13:26
  • 251

js实现菜单的收起和展开

菜单的收起和展开 ul{ list-style-type: none; } #cityList1{ display: none; } #cityList2{ display: no...
  • pangqiandou
  • pangqiandou
  • 2017年10月16日 23:08
  • 571

Android编程:扇形展开的悬浮菜单按钮CircularFloatingActionMenu实例

Android学习:扇形展开的悬浮菜单按钮CircularFloatingActionMenu实例本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明.环境:主...
  • jdh99
  • jdh99
  • 2017年05月04日 16:29
  • 3073

VC2010 菜单项自动展开

在VC2010中若某个子菜单的菜单项过多会自动收缩起来,若想自动展开则: 直接将CMainFrame::OnCreate中的CMFCToolBar::SetBasicCommands(lstBasi...
  • xinzheng_wang
  • xinzheng_wang
  • 2012年05月25日 16:43
  • 2037

自定义菜单收起展开动画(二)

今天周一,新的一周,水的开始。 上次发完博客后,自己在项目中使用不是特别的方便,除了要写很多布局之外,还要写诸多的点击事件的监听,不是非常的方便,于是花了一天的时间封装了一下。 首先我们先缕缕思路...
  • aa4100123
  • aa4100123
  • 2016年05月16日 14:02
  • 1990

VS2008SP1/VS2010 展开所有菜单下的子菜单项(默认是部分菜单折叠显示)

VS2008SP1/VS2010新建的SDI/MDI窗口默认有些菜单是折叠的,如下图所示: 如果要想展开该菜单项的话,可以修改CMainFrame类的OnCreate函数中的代码,里面有这样一段...
  • VisualEleven
  • VisualEleven
  • 2012年02月27日 10:33
  • 5067

按钮点击展开菜单列表

今天分享一篇利用CSS和消息事件完成鼠标点击按钮展开菜单列表的demo 首先我们定义一个button按钮和一个菜单列表,我们把他们封装到一个块级元素中,并指定position属性,其次我们对butt...
  • u012631731
  • u012631731
  • 2016年12月27日 22:41
  • 1184

【Android界面实现】实现底部扇形展开菜单效果

先看效果图 项目的总结构 下面开始贴代码,由于必要的地方都添加了注释,所以不过多讲解 anim_button.xml ...
  • bz419927089
  • bz419927089
  • 2014年03月11日 10:43
  • 5582

OAF学习笔记-22-多层菜单的制作

思路:利用系统中的HGrid 控件从数据库中将菜单抓出来父菜单的id 作为区别子菜单 做两个VO 一个VO是父菜单另一个VO 是子菜单 SOBVO(父菜单) 自己增加一列 selec...
  • u010598327
  • u010598327
  • 2015年09月11日 12:56
  • 748

展开菜单的Javascript代码

function showmenu(buyok){if(buyok.style.display=="none"){buyok.style.display="";} else {buyok....
  • vrleader
  • vrleader
  • 2006年03月31日 01:18
  • 1025
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript展开菜单源码
举报原因:
原因补充:

(最多只允许输入30个字)