web前端模拟测试

最新推荐文章于 2023-11-11 21:38:20 发布

不_要_挂_科

最新推荐文章于 2023-11-11 21:38:20 发布

阅读量258

点赞数

文章标签：前端 html css

本文链接：https://blog.csdn.net/m0_57315637/article/details/130206515

版权

一、产品搜索界面（如下图所示）

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

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

1.界面美化

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

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

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

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

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>产品录入</title>
		<style>
			#search div:first-child {
				float: left;
				width: 100px;
				text-align: right;
				margin-right: 10px;
			}

			#submit input {
				margin-top: 15px;
				width: 268px;
			}

			#error {
				color: #ff0000;
			}
		</style>
		<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="录入" onclick="checkdata()"></div>

		<script>
			function checkdata() {
				let name = document.getElementsByTagName("input")[0].value
				if (name == "") {
					document.getElementById("error").innerHTML = "请输入产品名称"
				} else if (/\d/.test(name)) {
					document.getElementById("error").innerHTML = "产品名称中不能有数字"
				} else {
					window.location.href = "product.html"
				}
			}
		</script>
	</body>
</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}

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

（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）表格应该具备框线

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>产品</title>
	<script src="js/jquery-3.1.1.min.js"></script>
	<style>
		table {
			border: 1px solid #000;
			border-collapse: collapse;
			width: 550px;
		}
		th {
			height: 30px;
			text-align: center;
			vertical-align: middle;
			border: 1px solid #000;
		}
		td {
			height: 100px;
			text-align: center;
			vertical-align: middle;
			border: 1px solid #000;
		}
		img {
			height: 100px;
			width: 100px;
		}
		a {
			color: #00ff00;
		}
		a:hover {
			color: #ff0000;
		}
		tr th:nth-child(4) {
			background-color: #ffffd0;
		}
		tr td:nth-child(4) {
			background-color: #ffffd0;
		}
		tr th:nth-child(1) {
			width: 100px;
		}
		tr th:nth-child(2) {
			width: 150px;
		}
		tr th:nth-child(4) {
			width: 150px;
		}
	</style>
</head>

<body>
	<div><input type="text" placeholder="请输入产品名称"> <input type="button" id="search" value="搜索" onclick="loaddata()">
	</div>
	<div id="product"></div>
	<script>
		$(function () {
			$.ajax({
				type: "get",
				url: "http://114.67.241.121:8080/product/list",
				dataType: "json",
				contentType: "application/json; charset=utf-8",
				success: function (res) {
					console.log(res)
					let htmlContent = "";
					htmlContent += "<table><tr>"
					htmlContent += "<th></th>"
					htmlContent += "<th>品牌</th>"
					htmlContent += "<th>型号</th>"
					htmlContent += "<th>价格</th>"
					htmlContent += "</tr>"
					for (let i = 0; i < res.data.length; i++) {
						htmlContent += "<tr>"
						htmlContent += "<td><img src='http://114.67.241.121:8080/img/" + res.data[i].image + "'></td>"
						htmlContent += "<td>" + res.data[i].brand + "</td>"
						htmlContent += "<td> <a href='http://114.67.241.121:8080/img/" + res.data[i].image + "'>" + res.data[i].model + "</a></td>"
						htmlContent += "<td>" + res.data[i].price + "</td>"
						htmlContent += "</tr>"
					}
					htmlContent += "</table>";
					document.getElementById("product").innerHTML = htmlContent
				}
			})
		})

	</script>
</body>

</html>

不_要_挂_科

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
web前端模拟测试

（1）在<style>中添加内嵌样式表，为型号链接添加样式，将链接颜色设置为#00ff00，鼠标移动上去变为#ff0000；（2）将数据放入一个四列表格中，第一行单元格为表头，height设为30px，后续行为数据，height设为100px；（1）遍历JSON中的所有的产品，构造表格HTML代码，并填充至id为product的div中。（1）为产品名称所在的div添加样式属性，使得产品名称保持在文本框的左边；链接，链接文本取值为JSON中的model属性值，链接的中的。
复制链接

扫一扫