使用javascript计算三角形的面积

debugcn 发表于 Dev

BakeMeMuffins92

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

我在使用 CSS 时遇到了一些麻烦，而且我真的不知道从哪里开始使用 JS。不是在寻找解决方案，而只是一个很好的起点，也许会非常感谢一些链接。这是我知道我需要做的：

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

同样对于 CSS，您将在我当前的结果中看到文本和图像没有按照我的目标居中。我将文本块居中，但文本本身并未居中（我尝试使用 text-align: center 但这似乎不起作用）。

最后，当我在 Firefox 上“查看图像”以查看为什么它不起作用时，图像显示“无法显示，因为它包含错误”，但图像在 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 方面，谢谢！

胜利者

查看 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>

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。