Web期末试题2022

Koiwan

于 2023-04-22 20:57:04 发布

阅读量475

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_64381400/article/details/130310278

版权

该文描述了如何对一个产品搜索页面进行界面美化和数据验证。在input.html中，需按照要求调整CSS样式以优化产品名称的布局，并实现数据验证功能，确保产品名称非空且不包含数字。验证失败时，错误信息将以红色显示。在product.html中，需通过AJAX从指定接口获取产品数据，然后构造表格并填充数据，同时对表格进行样式设计，包括链接颜色、背景色和对齐方式等。

摘要由CSDN通过智能技术生成

一、产品搜索页面

打开“考试文件夹”中的input.html，完成以下步骤：

注意：本题仅能在input.html的<style>和<script>标签中新增样式或JavaScript代码；不可改动HTML的标签和内容，亦不可在标签中新增id、class或style属性。

1、界面美化（如下图所示）

已有一个产品录入界面input.html，采用div+css布局，请按要求新增样式表美化界面。

（1）为产品名称所在的div添加样式属性，使得产品名称保持在文本框的左边；

（2）调整产品名称所在div的宽度和间距，使得产品名称文字右边缘到浏览器左边界的距离为100px；再使产品名称文字到右边文本框的间距为10px；

（3）调整录入按钮的宽度，使其右边刚好与文本框的右边齐平。

2、数据验证约束：（10分）

（1）点击“录入”按钮后执行数据验证；

（2）产品名称必须输入；

（3）产品名称中不能有数字；

（3）如果验证未通过则将错误消息填充至id为error的div中，并将错误消息以红色(#ff0000)显示；

（4）如果全部验证通过，则跳转至产品主页面product.html。

二、产品主界面

打开“考试文件夹”中的product.html，完成以下步骤：

1、前后端数据交互：点击页面中“搜索”按钮向后端发起请求

（1）接口地址：http://114.67.241.121:8080/product/list

（2）接口调用方式：get

（3）提交参数:

（4）输入产品名称“电脑”并点击搜索，服务器将返回JSON数据

服务端返回数据格式：（请粘贴在下方）

{"code":200,"data":[{"brand":"联想","image":"thinkpad.png","model":"thinkpad","price":5000},{"brand":"戴尔","image":"lingyue.png ","model":"灵越","price":6000},{"brand":"惠普","image":"anyinjinglin.png ","model":"暗影精灵","price":6000},{"brand":"神舟","image":"youya.png ","model":"优雅","price":4000},{"brand":"联想","image":"yangtian.png ","model":"扬天","price":4000}],"msg":"成功","success":true}

3、界面设计和数据填充（如下图所示）

（1）遍历JSON中的所有的产品，构造表格HTML代码，并填充至id为product的div中。

（2）将数据放入一个四列表格中，第一行单元格为表头，height设为30px，后续行为数据，height设为100px；

（3）所有单元格都设置为垂直居中和水平居中；

（4）第一列显示一张图片，高宽各为100px，图片文件名为JSON中的image属性值，完整图片链接为：（4分）

http://114.67.241.121:8080/img/图片文件名

（5）第二列显示品牌，取值为JSON中的brand属性值

（6）第三列显示型号链接，链接文本取值为JSON中的model属性值，链接的中的图片文件名为JSON中的image属性值，完整链接代码为：

链接要求点击后在新页面打开；

（7）第四列显示价格，取值为JSON中的price属性值。

3、界面美化

（1）在<style>中添加内嵌样式表，为型号链接添加样式，将链接颜色设置为#00ff00，鼠标移动上去变为#ff0000；

（2）使用样式表表或表格属性，使表格第四列背景色变为#ffffd0。

（3）表格应该具备框线

input.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品录入</title>
    <script src="js/jquery-3.1.1.min.js"></script>
    <link href="css/input.css" rel="stylesheet" type="text/css" />
</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>
<style>
    *{
        margin: 0;
        padding: 0;
       
    }
    
    #search{
        display: inline-flex;
        margin-bottom: 10px;
        

    }
    #search:first-child{
        margin-left: 40px;
    }
    #search input{
        width: 150px;
        margin-left: 10px;
        
        
    }
    #submit input{
        width: 260px;
        
    }
    #error{
        color: red;
        margin-bottom: 10px;
        
    }
