web期末

最新推荐文章于 2024-07-20 18:16:53 发布
最新推荐文章于 2024-07-20 18:16:53 发布
阅读量502 收藏
点赞数 1
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guguo666/article/details/130324182
版权

实验四

1

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Oscar List</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-3.1.1.min.js"></script>
<style>
	
	
	/* 偶数行的背景颜色 */
	#main_table tr:nth-child(2n+1){
		background-color: #dddddd;
		
	}
	/* 当鼠标移上奇数行去时，修改背景颜色 */
	#main_table tr:nth-of-type(even):hover{
	  background-color: #bbedff;
	}
	
	/* 当鼠标移上偶数行去时，修改背景颜色 */
	#main_table tr:nth-of-type(odd):hover{
	  background-color: #3dc1f1;
	}
	
</style>
<script>
	   
	   $(document).ready(function(){
	     $("table tr").each(function(){
			 var url="detail.html";
			 url +="?year="+ $(this).find("td:first-child").text();

			 url +="&number="+encodeURIComponent($(this).find("td").eq(1).text()) ;
			 url +="&cnname="+encodeURIComponent($(this).find("td").eq(2).text()) ;
			 url +="&enname="+encodeURIComponent($(this).find("td").eq(3).text()) ;
			 url +="&nshowyear="+encodeURIComponent($(this).find("td").eq(4).text()) ;
	       $(this).append("<td><a href=' "+url+"' style=\"text-decoration:none;\" target='_blank'>查看</a></td>");
	     });
	   });
	   $(document).ready(function(){
	     $("table tr:first td:last").remove();
		 
	   });
</script>
</head>
<body>
<div id="main_area">
	<table id='main_table' cellpadding="0" cellspacing="0">
    	<tr><th>年份</th><th>奥斯卡</th><th>影片（中文名）</th><th>影片（英文名）</th><th>上映年份</th></tr>
		<tr><td>2023</td><td>95届</td><td>瞬息全宇宙</td><td>Everything Everywhere All at Once</td><td>2022</td></tr>
		<tr><td>2022</td><td>94届</td><td>健听女孩</td><td>Children of Deaf Adults</td><td>2021</td></tr>
		<tr><td>2021</td><td>93届</td><td>无依之地</td><td>Nomadland</td><td>2020</td></tr>
		<tr><td>2020</td><td>92届</td><td>极速车王</td><td>Ford v.Ferrari</td><td>2019</td></tr>
		<tr><td>2019</td><td>91届</td><td>绿皮书</td><td>Green Book</td><td>2018</td></tr>
		<tr><td>2018</td><td>90届</td><td>水形物语</td><td>The Shape of Water</td><td>2018</td></tr>
		<tr><td>2017</td><td>89届</td><td>月光男孩</td><td>Moonlight</td><td>2017</td></tr>
		<tr><td>2016</td><td>88届</td><td>聚焦</td><td>Spotlight</td><td>2016</td></tr>
		<tr><td>2015</td><td>87届</td><td>鸟人</td><td>Birdman</td><td>2015</td></tr>
		<tr><td>2014</td><td>86届</td><td>为奴十二年</td><td>12 Years a Slave</td><td>2014</td></tr>
		<tr><td>2013</td><td>85届</td><td>逃离德黑兰</td><td>Argo</td><td>2013</td></tr>
		<tr><td>2012</td><td>84届</td><td>艺术家</td><td>The Artist</td><td>2011</td></tr>
		<tr><td>2011</td><td>83届</td><td>国王的演讲</td><td>The King's Speech</td><td>2010</td></tr>
		<tr><td>2010</td><td>82届</td><td>拆弹部队</td><td>The Hurt Locker</td><td>2008</td></tr>
		<tr><td>2009</td><td>81届</td><td>贫民窟的百万富翁</td><td>Slumdog Millionaire</td><td>2008</td></tr>
		<tr><td>2008</td><td>80届</td><td>老无所依</td><td>No Country for Old Men</td><td>2007</td></tr>
		<tr><td>2007</td><td>79届</td><td>无间道风云</td><td>The Departed</td><td>2006</td></tr>
		<tr><td>2006</td><td>78届</td><td>撞车</td><td>Crash</td><td>2004</td></tr>
		<tr><td>2005</td><td>77届</td><td>百万美元宝贝</td><td>Million Dollar Baby</td><td>2004</td></tr>
		<tr><td>2004</td><td>76届</td><td>指环王3</td><td>The Lord of the Rings: The Return of The King</td><td>2003</td></tr>
		<tr><td>2003</td><td>75届</td><td>芝加哥</td><td>Chicago</td><td>2002</td></tr>
		<tr><td>2002</td><td>74届</td><td>美丽心灵</td><td>A Beautiful Mind</td><td>2001</td></tr>
		<tr><td>2001</td><td>73届</td><td>角斗士</td><td>Gladiator</td><td>2001</td></tr>
		<tr><td>2000</td><td>72届</td><td>美国丽人</td><td>American Beauty</td><td>2000</td></tr>
    </table>
</div>
</body>
</html>

2

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Detail</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-3.1.1.min.js"></script>
<script>
	   
	   $(document).ready(function(){
	        var params=window.location.href.split("?")[1].split("&");
			// alert(decodeURI(params[2]));
			var year = decodeURI(params[0].split("=")[1]);	
			var number = decodeURI(params[1].split("=")[1]);
			var cnname = decodeURI(params[2].split("=")[1]);
			var enname = decodeURI(params[3].split("=")[1]);
			var showyear= decodeURI(params[4].split("=")[1]);
			// alert(year);
			// alert(number);
			// alert(cnname);
			// alert(enname);
			// alert(showyear);
			$("#year").html(year);
			$("#number").html(number);
			$("#cnname").html(cnname);
			$("#enname").html(enname);
			$("#showyear").html(showyear);
			document.title=cnname;
			// var src="images/"+year+".jpg";
			// $('#moviepic').attr('src','"images/"+year+".jpg"');
		
			$("#moviepic").attr("src", "images/"+year+".jpg");		
			// alert("images/"+year+".jpg");
	   });
</script>
</head>
<body>
<div id="main_area">
	<img id="moviepic"  src="images/.jpg"  /><br>
	<!-- <img id="moviepic" src="images/2000.jpg" /><br> -->
	<table id="detail_table" cellpadding="0" cellspacing="0">
		<tr><td>获奖年份</td><td id="year">1</td></tr>
		<tr><td>届数</td><td id="number">2</td></tr>
		<tr><td>影片中文名</td><td id="cnname">3</td></tr>
        <tr><td>影片英文名</td><td id="enname">4</td></tr>
        <tr><td>上映年份</td><td id="showyear">5</td></tr>
    </table>
</div>
</body>
</html>

