java-Web(js)作业

题一:
在这里插入图片描述

实现代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>产看一年四季变化</title>
		<script>
			
		</script>
	</head>
	<body>
		<div>
			<table align="center" border="1" bordercolor="">
				<tr>
					<td>
						<img src="img/chun1.png" width="624px" height="379px" />
					</td>
					<td>
						<img src="img/xia1.png" width="624px" height="379px" />
					</td>
				</tr>
				
				<tr>
					<td style="text-align: center;"><a href="javascript:location.href='chun.html'"></a></td>
					<td style="text-align: center;"><a href="javascript:location.href='xia.html'"></a></td>
				</tr>
				
				<tr>
					<td>
						<img src="img/qiu1.png" width="624px" height="379px" />
					</td>
					<td>
						<img src="img/don1.png" width="624px" height="379px" />
					</td>
				</tr>
				
				<tr>
					<td style="text-align: center;"><a href="javascript:location.href='qiu.html'"></a></td>
					<td style="text-align: center;"><a href="javascript:location.href='dong.html'"></a></td>
				</tr>
				
				<tr>
					<td colspan="2" style="text-align: center;"><a href="javascript:location.reload()">刷新</a></td>
				</tr>
			</table>
		</div>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>春的详情</title>
	</head>
	<body>
		<div>
			<table>
				<tr>
					<td>
						<img src="img/chun2.jpg" />
					</td>
					<td>
						春天,又称春季,是四季中的第一个季节,指立春至立夏期间,含节气有立春、雨水、惊蛰、春分、清明、谷雨。
						是万物复苏的季节。通常将北半球的公历3月~5月 [1]  定为春季,而南半球则是公历9月下旬~12月下旬定为春季。
						中国现代气象学上以连续5天平均气温在10℃以上为春季的开始。
						春天气候温暖适中,中国内陆大部分地区有降雨,万物生机萌发,气候多变,乍暖还寒。
						春三月,此谓发陈,天地俱生,万物以荣,夜卧早起,广(多)步(走)于庭,被发缓形(意喻不受束缚),以使志生。生而勿杀,予而勿夺,赏而勿罚,此春气之应,养生之道也。逆之则伤肝,夏为寒变,奉长者少。
						春阳:因春天阳光温和明媚,令人神往陶醉,故而得名;陈子昂诗“白日每不归,春阳时暮矣”。就是描写春阳的诗句。
						阳春:春天的美称。唐朝诗人李白诗中就有“阳春召我以烟景”的诗句。 [2]  
						芳春:因春天草木萌动,百草新生,大地草绿如茵,繁花似锦,故而得名。陆机诗“烈心厉劲秋,丽服鲜芳春”。将芳春的特点,写得入景入神。<br /><br />
						<a href="javascript:location.href='xia.html'">夏天</a>&nbsp;
						<a href="javascript:location.href='qiu.html'">秋天</a>&nbsp;
						<a href="javascript:location.href='dong.html'">冬天</a>&nbsp;
						<a href="javascript:history.back()">后退</a>&nbsp;
						<a href="javascript:history.forward()">前进</a>
						
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>夏天详情</title>
	</head>
	<body>
		<div>
			<table>
				<tr>
					<td>
						<img src="img/xia2.png" />
					</td>
					<td>
						夏季是一年中具有“四季分明”地区的第二个季节,是四季之一。
						气温高是夏季最显著的气候特征,但因地域、干湿环境的不同,会产生炎热干燥或者湿热多雨的不同气候。
						春生、夏长、秋收、冬藏,夏季是许多农作物旺盛生长的最好季节,充足的光照和适宜的温度以及充沛的雨水给植物提供了所需的条件。
						季风气候是我国气候的主要特点,夏季受来自海洋的暖湿气流的影响,表现为高温潮湿多雨。雨热同期,有利于农作物成长,农作物在夏季进入了茁壮成长阶段。
						在北温带,气象意义上的夏季为公历5月21日(小满)~8月22日(处暑);
						在南温带,气象意义上的夏季为公历11月21日(对应北半球的小雪)~次年2月19日(对应北半球的雨水)
						根据地球公转特点,北温带的夏季时长理论上要长于南温带。<br /><br />
						<a href="javascript:location.href='chun.html'">春天</a>&nbsp;
						<a href="javascript:location.href='qiu.html'">秋天</a>&nbsp;
						<a href="javascript:location.href='dong.html'">冬天</a>&nbsp;
						<a href="javascript:history.back()">后退</a>&nbsp;
						<a href="javascript:history.forward()">前进</a>
						
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>秋天详情</title>
	</head>
	<body>
		<div>
			<table>
				<tr>
					<td>
						<img src="img/qiu2.jpg" />
					</td>
					<td>
						秋季,是“春夏秋冬”四季之一。从现代气象学上划分,北温带的秋季在8月23日(处暑)~11月20日(小雪);
						南温带的秋季在2月19日(北半球雨水)~5月21日(北半球小满)。在我国,传统上是以二十四节气的“立秋”作为秋季的起点,至立冬结束。
						进入秋季,意味着降雨、风暴等趋于下降或减少,在自然界中万物开始从繁茂成长趋向萧索成熟。
						立秋并不代表酷热天气的结束,所谓“热在三伏”,按照“三伏”的推算方法,立秋至处暑往往还处在“三伏”期间,所以初秋天气还很热,真正凉爽一般要到白露节气之后。
						热与凉的分水岭在秋季,并不是在夏秋之交。秋天的气候分为两个阶段,初秋“闷热”,仲秋后趋向“干燥”、“凉爽”气候特征。总体来讲,进入秋季,太阳高度角渐低,温度由热渐降低;
						秋风送爽、炎暑顿消、硕果满枝、田野金黄。<br /><br />
						<a href="javascript:location.href='chun.html'">春天</a>&nbsp;
						<a href="javascript:location.href='xia.html'">夏天</a>&nbsp;
						<a href="javascript:location.href='dong.html'">冬天</a>&nbsp;
						<a href="javascript:history.back()">后退</a>&nbsp;
						<a href="javascript:history.forward()">前进</a>
						
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>冬天详情</title>
	</head>
	<body>
		<div>
			<table>
				<tr>
					<td>
						<img src="img/don2.png" />
					</td>
					<td>
						冬季,是四季之一,传统是以二十四节气“立冬”作为冬季的开始,“立冬”意味着风雨、湿度、光照、气温等,处于转折点上,
						开始从秋季向冬季气候过渡。冬,即“终也、万物收藏也”,立冬后万物开始闭藏。“四立”划分四季反映了气候、物候等多方面特征。
						现在划分四季常根据气温变化划分,采用的是近代学者张宝堃的“候平均气温”法,按候平均气温法划分的四季,
						日平均气温连续五天等于或低于10摄氏度算是入冬。
						立冬太阳位于黄经225°,11月7-8日交节;
						小雪太阳位于黄经240°,11月22-23日交节;
						大雪太阳位于黄经255°,12月6-8日交节;
						冬至太阳位于黄经270°,12月21-23日交节;
						小寒太阳位于黄经285°,1月5-7日交节;
						大寒太阳位于黄经300°,1月20-21日交节。<br /><br />
						<a href="javascript:location.href='chun.html'">春天</a>&nbsp;
						<a href="javascript:location.href='xia.html'">夏天</a>&nbsp;
						<a href="javascript:location.href='qiu.html'">秋天</a>&nbsp;
						<a href="javascript:history.back()">后退</a>&nbsp;
						<a href="javascript:history.forward()">前进</a>
						
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>

