实验4----为表格添加一列、构造解析链接代码

本文链接：https://blog.csdn.net/m0_62113052/article/details/130320238

##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">&nbsp;</div>
        <div class="header_right">&nbsp;</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;
}