实验六

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>四级词汇</title>
		<!-- /手机默认风格 -->
		<script type="text/javascript">
		function setRootFontSize(){
		var rootHtml = document.documentElement;
		var rem = rootHtml.clientWidth / (1080 / 100);   //1080为设计图px宽度
		rootHtml.style.fontSize = rem + "px";
		}
		setRootFontSize();   //网页首次载入时执行一次
		window.addEventListener("resize", setRootFontSize, false);   //网页大小改变时执行
		window.addEventListener("orientationchange", setRootFontSize, false);   //横屏切换时执行
		</script>
	
	<style>
		body{
			margin: 0;
			padding: 0;
		}
		#word_searh{
			
			height: .5rem;
			display: flex;
			width: 7rem;
			
		}
		#resultArea{
			width:59%;
			height: 4.4rem;
			
			/* background-color: yellow; */
			border: 1px solid #7f7f7f;
			font-size: .16rem;
		}
		#input_word{
			border:1px solid #7f7f7f;
			width: 70%;		
			margin-right: 2px;
			
		}
		#searh{
			width: 60px;
			background-color: white;
			border:1px solid #7f7f7f;
	        
			
		}
		
		
	</style>
	<script src="js/jquery-3.1.1.min.js"></script>
	<script>
		$().ready(function(){
		    $("#word_searh:first-child input").on("input",function(){
				//$(this)将DOM元素转成jQuery对象
				
				var  wordText = $(this).val();//获取表单中显示的值
				//发起Ajax请求
				$.ajax({
					url:  "http://43.136.217.18:8081/getSimilarWords",
					data: {word: wordText,max: 20},
					type: "GET",
					dataType:"JSON",
					success: function(data){
						if(data.state =="SUC"){
							
							var htmlCode = "<ul>";
						
							for (var i in data.content){
							   htmlCode += "<li>" + data.content[i] +"</li>";
							}
							htmlCode  += "</ul>";
							$("#resultArea").html(htmlCode);
							//表项查询
							$("#resultArea li").on("click",function(){
								
							        var wordSearch01=$(this).text();
								    // alert(wordSearch01); 
									searchWord(wordSearch01);
							 });
							 // 按钮查询
							  $("#searh").on("click",function(){
							       
									var wordSearch=$("#input_word").val();
									searchWord(wordSearch);
									});
							function searchWord(word){
							    $.ajax({
								  url:"http://43.136.217.18:8081/getWordDetail",
								  data:{word:word},
								  type:"GET",
								  dataType:"JSON",
								  success:function(data){
								  	if(data.state=="SUC"){
										// $("#resultArea").html(data.content[0].eng);
										// var english=data.content[0].eng;
										var english ='<div id="002">';
										for(var i in data.content){
											for(var x in data.content[i].trans){
												
												for (var m in data.content[i].trans[x]){
													var para="<div>"
													var Pos="<tr>";
													var Chn ="<tr>";
													
													for (var n in data.content[i].trans[x].chn){
														Pos =data.content[i].trans[x].pos;
														Chn +="<tr>"+data.content[i].trans[x].chn[n] + " "+"</tr>";
														
													}
													Chn += "</tr>";
													Pos +="</tr>";
													
													
													Pos +=Chn;
													para+=Pos;
													para +="</div>";
												}
												english +=para;
											}
										}
										english +="</div>";
										var n="<div id='001'>";
										  n += data.content[0].eng;
										 n+="</div>";
										 
										// n+=english;
										
										// $("#resultArea").html(n);
										// $("#resultArea").html(n);
										$("#resultArea").html(english);
										$("#resultArea").prepend(n);
										var divone=$("#001");
										var divtwo=$("#002");
										divone.css({
											// 'background-color': 'red',
											'display': 'inline-block',
											'vertical-align': 'top',
											  'margin-right': '.5rem'
										});
										divtwo.css({
											// 'background-color': 'blue',
											'display': 'inline-block',
											'vertical-align': 'top'
										})
										
									}else{
										
										var msg="  未查询到词汇!!!";
										word+=msg;
										$("#resultArea").text(word
										
										);
									}
								  },
								  //访问失败
								  error: function(data){
								        var msg="系统错误消息";
								        $("#resultArea").text(msg);
								  }
							  })
							}  
							
							
						}else {
							var msg="数据加载失败!";
							$("#resultArea").text(msg);
						}
					},
					error:function(data){
						var msg="系统错误消息,未连接到服务器";
						$("#resultArea").text(msg);
						// alert("访问失败");
					}
				});
			});
		});
	</script>
</head>
	<body>
		<div id="word_searh">
			<input type="text" id="input_word" value="" placeholder="请输入英文词汇"/>
		    <input type="button" id="searh" value="查词"/>
		</div>
		<div id="resultArea"></div>
	</body>
</html>

模拟考试

input

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品录入</title>
    <link href="css/input.css" rel="stylesheet" type="text/css" />
    <style>
        #search div:first-child{
            float: left;
            margin-left: 100px;
        }
        #search input{
            margin-left: 10px;
        }
        #submit input{
            margin-top: 10px;
            width: 325px;
            height: 30px;
        }
    </style>
    <script src="js/jquery-3.1.1.min.js"></script>
    <script>
        $().ready(function (){
            $("#submit input").on("click",function (){
                var val=$("#search input").val();
                if(val===""){
                    $("#error").text("产品名称不能为空")
                    $("#error").css("color","#ff0000")
                }
                else if (/\d/.test(val)) {
                    $("#error").text("产品名称不能数字")
                    $("#error").css("color", "#ff0000");
                    return false
                } else {
                    window.location.href = "product.html";
                    return true
                }
            })
        })
    </script>