实现效果:
在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

题二:
在这里插入图片描述

实现代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>制作树形菜单</title>
		<style>
			ul{
				list-style: none;
			}
		</style>
		
		<script>
			function show1(){
				if(document.getElementById("txt2").style.display=="block"){
					document.getElementById("txt2").style.display="none";
				}else{
					document.getElementById("txt2").style.display="block";
				}
			}
			
			function show2(){
				if(document.getElementById("txt1").style.display=="block"){
					document.getElementById("txt1").style.display="none";
				}else{
					document.getElementById("txt1").style.display="block";
				}
			}
			
		</script>
		
	</head>
	<body>
		<div>
			<p onclick="show2()"><img src="img/fold.gif" />树形菜单:</p>
			<ul id="txt1">
				<li><img src="img/fclose.gif" />文学艺术</li>
			</ul>
			
			<ul id="txt1" onclick="show1()">
				<li><img src="img/fclose.gif" />贴图专区</li>
			</ul>
			
			<ul id="txt2">
				<li><img src="img/doc.gif" />真我风采</li>
				<li><img src="img/doc.gif" />视频贴图</li>
				<li><img src="img/doc.gif" />行行摄摄</li>
				<li><img src="img/doc.gif" />Flash贴图</li>
			</ul>
			
			<ul id="txt1">
				<li><img src="img/fclose.gif" />房产论坛</li>
			</ul>
			
			<ul id="txt1">
				<li><img src="img/fclose.gif" />娱乐八卦</li>
			</ul>
		</div>
	</body>
