规格:
创建一个网页,计算特定季节产品的折扣。折扣率的季节是夏季(10%),新年(5%)和许可(15%)。折扣按产品价格计算。网页应该看起来像
网页使用HTML设计,格式和样式使用CSS完成。客户端验证是使用JavaScript执行的。
网页要求
网页名称为“index.html”。网页背景颜色应为#99FFFF。标签“折扣价格”应该是标题标签(h1),并且应该是斜体粗体,居中和栗色。
产品名称,价格和季节应在表格内。产品名称和价格为text
框,标签名称分别为“name”和“price”,season
是一个标签名为“season”的下拉框。下拉框将具有以下值和显示值
· summer - SUMMER SALE
· newyear - NEW YEAR SALE
· clearance - CLEARANCE SALE
产品名称不应为空,并且只应包含字母和空格。价格文本框不能为空,number
value
大于零。
该表应该是边距左边对齐35%和外边框样式的实心5px和30%宽度。 element
和边框之间的空格必须为10px。
应提供值为“GET DISCOUNT PRICE”的提交按钮。单击该按钮,网页将计算产品的折扣价格。
结果必须显示在2个div标签中,其中第一个将具有名为“discount”的id,并显示产品的折扣%,第二个将具有名为“result”的id,并显示产品的折扣价。 div标记都应center
与bolder
文字对齐。折扣价的font
必须是斜体#FF0000和40px尺寸,折扣%必须是25px。为div,折扣和结果设置单独的样式
CSS:
{
background-color: #99FFFF;
}
h1{
color:maroon;
text-align:center;
font-weight: bold;
font-style:italic;
}
table,td{
border-style: solid;
padding: 10px;
border-width: 5px;
margin-left: 35%;
width: 30%;
}
div{
text-align:center;
font-weight: bold;
}
#result{
font-style:italic;
color:#FF0000 ;
font-size:40px;
}
#discount{
font-size:25px;
}
JS:
function discount()
{
var s = document.getElementById("season").value;
var p = document.getElementById("price").value;
var r;
if (s=='summer')
{
document.getElementById("discount").innerHTML = "The discount is 10%";
r=(p-(p*0.1));
}
else if(s=='newyear')
{
document.getElementById("discount").innerHTML = "The discount is 5%";
r=(p-(p*0.05));
}
else
{
document.getElementById("discount").innerHTML = "The discount is 15%";
r=(p-(p*0.15));
}
document.getElementById("result").innerHTML = "The discount price: Rs " + r;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>index.html</title>
</head>
<body>
<h1>DISCOUNT PRICE</h1>
<form>
<table>
<tr>
<td>Product Name</td>
<td><input type="text" name="name" id="name" required pattern="[a-zA-Z ]+"></td>
</tr>
<tr>
<td>Product Price</td>
<td><input type="number" name="price" id="price" min="1" ></td>
</tr>
<tr>
<td>Season</td>
<td>
<select id="season" name="season">
<option value="summer">SUMMER SALE</option>
<option value="newyear">NEW YEAR SALE</option>
<option value="clearance">CLEARANCE SALE</option>
</select>
</td>
</tr>
</table>
<center><input type="button" value="GET DISCOUNT PRICE" onclick="discount()"></center>
</form>
<div id="discount"></div>
<div id="result"></div>
</body>
</html>
错误:
testWeb(jspackage.JSAssignmentDiscount): 正确的HTML组件div必须与适当的约束一起使用 假
答案 0 :(得分:0)
按照上述“价格”限制使用以下行 -
<input type="text" name="price" id="price" pattern="[\d]+" min="1" required>
答案 1 :(得分:0)
您可以将其用于价格组件:
<input type="text" name="price" required pattern="[1-9]{1}[1-9]*">
答案 2 :(得分:-1)
应该显示一个带有“获取折扣价格”值的提交按钮。 只需阅读此行即可。他使用了type =“ button”,但应为type =“ submit” 实际上我现在正在做同样的问题。