</style>
<script>
    /*function isEmpty(str){
        // if(str==null || str.trim()==""){
        //     return true;
        // }
        if(str == ""){
            return true;
        }
        return false;
        }

        function containsNumber(str){
            // for(var i=0;i<10;i++){
            //     if(str.indexOf(i)!=-1){
            //         return true;
            //     }
            
            // }
            // return false;
            const reg = /^[^0-9]{1,}$/
            if(!reg.test(str)){
                return true;
            }
            else{
                return false;
            }
        }
        var submit = document.getElementById("submit")
    submit.onclick=function(){
        //var name=document.getElementById("input[type='text']").value;
        let name = document.querySelector("#search input").value
        
        console.log(name)

        if(isEmpty(name)){
            console.log(1)
            document.getElementById("error").innerHTML="产品名称必须输入";
            
        }
       
        else if(containsNumber(name)){
            document.getElementById("error").innerHTML="产品名称不能含有数字";
        }
        else{
            location.href="product.html";
        }
    }
    */
    $("#submit").click(function(){
        function isEmpty(str){
        if(str==""){
            return true;
        }
        return false;
    }
    function containsNumber(str){
        for(var i=0;i<10;i++){
            if(str.indexOf(i)!=-1){
                return true;
            }
        }
        return false;
    }
        var name=$("#search input").val();
        if(isEmpty(name)){
            $("#error").html("产品名称必须输入");
        }
        else if(containsNumber(name)){
            $("#error").html("产品名称不能包含数字");
        }
        else{
            location.href="product.html";
        }
    })
    
</script>
</html>

product.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品</title>
    <script src="js/jquery-3.1.1.min.js"></script>
</head>
<body>
<div><input type="text" id="product" placeholder="请输入产品名称"> <input type="button" id="search" value="搜索"></div>
<div id="product">
    <table>
        <thead>
            <tr>
                <th>图片</th>
                <th>品牌</th>
                <th>型号</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>
</body>
<style>
    #product table{
        text-align: center;
        margin-top: 30px;
        width: 550px;
        border-collapse: collapse;   
       
    }
    thead th{
        height: 30px;
        
    }
    tbody td{
        height: 100px;
    }
    tbody {
        height: 100px;
        
    }
    table,th,td{
        border: 1px solid black;
    }
    table td:first-child{
        width: 100px;
    }
    table td:not(first-child){
        width: 150px;
    }
    table td:nth-child(4){
        background-color: #ffffd0;
    } 
    table td:nth-child(3) a:link{
        color: #00ff00;
    }
    table td:nth-child(3) a:hover{
        color: #ff0000;
    }
</style>
<script>
    $(document).ready(function(){
        let comp=[]
        $("input[type='button']").click(function(){
            $.ajax({
                type:"get",
                url:"http://114.67.241.121:8080/product/list",
                success:function(rsp){
                    console.log(rsp)
                    if(rsp.success){
                        comp.length = 0
                        for(var i=0;i<rsp.data.length;i++){
                            comp.push(rsp.data[i])
                        }
                        for(var i=0;i<comp.length;i++){
                            $("tbody").append(`
                            <tr>
                                <td>${comp[i].image}</td>
                                <td>${comp[i].brand}</td>
                                <td><a href="http://114.67.241.121:8080/img/图片文件名" target=_blank>${comp[i].model}</a></td>
                                <td>${comp[i].price} </td>
                            </tr>
                            `)
                        }
                        
                        alert("获取数据成功！")
                    }else{
                        alert("获取数据失败！")
                    }
                } 
            });
            
        })
    })
</script>
</html>