</head>
<body>
<div id="search">
    <div>产品名称</div>
    <div><input type="text" placeholder="请输入产品名称"></div>
</div>
<div id="error"></div>
<div id="submit"><input type="button" value="录入"></div>
</body>
</html>

product

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品</title>
    <script src="js/jquery-3.1.1.min.js"></script>
    <script>
        $().ready(function () {
            $("#search").on("click",function (){
                var word = $("#product").val();
                $.ajax({
                    url:"http://43.136.217.18:8081/getProduct",
                    data:{name : word},
                    type:"POST",
                    datatype: "JSON",
                    success: function (josndata){
                        var htmltext="<table><tr><th style='height: 30px'></th><th style='height: 30px'>品牌</th><th style='height: 30px'>型号</th><th style='height: 30px'>价格</th></tr>";
                        var item=josndata.data
                        for(var i in josndata.data){
                            htmltext+="<tr class='row'><th style='height: 100px'><img style='width: 100px;height: 100px' src='http://43.136.217.18:8081/img/" + item[i].image + "' >"+"</th>"
                            htmltext+="<th style='height: 100px'>"+item[i].brand+"</th>"
                            htmltext+="<th style='height: 100px'><a href='http://43.136.217.18:8081/img/" + item[i].image + "'>"+item[i].model+"</a></th>"
                            htmltext+="<th style='height: 100px'>"+item[i].price+"</th>"
                            htmltext+="</tr>"
                        }
                        htmltext+="</table>"
                        $("#answer").html(htmltext);
                    },
                    error:function (data){
                        alert("服务器内部错误")
                    }

                })
            })
        })
    </script>