</html>

实现效果:
在这里插入图片描述

题三:
在这里插入图片描述

实现代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Tab切换效果</title>
		<style>
			#note2{
				display: none;
			}
			
			#phone2{
				display: none;
			}
			
			#phone{
				display: none;
			}
		</style>
		<script>
			function showNote(){
				document.getElementById("note1").style.display="block";
				document.getElementById("note2").style.display="none";
				document.getElementById("note").style.display="block";
				document.getElementById("phone").style.display="none";
				document.getElementById("phone1").style.display="block";
				document.getElementById("phone2").style.display="none";
			}
			
			function showNote2(){
				document.getElementById("note1").style.display="none";
				document.getElementById("note2").style.display="block";
				document.getElementById("note").style.display="none";
				document.getElementById("phone").style.display="block";
				document.getElementById("phone1").style.display="none";
				document.getElementById("phone2").style.display="block";
			}
		</script>
	</head>
	<body>
		<div>
			<table>
				<tr>
					<td>
						<img src="img/left1.jpg" id="note1" />
						<img src="img/left2.jpg" id="note2" onmouseover="showNote()" />
					</td>
					<td>
						<img src="img/right1.jpg" id="phone1" onmousemove="showNote2()" />
						<img src="img/right2.jpg" id="phone2" />
					</td>
				</tr>
				
				<tr>
					<td colspan="2">
						<img src="img/end1.jpg" id="note" />
						<img src="img/end2.jpg" id="phone" />
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>

实现效果:
在这里插入图片描述在这里插入图片描述

题四:
在这里插入图片描述

