##detail.html
<!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>
$().ready(function(){
var url = window.location.href;
var reg = /(?<==)[^&]*/g;
var params = url.match(reg);
var i = 0;
$("tr:nth-child(n) :last-child").each(function () {
$(this).text(decodeURIComponent(params[i]));
i++;
})
$("title").text(decodeURIComponent(params[2]));
if(params[0]!="2023"){
$("img").attr("src", "images/" + params[0] + ".jpg");
}
else {
$("img").attr("src", "images/" + params[0] + ".png");
}
});
</script>
</head>
<body>
<div id="main_area">
<img id="moviepic" src="images/.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>
##oscarlist.html
<!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>
<script>
$().ready(function(){
// 为表格添加一列
$("tr:first-child").append("<th>链接</th>")
$("tr:nth-child(n+2)").each(function(){
var url = "detail.html";
url += "?year=" + $(this).find("td").eq(0).text();
url += "&number=" + encodeURIComponent($(this).find("td").eq(1).text());
url += "&cnname=" + encodeURIComponent($(this).find("td").eq(2).text());
url += "&enname=American" + encodeURIComponent($(this).find("td").eq(3).text()) + "eauty";
url += "&showyear=" + $(this).find("td").eq(4).text();
$(this).append("<td><a href = '" + url + "' target='_blank'>查看</a></td>");
});
});
</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>
#奇偶行变色
tr:nth-child(even):hover{
background-color: #3dc1f1;
}
tr:nth-child(odd):hover{
background-color: #bbedff;
}
实验5----同步访问(实验3的布局)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<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>
<script src="js/jquery-3.1.1.min.js"></script>
<script>
$().ready(function () {
$("#btn").click(function() {
//数据验证
var errorMsg = "";
if($("#userText").val() == ""){
errorMsg = "* 用户名不能为空";
}
if($("#phoneNo").val() == ""){
errorMsg = "* 手机号不能为空";
}
if($("#password_one").val() == ""){
errorMsg = "* 密码不能为空";
}
if($("#password_two").val() == ""){
errorMsg = "* 确认密码不能为空";
}
if($("#password_one").val() != $("#password_two").val()){
errorMsg = "* 两次输入密码不一致";
}
if(errorMsg != ""){
$("#errorArea").text(errorMsg);
$("#errorArea").css("display", "block");
}
else {
var paras = {name: $("#userText").val(), phone: $("#phoneNo").val(), password: $("#password_one").val()};
$.ajax({
url: "http://43.136.217.18:8081/registAsync",
// url: "registAsync",
data: paras,
type: "POST",
// datatype: "JSON",
//访问成功,解析json
success: function (data) {
if(data.state == "SUC"){
window.location.href = "http://43.136.217.18:8081/success.html";
// window.location.href = "success.html";
}
else{
$("#errorArea").text(data.msg);
$("#errorArea").css("display", "block");
}
},
//访问失败
error: function (data) {
$("#errorArea").text("无法连接到服务器");
$("#errorArea").css("display", "block");
}
})
}
});
})
</script>
<script>
// 网页加载完毕后执行的初始化代码
function init(){
document.getElementById("errorArea").style.display="none";
document.getElementById("codeText").style.display="none";
}
// 检测注册信息
function checkReg(){
var errorArea = document.getElementById("errorArea");
var userText = document.getElementById("userText");
var phoneNo = document.getElementById("phoneNo");
var passWd_one = document.getElementById("passWd_one");
var passWd_two = document.getElementById("passWd_two");
var codeText = document.getElementById("codeText");
if(userText.value == ""){
errorArea.style.display="block";
errorArea.innerText = "* 用户名不能为空";
return;
}
if(phoneNo.value == ""){
errorArea.style.display="block";
errorArea.innerText = "* 手机号不能为空";
return;
}
if(phoneNo.value != "" && !(/^1\d{10}$/.test(phoneNo.value))){
errorArea.style.display="block";
errorArea.innerText = "* 手机号不正确";
return;
}
if(passWd_one.value == ""){
errorArea.style.display="block";
errorArea.innerText = "* 密码不能为空";
return;
}
if(passWd_two.value == ""){
errorArea.style.display="block";
errorArea.innerText = "* 确认密码不能为空";
return;
}
if(passWd_one.value != "" && passWd_two.value != "" && passWd_one.value != passWd_two.value){
errorArea.style.display="block";
errorArea.innerText = "* 两次输入密码不一致";
return;
}
if(codeText.value == ""){
errorArea.style.display="block";
errorArea.innerText = "* 验证码不能为空";
return;
}
if(codeText.value != "" && codeText.value != 123456){
errorArea.style.display="block";
errorArea.innerText = "* 验证码不正确";
return;
}
else{
window.location.href="news.html"
}
}
// 检测发送验证码
function checkSend(){
var phoneNo = document.getElementById("phoneNo");
var errorArea = document.getElementById("errorArea");
var sendBtn = document.getElementById("sendBtn");
var codeText = document.getElementById("codeText");
if(phoneNo.value == ""){
errorArea.style.display="block";
errorArea.innerText = "* 手机号不能为空";
}
else if(phoneNo.value != "" && !(/^1\d{10}$/.test(phoneNo.value))){
errorArea.style.display="block";
errorArea.innerText = "* 手机号不正确";
}
else{
sendBtn.style.display = "none";
codeText.style.display = "block";
}
}
// 出错后重新输入
function reInput(){
var errorArea = document.getElementById("errorArea");
errorArea.style.display = "none";
}
// 重新输入手机号
function reInput_no(){
var errorArea = document.getElementById("errorArea");
var codeText = document.getElementById("codeText");
var sendBtn = document.getElementById("sendBtn");
errorArea.style.display = "none";
codeText.style.display = "none";
sendBtn.style.display = "block";
}
</script>
<title>实验3</title>
<link rel="stylesheet" href="main.css">
</head>
<body onload="init()">
<!--网页头部-->
<div id="header">
<div class="header_left"> </div>
<div class="header_right"> </div>
<div class="header_center">用户注册</div>
</div>
<!--主要内容-->
<form action="http://43.136.217.18:8081/registSync" method="post">
<div id="mainArea">
<div class="main_left">用户名</div>
<div class="main_center"><input type="text" id="userText" placeholder="请输入用户名" onInput="reInput()"></div>
<div class="main_left">手机号</div>
<div class="main_center">
<input type="tel" id="phoneNo" placeholder="请输入手机号" style="width: 3.72rem" onInput="reInput_no()">
<input type="number" id="codeText" placeholder="请输入验证码">
<input type="button" id="sendBtn" value="发送验证码" onClick="checkSend()">
</div>
<div class="main_left">密码</div>
<div class="main_center"><input type="password" id="passWd_one" onInput="reInput()"></div>
<div class="main_left">确认密码</div>
<div class="main_center"><input type="password" id="passWd_two" onInput="reInput()"></div>
</div>
<!--异常信息提示-->
<div id="errorArea"></div>
<!--注册按钮-->
<div id="btn">
<input type="submit" id="regBtn" value="注册" onClick="checkReg()">
</div>
</form>
<!--两句话-->
<div id="text">
<div class="text_left">已有账号</div>
<div class="text_right">更换手机号</div>
</div>
<!--网页尾部-->
<div id="footer">
<div class="footer_left">
<div class="home">首页</div>
</div>
<div class="footer_right">
<div class="config">设置</div>
</div>
</div>
</body>
</html>
css
body {
margin: 0;
padding: 0;
}
#header {
background-color: #e66c05;
height: 1.32rem;
}
#btn {
height: 1.12rem;
padding: 6.4rem 0.4rem 0.32rem 0.4rem;
}
#text {
margin: 0rem 0.4rem 0rem 0.4rem;
}
#footer {
background-color: #e66c05;
width: 100%;
height: 1.46rem;
position: fixed;
bottom: 0;
}
.header_left {
float: left;
width: 1.30rem;
height: 1.32rem;
background-image: url("img/sub_back.png");
background-repeat: no-repeat;
background-position: 0.46rem 0.37rem; /*left top*/
background-size: 0.55rem 0.55rem;
}
.header_right {
float: right;
width: 1.30rem;
height: 1.32rem;
background-image: url("img/sub_more.png");
background-repeat: no-repeat;
background-position: 0.1rem 0.37rem; /*left top*/
background-size: 0.55rem 0.55rem;
}
.header_center {
color: #fffeff;
font-size: 0.58rem;
letter-spacing: 0.1rem;
line-height: 0.58rem;
padding: 0.37rem 0rem 0.37rem 0rem;
text-align: center;
margin: 0rem 1.30rem 0rem 1.30rem;
}
.main_left {
float: left;
width: 2.20rem;
color: #5d5d5d;
font-size: 0.47rem;
letter-spacing: 0.05rem;
line-height: 0.47rem;
padding: 0.64rem 0rem 0.14rem 0.47rem;
}
.main_center {
float: left;
height: 0.60rem;
font-size: 0.47rem;
padding: 0.50rem 0rem 0.22rem 0rem;
}
input[type="number"]{
float: left;
width: 2.70rem;
height: 0.73rem;
font-size: 0.36rem;
letter-spacing: 0.05rem;
text-align: center;
vertical-align: top;
margin-left: 0.17rem;
}
input[type="text"], input[type="tel"], input[type="password"]{
float: left;
width: 7.5rem;
height: 0.73rem;
font-size: 0.47rem;
letter-spacing: 0.05rem;
border-left: none;
border-right: none;
border-top: none;
outline: none; /*去掉输入框外形*/
}
#errorArea{
float: left;
font-size: 0.43rem;
letter-spacing: 0.1rem;
color: #ff0000;
margin-top: 0.2rem;
margin-left: 2.70rem;
}
#sendBtn{
background-color:transparent;
float: left;
color: #e66c05;
width: 2.2rem;
border: none;
font-size: 0.35rem;
letter-spacing: 0.05rem;
line-height: 0.35rem;
text-align: center;
margin-top: 0.25rem;
margin-left: 0.2rem;
}
#regBtn{
background-color: #e66c05;
height: 100%;
width: 100%;
vertical-align: top;
border: none;
color: #fffeff;
font-size: 0.5rem;
letter-spacing: 0.36rem;
line-height: 0.5rem;
text-align: center;
}
.text_left {
float: left;
color: #5f5f5f;
font-size: 0.47rem;
letter-spacing: 0.05rem;
line-height: 0.47rem;
/* margin-top: 0.32rem; */
}
.text_right {
float: right;
color: #5f5f5f;
font-size: 0.47rem;
letter-spacing: 0.05rem;
line-height: 0.47rem;
/* margin-top: 0.32rem; */
}
.footer_left {
float: left;
width: 1.20rem;
height: 1.27rem;
background-color: #fffeff;
background-image: url("img/main_home2.png");
background-repeat: no-repeat;
background-position: 0.27rem 0.18rem; /*left top*/
background-size: 0.62rem 0.6rem;
margin-left: 0.27rem;
}
.footer_right {
float: right;
width: 1.23rem;
height: 100%;
background-image: url("img/main_config1.png");
background-repeat: no-repeat;
background-position: 0rem 0.14rem; /*left top*/
background-size: 0.63rem 0.63rem;
}
.config {
font-size: 0.3rem;
color: #fffeff;
letter-spacing: 0.05rem;
line-height: 0.3rem;
margin-top: 0.88rem;
}
.home {
font-size: 0.3rem;
color: #e66c05;
letter-spacing: 0.05rem;
line-height: 0.3rem;
margin-top: 0.88rem;
text-align: center;
}