Question

我正在尝试使用JavaScript，HTML和使用CSS设置页面样式来计算三角形的面积。

我对CSS有点麻烦，我真的不知道从哪里开始使用JS。不寻找解决方案，但只是一个好的起点，也许一些链接将非常感激。这就是我所知道的我需要做的事情：

验证宽度和高度是否为数字且大于0（我知道如何使用if语句正确执行此操作？）
验证宽度不超过2倍，高度和高度不超过宽度的2倍。我知道我需要另一个if语句，但不知道如何构造它。
使用我的计算我的区域，使用onclick事件，使用JS进行数学运算并将文本框更改为结果。我知道我需要声明一个对象，然后将该对象的结果设置为文本框的值。

同样对于CSS，您将在我当前的结果中看到文本和图像不是以我的目标为中心。我把文本块集中在一起，但是文本本身没有居中（我尝试使用text-align：center但是它似乎没有工作）。

最后，我做的图像＆＃34;查看图像＆＃34;在Firefox上查看为什么它不工作说＆＃34;无法显示，因为它包含错误＆＃34;但是在Windows上图像显示得很好。

这是我的代码（再次，没有JS，因为不知道从哪里开始）：

<!DOCTYPE html>
<html>


<head>
<title>HTML5 template</title>
 <link rel="stylesheet" type="text/css" href="homework14.css">

</head>



<body>
<header>Homework 14</header>

<div id="table1">

<div id="table2">

<div id="table3">

<div id="triangle">
<img src="triangle.gif">
</div>

<div id="table4">

<form>
  <label for="width">Width (b):</label>
  <input type="text" id="width" name="width">
  <label for="height">Height (h):</label>
  <input type="text" id="height" name="height">
</form>
Enter the width and height of your triangle to calculate the area


<input type="button" value="Calculate area">
</div>


</div>

<hr>

<div id="table5">

<form>
  <label for="area">The area is:</label>
  <input type="text" id="area" name="area">
</form>

</div>
</div>

</div>

</body>


</html>

CSS：

#table1 {
    width: 500px;
    height: 350px;
    border: solid red;
}

#table2 {
    border: solid blue;
    padding: 10px;
    margin: auto;
    width: 50%;
    width: 450px;
    height: 300px;
    margin-top: 10px;
}

#table3 {
    margin: auto;
    width: 50%;
}

#table4 {
    margin: auto;
    width: 50%;
}

#table5 {
    margin: auto;
    width: 50%;
    font-weight: bold;
    width: 300px;
}

#triangle {
    display: block;
    margin: auto;
    width: 50%;
}

hr {
    color: blue;
    background-color: blue;
    height: 5px;
}

我知道这里有很多答案，所以真的感谢任何帮助，特别是在JavaScript上，谢谢!!

Answer 1

查看jQuery文档。非常适合刚刚开始操作DOM的初学者。但是，如果您认真对待Web应用程序开发，我建议您使用Angular 2，VueJS或React等框架/库。这里有一些使用jquery的示例javascript。

// put this at very bottom of your html right before </body>
<script>
// using jquery we can get the values inside the input boxes 
var height = $("#height").val();
var width = $("#width").val();
var error = false;
if(height <= 0) {
    error = true;
}
if(width <= 0) {
    error = true;
}
if(width > 2 * height) {
     error = true;
}
if(height > 2 * width) {
    error = true;
}

if(!error) {
    var area = .5 * height * width;
     $("#area").val(area);
}
</script>

我不知道图像有什么问题，也许可以将其保存为另一个问题。

Answer 2

使用JQuery获取输入值，并通过单击按钮进行函数调用来计算它们。这是一个有效的演示：

function calcFunction() {
var base = $("#width").val();
var height = $("#height").val();
if (base > 0 && height > 0 && base <= 2 * height && height <= 2 * base) {
    var solving_triangle = base * height / 2;
    $("#total").val(solving_triangle);
  } else {
    $("#total").val("Out of range");
}}

#table1 {
  width: 500px;
  height: 350px;
  border: solid red;
}

#table2 {
  border: solid blue;
  padding: 10px;
  margin: auto;
  width: 50%;
  width: 450px;
  height: 300px;
  margin-top: 10px;
}

#table3 {
  margin: auto;
  width: 50%;
}

#table4 {
  margin: auto;
  width: 50%;
}

#table5 {
  margin: auto;
  width: 50%;
  font-weight: bold;
  width: 300px;
}

#triangle {
  display: block;
  margin: auto;
  width: 50%;
}

#total {
  display: block;
  margin: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <header>Homework 14</header>

  <div id="table1">

    <div id="table2">

      <div id="table3">

        <div id="triangle">
          <img src="triangle.gif">
        </div>

        <div id="table4">

          <form>
            <label for="width">Width (b):</label>
            <input type="text" id="width" name="width">
            <label for="height">Height (h):</label>
            <input type="text" id="height" name="height">
          </form>
          <p>Enter the width and height of your triangle to calculate the area</p>


          <button id="calcuate" onclick="calcFunction()">Calculate area
          </button>
          <label for="total">The area of the triangle is:</label>
          <input type="text" id="total"/>

使用javascript计算三角形的面积

2 个答案: