《Web前端应用开发》考试试卷（模拟题）

最新推荐文章于 2024-05-07 06:05:10 发布

Patrick254

最新推荐文章于 2024-05-07 06:05:10 发布

阅读量488

点赞数

分类专栏： Web前端文章标签：前端 javascript html

本文链接：https://blog.csdn.net/HUBTOO/article/details/130321928

版权

Web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、产品搜索页面

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

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

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

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

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

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

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

<style type="text/css">
        #search div:nth-child(1){
            float: left;
            width: 100px;
            margin-right: 10px;
            text-align: right;
            background-color: #e66c06;
        }
        #search div:nth-child(2){
            width: 150px;
            margin-left: 110px;
            background-color: aquamarine;
        }
        #submit input{
            width: 268px;
            background-color: aqua;
            margin-top: 10px
        }
</style>
<body>
    <div id="search">
        <div>产品名称</div>
        <div><input type="text" placeholder="请输入产品名称">    
    </div>
    </div>
        <div id="error">
    </div>
    <div id="submit">    
        <input type="button" value="录入" onclick="check()">
    </div>
</body>

（自行添加了颜色用于区分块）

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

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

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

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

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

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

JS代码

<script src="js\jquery-3.1.1.min.js"></script>
<script>
        $().ready(function (){
          $("#submit input").click(function () { //点击“录入”按钮后执行数据验证；
              var erromsg=""
              var re=/\d/;
              if($("#search input").val()==""){
                  erromsg="请输入产品名称" //产品名称必须输入
                  $("#error").text(erromsg);
                  $("#error").css("color","#ff0000") //如果验证未通过则将错误消息填充至id为error的div中，并将错误消息以红色(#ff0000)显示
              }
              else if(re.test($("#search input").val())){
                  erromsg="产品名称中不能有数字" //产品名称中不能有数字
                  $("#error").text(erromsg);
                  $("#error").css("color","#ff0000")
              }
              else {
                  window.location.href = "product.html"; //如果全部验证通过，则跳转至产品主页面product.html。
              }
          })
        })
</script>

错误检测效果

成功输入产品名后跳转网页

二、产品主界面

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

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

（1）接口地址：http://43.136.217.18:8081/getProduct

（2）接口调用方式：post

（3）提交参数：name

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

利用ajax中的方法返回数据

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

{ "code":200,

"data":[{"brand":"联想","image":"thinkpad.jpeg","model":"thinkpad","price":5000},

{"brand":"戴尔","image":"lingyue.jpeg","model":"灵越","price":6000},

{"brand":"惠普","image":"anyinjinglin.jpeg","model":"暗影精灵","price":6000},

{"brand":"神舟","image":"youya.jpeg","model":"优雅","price":4000},

{"brand":"联想","image":"yangtian.jpeg","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://43.136.217.18:8081/img/图片文件名

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

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

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

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

JS代码

<script src="js/jquery-3.1.1.min.js"></script>
<script>
    $().ready(function(){
      $("#search").on("click", function(){
        $.ajax({
          url : "http://43.136.217.18:8081/getProduct",
          data : {name: $("#productName").val()},
          type : "POST",
          dataType : "JSON",
          success : function(jsondata){
            //document.write(JSON.stringify(jsondata));
            
            htmlcode="<table>";
            htmlcode += "<tr>"
                    + "<th height=30px width=150px align='center' valign='center' id='test' bordercolor='black'>&nbsp;&nbsp;</th> "
                    + "<th height=30px width=150px align='center' valign='center'>品牌</th>"
                    + "<th height=30px width=150px align='center' valign='center'>型号</th>"
                    + "<th height=30px width=150px align='center' valign='center'>价格</th>"
                    + "</tr>"
            for(var i in jsondata.data){
              src_pic="http://43.136.217.18:8081/img/"+jsondata.data[i].image
              src_model="http://43.136.217.18:8081/model/"+jsondata.data[i].model
              htmlcode += "<tr>"
                      + "<td height=100px width=100px align='center' valign='center' >" + "<image src="+ src_pic +" width=100px height=100px bordercolor=black>" + "</td>"
                      + "<td height=100px width=150px align='center' valign='center'> " + jsondata.data[i].brand + "</td>"
                      + "<td height=150px width=150px align='center' valign='center' id='mmodel'> " + "<a href="+ src_model + ">" + jsondata.data[i].model + "</a>" +"</td>"
                      + "<td height=100px width=150px align='center' valign='center' id='pprice'> " + jsondata.data[i].price + "</td>"
                      + "</tr>"
            }
            htmlcode += "</table>"
            $("#product").html(htmlcode);
          },
          error:function (jsondata) {
            var Msg=jsondata.msg
            alert(Msg)
            $("#error").html(htmlcode);
          }
        })
      })
    })
</script>

3、界面美化

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

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

（3）表格应该具备框线

CSS代码

<style>
    #mmodel a{
      color: #00ff00;
    }
    #mmodel a:hover{
      color: #ff0000;
    }
    #pprice{
      background-color:#ffffd0;
    }
    table {
      border-collapse: collapse;
      width: 100%;
    }
    td, th {
      padding: 8px;
      text-align: left;
      border: 1px solid black;
    }
    tr:first-child {
      border-top: 2px solid black;
    }
    tr:last-child {
      border-bottom: 2px solid black;
    }
    td:first-child {
      border-left: 2px solid black;
    }
    td:last-child {
      border-right: 2px solid black;
    }
    tr:hover {
      background-color: #f5f5f5;
    }
    #search div:nth-child(1){
      width: 100px;
      float: left;
      text-align: right;
      margin-right: 10px;
    }
    #search div:nth-child(2){
      width: 150px;
      margin-left: 110px;
    }
    #submit input{
      width: 287px;
    }
    #error{
      color: #ff0000;
    }
</style>
<body>
    <div>
        <input type="text" id="productName" placeholder="请输入产品名称"> <input type="button" id="search" value="搜索">
    </div>
    <div id="product"></div>
</body>

效果展示

鼠标移动变色效果

Patrick254

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
《Web前端应用开发》考试试卷（模拟题）

"data":[{"brand":"联想","image":"thinkpad.jpeg","model":"thinkpad","price":5000},（2）将数据放入一个四列表格中，第一行单元格为表头，height设为30px，后续行为数据，height设为100px；（1）遍历JSON中的所有的产品，构造表格HTML代码，并填充至id为product的div中。（1）为产品名称所在的div添加样式属性，使得产品名称保持在文本框的左边；链接，链接文本取值为JSON中的model属性值，链接的中的。
复制链接

扫一扫