Question

我必须使用HTML设计以下网页，使用CSS进行样式设置，使用JS进行验证：

在提供输入时，输出应如下所示：

CSS和JS要求是：

我写了以下代码：

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
background-color:#99FFFF;
}
h1{
font-style:italic;
font-weight:bold;
text-align:center;
color:Maroon;
}
table{
border-collapse: collapse;
border:5px solid black;
width:30%;
margin-left:35%;
}
tr{
text-align:left;
}
td{
padding:10px;
border:2px solid black;
}
#submitbutton{
margin-left:45%;
}
#discount{
text-align:center;
font-weight:bold;
font-size:25px;
}
#result{
text-align:center;
font-weight:bold;
font-style:italic;
font-size:40px;
color:#FF0000;
}
</style>
<script type="text/javascript">
function validateForm()
{
var x=document.myForm.name.value;
var y=document.myForm.price.value;
var namechar= /^[\sa-zA-Z]+$/;

if(x=="") {alert("Product Name should not be empty");return false;}

else if(y=="") {alert("Product Price should not be empty");return false;}

else if(!/^[a-zA-Z\s]+$/.test(x)) {alert("Product Name should contain only alphabets and space");return false;}

else if(y<1) {alert("Product Price should be a number with value greater than 0");return false;}

else
{
var x=document.myForm.season.value;
var disc;
if(x.match("summer")) disc=10; 
else if (x.match("newyear")) disc=5;
else if (x.match("clearance")) disc=15;

document.getElementById("discount").innerHTML="The discount is "+disc+"%";
var p=document.myForm.price.value;
p=p-(p*disc)/100;
document.getElementById("result").innerHTML="The discounted price : Rs "+p;
return true;
}
}

</script>
</head>

<body>
<h1>DISCOUNT PRICE</h1>
<form method="get" name="myForm" onsubmit="return validateForm()">
<table>
  <tr>
    <td>Product Name</td>
    <td>
      <input type="text" name="name">
    </td>
  </tr>
  <tr>
    <td>Product Price</td>
    <td><input type="number" name="price">
    </td>
  </tr>
  <tr>
  <td>Season</td>
  <td><select 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><br/>
<input type="submit" id="submitbutton" value="GET DISCOUNT PRICE">
</form>
<br/>
<div id="discount"></div>
<br/>
<div id="result"></div>
</body>
</html>

＆＃13;

根据需要获得输出（带有一些CSS样式错误），但输出不会持续。 div标签中显示的值立即消失。 如何确保输出持续？

如果可能的话，请帮助CSS样式。 如何将表格对齐35％并按45％提交按钮？

获取的输出网页：

Answer 1

这是因为该按钮的类型为submit，它将用户转发到<form> - 标记中指定的文件。只需返回false而不是true，问题就解决了。

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <style type="text/css">
    body {
      background-color: #99FFFF;
    }
    
    h1 {
      font-style: italic;
      font-weight: bold;
      text-align: center;
      color: Maroon;
    }
    
    table {
      border-collapse: collapse;
      border: 5px solid black;
      width: 30%;
      margin-left: 35%;
    }
    
    tr {
      text-align: left;
    }
    
    td {
      padding: 10px;
      border: 2px solid black;
    }
    
    #submitbutton {
      margin-left: 45%;
    }
    
    #discount {
      text-align: center;
      font-weight: bold;
      font-size: 25px;
    }
    
    #result {
      text-align: center;
      font-weight: bold;
      font-style: italic;
      font-size: 40px;
      color: #FF0000;
    }
  </style>
  <script type="text/javascript">
    function validateForm() {
      var x = document.myForm.name.value;
      var y = document.myForm.price.value;
      var namechar = /^[\sa-zA-Z]+$/;

      if (x == "") {
        alert("Product Name should not be empty");
        return false;
      } else if (y == "") {
        alert("Product Price should not be empty");
        return false;
      } else if (!/^[a-zA-Z\s]+$/.test(x)) {
        alert("Product Name should contain only alphabets and space");
        return false;
      } else if (y < 1) {
        alert("Product Price should be a number with value greater than 0");
        return false;
      } else {
        var x = document.myForm.season.value;
        var disc;
        if (x.match("summer")) disc = 10;
        else if (x.match("newyear")) disc = 5;
        else if (x.match("clearance")) disc = 15;

        document.getElementById("discount").innerHTML = "The discount is " + disc + "%";
        var p = document.myForm.price.value;
        p = p - (p * disc) / 100;
        document.getElementById("result").innerHTML = "The discounted price : Rs " + p;
        return false;
      }
    }
  </script>
</head>

<body>
  <h1>DISCOUNT PRICE</h1>
  <form method="get" name="myForm" onsubmit="return validateForm()">
    <table>
      <tr>
        <td>Product Name</td>
        <td>
          <input type="text" name="name">
        </td>
      </tr>
      <tr>
        <td>Product Price</td>
        <td><input type="number" name="price">
        </td>
      </tr>
      <tr>
        <td>Season</td>
        <td><select 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><br/>
    <input type="submit" id="submitbutton" value="GET DISCOUNT PRICE">
  </form>
  <br/>
  <div id="discount"></div>
  <br/>
  <div id="result"></div>
</body>

</html>

＆＃13;

网页输出不会持续

1 个答案: