java-Web（js）作业

最新推荐文章于 2024-04-02 16:11:50 发布
最新推荐文章于 2024-04-02 16:11:50 发布
阅读量2.7k 收藏 46
点赞数 10
文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jxcncb/article/details/108699959
版权

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

实现代码：

<!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
    点赞
  • 踩
  • 46
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
案例：春夏秋冬
taoyingle的博客
03-22 607
案例：春夏秋冬 //需求：一年有12个月份，有四个季节，键盘录入一个月份，用程序实现判断该月份属于哪个季节 import java.util.Scanner; public class HelloWorld{ public static void main(String[] agrs){ Scanner sc = new Scanner(System.in); System.out.println("请输入1-12月中的一个月份"); int mont
春夏秋冬判别
每天进步一点点，不要逃避
03-27 781
1.需求分析： 键盘录入一个月份，判断该月份属于哪个季节。 2.代码设计： 1、键盘录入月份，使用变量接收。 2、可以利用switch进行多种情况判断。 3.程序运行： import java.util.Scanner; public class Demo4{ public static void main(String[] args){ Scanner sc = new Scanner(System.in); int mon
zuoye
2301_81853998的博客
12-31 344
春</a></td><td><a href="javascript:location.href='summer.html'">夏</a></td><td><a href="javascript:location.href='autumn.html'">秋</a></td><td><a href="javascript:location.href='winter.html'">冬
javascript实现年、季度、月、时间段的查询条件切换
dinner1984的专栏
08-17 5633
效果： 页面代码 年 季 月
js中获取某年到某年季度数据
kanno的博客
04-02 401
js中获取某年到某年季度数据
课工场作业-js.zip
12-07
练习1：制作简易的当当购物车页面 练习2：查看一年四季变化 练习3：完善当当购物车页面 练习4：制作12进制的时钟特效
java 判断当前时间节气,请问js获取阴历节气后根据节气判断春夏秋冬四季?该怎么写呢...
weixin_39836726的博客
03-11 695
export default {/*** 获取旧历几月几日* d : date对象* showYear: 是否显示农历年** getLunarDay() //当天的农历日期* getLunarDay(new Date("1988-02-06")) //腊月十九* getLunarDay(new Date("1988-02-06"), true) //丁卯年 腊月十九**/getLunarDay: ...
java大项目源码-java-web:Javaweb程序设计大作业项目
05-20
【Java Web程序设计大作业项目】是一个典型的Java技术栈实现的Web应用，它涵盖了Java后端开发、Web前端展示以及数据库交互等多个方面的知识点。在这个项目中，开发者将深入理解Java Web开发的核心技术，并通过实际...
web-期末大作业合集
04-07
【标题】"web-期末大作业合集"揭示了这个压缩包主要包含的是与Web开发相关的学习项目，尤其是针对学期末的大作业。这些作业可能涵盖了前端开发的各种技术，旨在检验学生对HTML、CSS以及JavaScript等基础技能的掌握...
Java Web 大作业.zip
06-15
在这个名为"Java Web 大作业.zip"的压缩包中，我们可以预见到包含的是与Java Web相关的学习资料，可能是笔记、作业解决方案或课程设计项目。 首先，让我们探讨一下Java Web的基础知识点： 1. **Servlet**：Servlet...
HTML练习记录第四季--框架
05-18
HTML练习记录 frame框架 frame属性的一些基本标签
js代码图片变化，图片变化特效
02-17
纯js代码，flash效果的图片变化特效，里面有现成的图片，可直接看到效果！
Jquery练习1：制作简易的当当购物车页面.zip
08-27
Jquery练习1：制作简易的当当购物车页面.zip
java 一年四季的划分
06-18
java 一年四季的划分 java 一年四季的划分
JAVA WEB课程大作业.zip
最新发布
06-15
Java Web课程大作业是大学阶段Java编程学习的重要实践环节，旨在深化学生对Web应用程序开发的理解，提高实际操作技能。这个压缩包文件包含了“zgl_resource”子目录，很可能包含了源代码、HTML页面、CSS样式表、...
java-script-basics:JavaScript基础作业回购
04-10
JavaScript是Web开发中不可或缺的一部分，主要用于增强网页的交互性。这个"java-script-basics"压缩包文件包含了关于JavaScript基础知识的学习资源，特别是与"HTML"相关的练习。以下是对这些概念的详细解释： 1. **...
js实现页面时间动态变化
美丽的泡沫
07-08 4639
利用函数嵌套和setTimeout函数实现时间动态变化 var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-????) myDate.getMonth(); //获取当前月份(0-11,0代表1月) myDate.getDat
JavaScript制作简单网页时间变化
01-01的博客
09-14 809
主要使用document对象实现，在网页之上输出简单时间变化 使用setInterval方法进行不断调用fun()函数，来实现时间的显示，此处使用HBuilder编译。 setInterval("fun()",1000); function fun(){ var date=new Date(); document.
java web期末大作业
05-13
对于Java Web期末大作业，这里提供几个可能的项目主题： 1. 电商网站：可以实现商品浏览、购物车、订单管理、支付等功能。 2. 社交网站：可以实现用户注册、登录、发布动态、关注好友、私信等功能。 3. 在线教育...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值