实现代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>电子产品</title>
		<script>
			function checkall(){
				var p=document.getElementsByName("product");
				for(var i=0;i<p.length;i++){
					if(document.getElementById("check1").checked==true){
						p[i].checked=true;
					}else{
						p[i].checked=false;
					}
				}
			}
		</script>
	</head>
	<body>
		<div>
			<form>
				<table>
					<tr>
						<td colspan="4"><img src="img/list_bg.gif" /></td>
						<!--<td></td>-->
						<!--<td></td>-->
						<!--<td></td>-->
					</tr>
				
					<tr>
						<th>
							<input type="checkbox" id="check1" onclick="checkall()" />全选
						</th>
						<th>商品图片</th>
						<th>商品名称/出售者/联系方式</th>
						<th>价格</th>
					</tr>
					
					<tr style="text-align: center;" align="center">
						<td><input type="checkbox" id="check" name="product" /></td>
						<td><img src="img/list1.jpg" /></td>
						<td style="font-size:x-small;">杜比环绕,家庭影院必备,超真实享受<br />出售者:ling112233<br /><img src="img/contactme.gif" /><img src="img/addfav.gif" />收藏</td>
						<td style="font-size: x-small;">一口价:<br />2833.0</td>
					</tr>
					
					<tr style="text-align: center;" align="center">
						<td><input type="checkbox" id="check" name="product" /></td>
						<td><img src="img/list2.jpg" /></td>
						<td style="font-size:x-small;">NVDIA 9999GT 512MB 256bit极品显卡,不容错过<br />出售者:aipiaopiao110<br /><img src="img/contactme.gif" /><img src="img/addfav.gif" />收藏</td>
						<td style="font-size: x-small;">一口价:<br />2460.0</td>
					</tr>
					
					<tr style="text-align: center;" align="center">
						<td><input type="checkbox" id="check" name="product" /></td>
						<td><img src="img/list3.jpg" /></td>
						<td style="font-size:x-small;">精品热卖:高清晰,30cun等离子电视<br />出售者:阳光的挣扎<br /><img src="img/contactme.gif" /><img src="img/addfav.gif" />收藏</td>
						<td style="font-size: x-small;">一口价:<br />18880</td>
					</tr>
					
					<tr style="text-align: center;" align="center">
						<td><input type="checkbox" id="check" name="product" /></td>
						<td><img src="img/list4.jpg" /></td>
						<td style="font-size:x-small;">Sony索尼家用最新款笔记本<br />出售者:疯狂的镜无<br /><img src="img/contactme.gif" /><img src="img/addfav.gif" />收藏</td>
						<td style="font-size: x-small;">一口价:<br />5889.0</td>
					</tr>
					
					<tr style="font-size: x-small;">
						<td colspan="4" align="center">友情链接:百度|Google|雅虎|淘宝|拍拍|易趣|当当|京东商城|迅雷|新浪|搜狐|网易|猫扑|开心网|新华网|凤凰网</p></td>
						<!--<td></td>-->
						<!--<td></td>-->
						<!--<td></td>-->
					</tr>
				</table>
			</form>
		</div>
	</body>
</html>

实现效果:
在这里插入图片描述

题五:
在这里插入图片描述

实现代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>操作表格</title>
		<script>
			function addrow(){
				var row4=document.getElementById("row4");
				//创建行结点
				var row=document.createElement("tr");
				//创建单元格
				var cell1=document.createElement("td");
				var cell2=document.createElement("td");
				cell1.innerHTML="60个瞬间";
				cell2.innerHTML="¥32.00";
				
				row.appendChild(cell1);
				row.appendChild(cell2);
				
				document.getElementById("row4").parentNode.appendChild(row);
			}
			
			function deleterow2(){
				var dNode=document.getElementById("row2");
				dNode.parentNode.removeChild(dNode);
			}
			
			function modify(){
				var row1=document.getElementById("row1");
				row1.setAttribute("style","font-size: 25px; background-color: cornflowerblue;");
			}
			
			function copyRow(){
				var row4=document.getElementById("row4");
				var new1=row4.cloneNode(true);
				document.getElementById("t1").appendChild(new1);
			}
		</script>
	</head>
	<body>
		<div>
			<table border="1" id="t1">
				<tr id="row1">
					<td>书名</td>
					<td style="text-align: center;">价格</td>
				</tr>
				
				<tr>
					<td>看得见风景的房间</td>
					<td style="text-align: center;">¥30.00</td>
				</tr>
				
				<tr id="row2">
					<td>幸福从天而降</td>
					<td style="text-align: center;">¥18.50</td>
				</tr>
				
				<tr>
					<td>幸福从天而降</td>
					<td style="text-align: center;">¥18.50</td>
				</tr>
				
				<tr id="row4">
					<td>60个瞬间</td>
					<td style="text-align: center;">¥32.00</td>
				</tr>
			</table>
		</div>
		<input type="button" value="增加一行" onclick="addrow()" />
		<input type="button" value="删除第二行" onclick="deleterow2()" />
		<input type="button" value="修改标题样式" onclick="modify()" />
		<input type="button" value="复制最后一行" onclick="copyRow()" />
	</body>
</html>

实现效果:
在这里插入图片描述

以上代码均为个人所写,如有错误,欢迎指正,谢谢~

  • 10
    点赞
  • 47
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值