网站导航
> 文章列表 > web期末

web期末

网友: 文章列表 2024-03-22 05:10:42

web期末

实验四

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.datafor(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>
网络标签：

相关问题