</head>
<body>
<div><input type="text" id="product" placeholder="请输入产品名称"> <input type="button" id="search" value="搜索"></div>
<div id="answer"></div>
</body>
</html>
一颗西柚子
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web期末网站设计.zip
01-04
【标题】"Web期末网站设计.zip" 是一个包含学生或教育者在K12阶段进行Web页面制作期末作业的资源包。这个压缩文件很可能是为了教授基础的网页设计概念，帮助学习者掌握HTML、CSS以及可能的JavaScript技术，从而创建...
web期末大作业HTML.rar
12-22
在这个“web期末大作业”中，你可以找到一系列HTML代码，这对于初学者来说是一个很好的实践机会。 首先，HTML的基本结构包括<!DOCTYPE>声明，它定义了文档类型。接着是标签，整个网页的根元素。在内部，包含了元...
web期末作业
weixin_42453922的博客
06-24 2204
web期末项目 文章目录web期末项目一、项目要求二、项目介绍1.组织结构2.模块依赖3.使用技术3.1 node.js3.2 express3.3 Angular.js4.项目运行三、mysql配置与数据库设计1. 安装mysql2. 数据库2.1 数据库设计2.2 数据库连接四、登陆、注册、限制查看、退出1.后端：2.前端：3.限制查看：非注册用户不可查看：4.退出：五、用户操作记录计入数据库六、查询列表支持排序与分页1.排序（1）search.html:（2
web期末作业网站
yan2005221的博客
01-08 388
web期末大作业--网页设计 HTML+CSS+JS（附源码）
热门推荐
qq_63644501的博客
04-16 5万+
作品介绍：该作品是一个是一个关于影视作品的网页，一共有五个页面，主页，最新，排行，我的，联系我们。
Java Web 期末复习
qq_52030860的博客
03-02 763
JavaWeb期末复习
Java Web期末总结
m0_65995252的博客
06-20 587
本文总结了本学期学过的一些主流框架，可以作为练习时的参考，后期会根据进一步的练习和实践进行补充
JAVA Web 期末复习
qq_52619275的博客
01-01 660
javaweb期末题复习
java web期末复习_javaweb期末考试.doc
weixin_32541907的博客
03-07 1494
javaweb期末考试1、下面哪一个不是动态网页技术( )。ASP B.JSP C.PHP D.HTML2、下列关于Tomcat说法不正确的是( )。A.Tomcat是一个Servlet容器。B.Tomcat是一种编程语言。C.Tomcat是一个免费开源的项目。D.Tomcat的默认端口是8080。3、可以实现不同网页之间的数据共享，而且还可以实现跨机共享数据的...
Web期末复习指南（2w字总结）
luming的博客
06-15 3514
本文旨在梳理Web技术常包含的内容，阅读完整篇文章后会对整体有个系统的认知，从前端的HTML到后端的MySql，对于大概试题中可能会涉及的地方都有所分析，通篇提供了许多代码案例，供读者更好的理解。对于一些很细节的东西如DOM对象、MySql的案例等等，笔者很想继续分享下去，但是受限于篇幅的原因只能点到为止，后面会考虑继续补充，争取覆盖到全部的知识点。
Web期末复习考试点总结
qq_54162207的博客
05-11 6438
前言 刚刚复习过web相关知识点以备战期末考试，期末考试刚过，把考试点共享出来，以便自己之后对概念能快速回顾，也望文章能帮助到大家，由于是考试的考试点总结，因此知识点并不全面，望大家理解。 参考资料：Java Web程序设计（慕课版 第2版）——基于SSM（Spring+SpringMVC+MyBatis）框架 主主编：梁永先，陈滢生，尹校军 副主编：桑园，王兰，张军丽 第一章 Web：web是分布在全世界的、基于HTTP通信协议的、存储在web服务器中的所有互相链接的超文本集。 Web发展历程：静态文档阶
Java web期末
ordinary_pq的博客
04-20 2704
一，简答题 1、Servlet的体系结构 1）Servlet接口，规定了必须由Servlet类实现并且由Servlet引擎识别和管理的方法集 2）GenericServlet抽象类，提供了除service()方法之外其他有关Servlet生命周期的方法 3）ServletConfig接口，获取Servlet初始化参数和ServletContext对象 4）HttpServlet抽象类，在原有Servlet接口上添加了对HTTP协议的处理，比Servlet功能更强大 5）HttpServletReq
山东大学web期末复习.pdf
01-06
山东大学web期末复习资料 本资源为山东大学web期末复习资料，涵盖了HTML基本结构、标记属性、基本语法、网页元信息、文本修饰、列表、超链接、图像、表格、表单、CSS选择器等多方面的知识点。 一、HTML基本结构 ...
web期末课程设计报告
12-17
在本项目中，"web期末课程设计报告"涵盖了构建一个完整的购物网站的多个关键技术和环节。这个设计不仅涉及前端界面的构建，还包含了后端功能的实现以及数据库的交互。以下是对这些知识点的详细说明： 1. **前端技术...
web期末作业.zip
05-09
html+css，没有js，没有js，...也没有实验报告。 四个页面吧，忘记大一还是大二了，照着老师ppt做的（为了体现学习内容），傻傻的按老师要求txt编辑，老师老折磨王了。 虽然做的很幼稚，但当时还是蛮认真的，细节很多。
前端面试题日常练-day97 【Less】
最新发布
qq_44640575的博客
07-20 385
border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1232
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
LG 选择 Flutter 来增强其智能电视操作系统 webOS
恋猫de小郭的博客
07-17 1724
总的来说，LG 是 Flutter 在 TV 领域的一次新的尝试，并且它是在脱离了 Android 平台的场景下实现的支持，虽然 webOS 并不是什么流行的系统，但是这也体现出了 Flutter 的特点：可以用较低的成本实现较好性能的跨平台。后续，在 LG 的主导下，WebOS 经过进一步修改，转变为智能电视操作系统，于是 WebOS TV 就诞生了，此后 LG 的 TV 基本路线定为 webOS ，在应用层面，WebOS TV 以基于 Web 的技术为基础。然后 LG 为什么选择 webOS？
纯前端小游戏，4096小游戏，有音效，Html5，可学习使用
m0_62996549的博客
07-18 384
【代码】纯前端小游戏，4096小游戏，有音效，Html5，可学习使用。
java web期末试卷
05-16
Java Web期末试卷主要围绕着Java Web开发的知识点进行考察，要求考生能够掌握Java Web的基本概念、技术原理、开发工具以及实践经验等方面的内容。 具体来说，Java Web期末试卷可能包括以下几个方面的考点： 1. ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值