JavaScript实验实训内容

转载

小蝌蚪 2024-07-19 21:18:17

文章标签 JavaScript实验实训内容 HTML 二级菜单 html 文章分类 JavaScript 前端开发

一、计算器

二、随机生成图片

三、树形菜单解析

3.1、实现思路

3.2、源码

四、三张图片轮播广告解析

4.1、实现思路

4.2、源码

五、带序号的四张轮播图片解析

5.1、实现思路

5.2、源码

六、二级横向菜单

6.1、实现思路

6.2、源码

七、点击左边的缩进图片，左边栏收缩

7.1、思路

7.2、源码

一、计算器

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>简易计算器</TITLE>
<STYLE type="text/css">
body{background-color:#99CCFF;}
table{border-left:1 #FFFFFF solid;border-top:1 #FFFFFF solid;}
.input1{BORDER-RIGHT: #FFFFFF 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid;BORDER-BOTTOM: #FFFFFF 1px solid;width:180px;BACKGROUND-COLOR:#FFFFFF;text-align:right;}
input{BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid; COLOR: #000080; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #d8d8d0;width:40px;height:20px;}
TD{border-bottom:#FFFFFF 1 solid;border-right:#FFFFFF 1 solid;height:25px;}

</STYLE>
<SCRIPT language="javascript">
var total=0;               //全局变量total,累计输入
var FlagNew = false;  //是否是新的操作数（输入的第二个数）
var Opp = "";      //运算符变量

function clearall(){
total=0;
document.myform.number.value=0;//清除结果
}

function enternumber(Num){    //数字按钮单击调用的函数，Num表示输入的数字
if (FlagNew) {             //判断输入的是否新的操作数
document.myform.number.value = Num; 
FlagNew = false; 
} 
else { 
if (document.myform.number.value== "0") 
document.myform.number.value= Num; 
else 
document.myform.number.value+= Num; //记录输入的操作 数
} 
}

function Operation (Op) {              //“加减乘除”按钮单击调用的函数，Op代表运算符号
var Num1=document.myform.number.value; 
if (FlagNew && Opp != "=");{
FlagNew = true; 
 // 根据运算符进行运算
if ( '+' == Opp) 
total +=parseFloat(Num1); 
else if ( '-' == Opp) 
total -=parseFloat(Num1); 
else if ( '/' == Opp) 
total /=parseFloat(Num1); 
else if ( '*' == Opp) 
total *=parseFloat(Num1); 
else 
{total =parseFloat(Num1); }
document.myform.number.value= total;   //结果文本框累计数字
Opp = Op;
} 
}
</SCRIPT> 
</HEAD>

<BODY>
<TABLE width="180" border="0" cellspacing="0" cellpadding="3"align="center">
   <FORM action="" method="post" name="myform">
   <TR>
    <TD colspan="4"><INPUT name="number" type="text" class="input1" value="0"></TD>
  </TR>
  <TR>
    <TD><INPUT name="number7" type="button" value="7" onClick="enternumber(7)"></TD>
	<TD><INPUT name="number8" type="button" value="8" onClick="enternumber(8)"></TD>
	<TD><INPUT name="number9" type="button" value="9" onClick="enternumber(9)"></TD>
	<TD><INPUT name="number+" type="button" value="+" onClick="Operation('+')"></TD>
  </TR>
  <TR>
    <TD><INPUT name="number4" type="button" value="4" onClick="enternumber(4)"></TD>
	<TD><INPUT name="number5" type="button" value="5" onClick="enternumber(5)"></TD>
	<TD><INPUT name="number6" type="button" value="6" onClick="enternumber(6)"></TD>
	<TD><INPUT name="number-" type="button" value="-" onClick="Operation('-')"></TD>
  </TR>
  <TR>
    <TD><INPUT name="number1" type="button" value="1" onClick="enternumber(1)"></TD>
	<TD><INPUT name="number2" type="button" value="2" onClick="enternumber(2)"></TD>
	<TD><INPUT name="number3" type="button" value="3" onClick="enternumber(3)"></TD>
	<TD><INPUT name="number*" type="button" value="*" onClick="Operation('*')"></TD>
  </TR>
  <TR>
    <TD><INPUT name="number0" type="button" value="0" onClick="enternumber(0)"></TD>
	<TD><INPUT name="numberC" type="button" value="C" onClick="clearall();"></TD>
	<TD><INPUT name="number/" type="button" value="/" onClick="Operation('/')"></TD>
	<TD><INPUT name="number=" type="button" value="=" onClick="Operation('=')"></TD>
  </TR></FORM>
</TABLE>
</BODY>
</HTML>

二、随机生成图片

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>随机显示的图片</TITLE>
</HEAD>
<BODY>
<div align="center">
<!--六张图片，初始隐藏状态-->
<IMG src="image/scroll1.jpg" id="1" style="display:none;">
<IMG src="image/scroll2.jpg" id="2" style="display:none;">
<IMG src="image/scroll3.jpg" id="3" style="display:none;">
<IMG src="image/scroll4.jpg" id="4" style="display:none;">
<IMG src="image/scroll5.jpg" id="5" style="display:none;">
<IMG src="image/scroll6.jpg" id="6" style="display:none;">
<SCRIPT language="javascript">
function show(){
var NowFrame;
NowFrame=Math.random()*6+1   //随机生成一个1-6之间的小数
NowFrame=parseInt(NowFrame) //把1-6之间的小数转化为整数  
document.getElementById(NowFrame).style.display='block'; //显示图片ID为NowFrame的图片
}
window.onload=show; //页面加载时，调用图片显示函数show;
</SCRIPT>
</div>
</BODY>
</HTML>

三、树形菜单解析

3.1、实现思路

1、制作一级主菜单，例如：文学艺术
< A href="javascript:onClick=show('对应二级菜单的ID名') ">< IMG src="image/fclose.gif" border="0" align="absmiddle" >文学艺术< /A>
调用show()函数来实现二级菜单的显示及隐藏
2、用层制作二级菜单
< DIV id="层ID名称"style="display:none"
< IMG src="image/doc.gif" align="absmiddle">先锋写作
< IMG src="image/doc.gif" align="absmiddle">小说散文
< IMG src="image/doc.gif" align="absmiddle">诗风词韵
< IMG src="image/doc.gif" align="absmiddle">幻影奇侠
< IMG src="image/doc.gif" align="absmiddle">童话故事< /DIV>
说明：style="display:none"二级层菜单处于隐状态 
3、制作效果：当点击“文学艺术”一级菜单时，“先锋写作、小说散文、诗风词韵、幻影奇侠”二级菜单显示，当再次点击“文学艺术”一级菜单时，下面的二级菜单处于隐藏状态，直接点击查看上面的菜单效果
4、依次制作各级一级、二级菜单

3.2、源码

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>树形菜单</TITLE>
<STYLE type="text/css">
DIV {
FONT-SIZE: 13px; COLOR: #000000; LINE-HEIGHT: 22px;
}
A{FONT-SIZE: 13px; COLOR: #000000; TEXT-DECORATION: none}
A:hover {FONT-SIZE: 13px; COLOR: #999999}
</STYLE>
<SCRIPT language="JavaScript">
function show(d1){
if(document.getElementById(d1).style.display=='none'){
document.getElementById(d1).style.display='block'; //触动的层如果处于隐藏状态，即显示
}
else{document.getElementById(d1).style.display='none'; //触动的层如果处于显示状态，即隐藏
}
}
</SCRIPT>
</HEAD>
<BODY>
<DIV HEIGHT="30"><FONT color="#CC0000" ><B><IMG src="image/fold.gif" width="16" height="16" align="absmiddle">树形菜单：</B></FONT></DIV> 
<A href="javascript:onClick=show('1') "><IMG src="image/fclose.gif" border="0" align="absmiddle" >文学艺术</A>
<DIV id="1" style="display:none"><IMG src="image/doc.gif" align="absmiddle">先锋写作<BR>
<IMG src="image/doc.gif" align="absmiddle">小说散文<BR>
<IMG src="image/doc.gif" align="absmiddle">诗风词韵</DIV>
<DIV><A href="javascript: onClick=show('2') "><IMG src="image/fclose.gif" border="0" align="absmiddle">贴图专区</A></DIV>
<DIV id="2" style="display:none"><IMG src="image/doc.gif" align="absmiddle">真我风采<BR>
<IMG src="image/doc.gif" align="absmiddle">视频贴图<BR>
<IMG src="image/doc.gif" align="absmiddle">行行摄摄<BR>
<IMG src="image/doc.gif" align="absmiddle">Flash贴图</DIV>
</BODY>
</HTML>

四、三张图片轮播广告解析

4.1、实现思路

1、在网页适当位置插入三张带ID名称的图片，例如：
< IMG src="image/1.jpg" style="display:none;" id="div1" border="0">
< IMG src="image/2.gif" style="display:none;" id="div2" border="0">
< IMG src="image/ad-02.jpg" style="display:none;" id="div3" border="0">
每张图片ID号最后加上数字，方便函数调用
2、在页面载入时，调用三张图片轮换显示的函数:onLoad="show();"
3、函数实现的思路：首页定义两个全局变量，NowFrame和MaxFrame；分别表示页面载入时显示的第一张图片及轮换显示的图片张数；其次通过for循环显示每一张图片，并且使其他不显示的图片处于隐藏状态；最后用setTimeout( )函数的定时器功能，间隔一段一间显示下一张图片；最终实现三张图片不间断的轮换显示效果

4.2、源码

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>轮换横幅广告</TITLE>
<STYLE type="text/css">
div{font-size:12px;line-height:22px;}
.red {color: #FF0000}
</STYLE>

<SCRIPT language="JavaScript">
var NowFrame = 1;//图片最先显示第一张
var MaxFrame = 3;//图片一共3张
function show() {
for(var i=1;i<(MaxFrame+1);i++){
if(i==NowFrame)
document.getElementById('div'+NowFrame).style.display =''; //当前图片显示
else
document.getElementById('div'+i).style.display ='none'; //其他的图片隐藏
}
{ if(NowFrame == MaxFrame) //定义下一张显示的图片
NowFrame = 1;
else
NowFrame++;}
theTimer=setTimeout('show()', 3000); //设置定时器，显示下一张显示的图片
}
</SCRIPT>
</HEAD>

<BODY onLoad="show();">
<DIV align="center">
<IMG src="image/1.jpg" style="display:none;" id="div1" border="0">
<IMG src="image/2.gif" style="display:none;" id="div2" border="0">
<IMG src="image/ad-02.jpg" style="display:none;" id="div3" border="0">
</DIV>
</BODY>
</HTML>

五、带序号的四张轮播图片解析

5.1、实现思路

实现思路
1、在网页适当位置插入四张带ID名称的图片及按钮数字，例如：
< IMG src="image/ad-01.jpg" style="display:none;" id="div1" border="0">
< IMG src="image/ad-02.jpg" style="display:none;" id="div2" border="0">
< IMG src="image/ad-03.jpg" style="display:none;" id="div3" border="0">
< IMG src="image/ad-04.jpg" style="display:none;" id="div4" border="0">
每张图片ID号最后加上数字，方便函数调用
< DIV style="position:relative;left:-120px;top:-30px;" align="center">
< A href="javascript:show(1)">1< /A>
< A href="javascript:show(2)">2< /A>
< A href="javascript:show(3)">3< /A>
< A href="javascript:show(4)">4< /A> < /DIV>
按钮层：style="position:relative;left:-120px;top:-30px;"相对图片的位置，让数字按钮在图片上显示；触动按钮，相对应的图片显示
2、在页面载入时，调用三张图片轮换显示的函数:onLoad="show();"
3、函数实现的思路：首页定义两个全局变量，NowFrame和MaxFrame；分别表示页面载入时显示的第一张图片及轮换显示的图片张数；其次函数开始，判断show( )参数是否存在，如果存在，设定当前显示的图片为传递参数的图片，否则按原顺序显示下一张图片，通过for循环显示每一张图片，并且使其他不显示的图片处于隐藏状态；最后用setTimeout( )函数的定时器功能，间隔一段一间显示下一张图片；最终实现四张带按钮图片不间断的轮换显示效果

5.2、源码

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>带按扭的轮换横幅广告</TITLE>
<STYLE type="text/css">
a{/*设置无下划线、文字背景超连接样式*/
color:#ffffff;
font-size:13px;
text-decoration:none;
background-color:#ff0000;
width:20px;
}

</STYLE>
<SCRIPT language="JavaScript">
                var NowFrame = 1;//最先显示第一张图片
var MaxFrame = 4;//一共四张图片
				function show(d1) {{//d1是按钮对应显示图片参数
				if(Number(d1)){
				clearTimeout(theTimer);  //当触动按扭时，清除计时器
				NowFrame=d1;                //设当前显示图片
				}
					for(var i=1;i<(MaxFrame+1);i++){
					if(i==NowFrame)
					document.getElementById('div'+NowFrame).style.display ='';   //当前图片示
					else
					document.getElementById('div'+i).style.display ='none';    //隐藏其他图片层
					}
			       { if(NowFrame == MaxFrame)   //设置下一个显示的图片如果当前显示最后一张图片，那么下一张显示图片是第一张
					NowFrame = 1;
				   else
					NowFrame++;}
					 theTimer=setTimeout('show()', 3000);   //设置定时器，三秒后显示下一张图片
				}
				
</SCRIPT>
</HEAD>

<BODY onLoad="show();">
<DIV style="position:absolute;left:200px;top:60px;">
<IMG src="image/ad-01.jpg" style="display:none;" id="div1" border="0">
<IMG src="image/ad-02.jpg" style="display:none;" id="div2" border="0">
<IMG src="image/ad-03.jpg" style="display:none;" id="div3" border="0">
<IMG src="image/ad-04.jpg" style="display:none;" id="div4" border="0">
</DIV>
<DIV  style="position:absolute;left:440px;top:230px;"  align="center">
<A href="javascript:show(1)">1</A> 
<A href="javascript:show(2)">2</A> 
<A href="javascript:show(3)">3</A> 
<A href="javascript:show(4)">4</A>
</DIV>



</BODY>
</HTML>

六、二级横向菜单

6.1、实现思路

实现的思路
1、一级菜单制作
< A href="#" onMouseMove="show(二级菜单层ID名称)" onMouseOut="hide(二级菜单层ID名称)">手机数码< /A>
说明：当鼠标在“手机数码”超链接上时，调用show( )函数显示二级菜单，当鼠标离开“手机数码”超链接时，二级菜单隐藏
2、“手机数码”下二级菜单制作
< DIV id="层ID名称" onMouseMove="show(层ID名称)" onMouseOut="hide(层ID名称)" style="display:none;">
< A href="#">fhfghfgjghj 
< A href="#">手机数码1< /A>
< A href="#">手机数码2< /A>
< A href="#">手机数码3< /A>
< A href="#">手机数码4< /A>< /DIV>
说明：二级菜单层被触动显示时，如果鼠标移动二级层上，层显示，如果离开层，那么层隐藏；style="display:none;"当层没有被触动时，层处于隐藏状态；
3、设置超级链接样式表
A {FONT-SIZE: 13px; COLOR: #FFFFFF; TEXT-DECORATION: none; 
/*文字链接的背影样式*/ 
background-color:#669933;
width:100px;line-height:22px;text-align:center; 
border-bottom:1 #FFFFFF solid;} 

A:hover {FONT-SIZE: 13px; COLOR: #ffffff; 
/*鼠标在文字链接上时的文字背景样式*/ 
background-color:#FE9D01;
width:100px;line-height:22px;text-align:center;}
说明：设置超级链接在鼠标划过链接及离开链接不同的文字颜色、背景等样式表
4、效果：当鼠标在“手机数码”上时，对应的二级菜单“fhfghfgjghj、手机数码1、手机数码2、手机数码3”层显示，如果鼠标移出，层隐藏;
5、一个完整的一级、二级菜单制作完成，请依照例子做其他菜单

6.2、源码

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>横向菜单</TITLE>
<STYLE type="text/css">
td {FONT-SIZE: 13px; COLOR: #000000; LINE-HEIGHT: 22px;}
div{/*设置层背景样式*/
background-color:#669933;
text-align:center;position:absolute;z-index:2;display:none; }
A {FONT-SIZE: 13px; COLOR: #FFFFFF; TEXT-DECORATION: none;
/*文字链接的背影样式*/
background-color:#669933;
width:100px;line-height:22px;text-align:center;border-bottom:1 #FFFFFF solid;}
A:hover {FONT-SIZE: 13px; COLOR: #ffffff;
/*鼠标在文字链接上时的文字背景样式*/
background-color:#FE9D01;
width:100px;line-height:22px;text-align:center;}
</STYLE>
<SCRIPT language="JavaScript">
function show(d1){
document.getElementById(d1).style.display='block'; //显示层
}
function hide(d1){
document.getElementById(d1).style.display='none'; //隐藏层
}
</SCRIPT>
</HEAD>
<BODY>
<TABLE width="303" border="0" cellspacing="0" cellpadding="0" align="center">
<TR>
<TD><A href="#" onMouseMove="show(1)" onMouseOut="hide(1)">手机数码</A></TD>
<TD><A href="#" onMouseMove="show(2)" onMouseOut="hide(2)">淘宝集市</A></TD>
<TD><A href="#" onMouseMove="show(3)" onMouseOut="hide(3)">品牌商城</A></TD>
</TR>
<TR>
<TD><DIV id="1" onMouseMove="show(1)" onMouseOut="hide(1)"><A href="#">手机数码1</A><BR><A href="#">手机数码2</A><BR><A href="#">手机数码3</A></DIV></TD>
<TD><DIV id="2" onMouseMove="show(2)" onMouseOut="hide(2)"><A href="#">淘宝集市1</A><BR><A href="#">淘宝集市2</A><BR><A href="#">淘宝集市3</A></DIV></TD>
<TD><DIV id="3" onMouseMove="show(3)" onMouseOut="hide(3)"><A href="#">品牌商城1</A><BR><A href="#">品牌商城2</A><BR><A href="#">品牌商城3</A></DIV></TD>
</TR></TABLE>
</BODY>
</HTML>

七、点击左边的缩进图片，左边栏收缩

7.1、思路

1、图片作为按扭，点击图片触发层的显示和收缩，图片代码如下：
< A href="javascript:show();"> < IMG src="image/fclose.gif" align="absmiddle" border="0"> < /A>

7.2、源码

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>收缩左边栏效果</TITLE>
<STYLE type="text/css">
td{font-size:12px;line-height:22px;}
.red{color: #FF0000}
</STYLE>
<SCRIPT language="JavaScript">
function show(){
if(document.getElementById("left").style.display=='none'){ //判断目前左边栏的状态（显示、隐藏）
document.getElementById("left").style.display='block'; //显示左边栏
}
else{document.getElementById("left").style.display='none'; //隐藏左边栏
}
}
</SCRIPT>
</HEAD>

<BODY leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" ONCONTEXTMENU="return false;">
<TABLE width="98%" border="0" cellspacing="0" cellpadding="0" align="center">
<TR>
<TD id="left" width="200">点点右边的收缩按钮，看看我是不是进去了！</TD>
<TD width="8" style="border-right:1 #cccccc solid;"><A href="javascript:show();"><IMG src="image/fclose.jpg" align="absmiddle" border="0"></A></TD>
<TD valign="top">右侧</TD>
</TR>
</TABLE>

</BODY>
</HTML>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：ES 集群 status 401 es集群启动命令

下一篇：印尼语语音监控

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

JavaScript实验实训内容

JavaScript实验实训内容

一、计算器

二、随机生成图片

三、树形菜单解析

3.1、实现思路

3.2、源码

四、三张图片轮播广告解析

4.1、实现思路

4.2、源码

五、带序号的四张轮播图片解析

5.1、实现思路

5.2、源码

六、二级横向菜单

6.1、实现思路

6.2、源码

七、点击左边的缩进图片，左边栏收缩

7.1、思路

7.2、源码

51CTO博客