0

好的，所以我正在尝试用 JavaScript 制作一个中点计算器，以娱乐并练习该语言，公式很简单，只有 x1 + x2 / 2 和 y1 + y2 / 2，我希望用户能够定义 x 和 y 坐标，这就是我想出的：

alert("welcome to nate's midpoint calculator!");
var x1 = prompt("type your first x coordanate!");
var y1 = prompt("excelent!, now your first y coordanate!");
var x2 = prompt("now type your second x coordanate!");
var y2 = prompt("and finally, your last y coordanate!");
var midText = ("your midpoints are: ");
var comma = (",");
var exclam = ("!");
var two = (2)
var x1x2 = (x1 + x2 / two);
var y1y2 = (y2 + y2 / two );
alert(midText + x1x2 + comma + y1y2 + exclam);

由于某种原因，这不是正确计算并输入错误答案，请继续尝试。这可能是我的一些奇怪的错误输入，我对 javascript 相当陌生，只使用过一两个小时的语言。任何帮助将不胜感激！提前致谢！

4

3 回答 3

7 
(x1 + x2 / two)

是分割然后连接一个字符串和一个数字。尝试

((+x1 + +x2) / two)

它使用前缀+运算符将字符串强制转换为数字并将低优先级加法括起来。

您可以通过执行此操作来查看此操作

alert(("1" + "0") / 2)  // alerts 5 since "1" + "0" == "10"
alert((1 + 0) / 2)      // alerts 0.5 since 1 + 0 == 1
于 2013-09-18T18:36:10.420 回答
4

也许你需要

var x1x2 = (parseInt(x1) + parseInt(x2)) / two;
var y1y2 = (parseInt(y2) + parseInt(y2)) / two;
于 2013-09-18T18:34:32.413 回答
3

演示 jsFiddle

JS

alert("welcome to nate's midpoint calculator!");
var x1 = prompt("type your first x coordanate!");
var y1 = prompt("excellent!, now your first y coordanate!");
var x2 = prompt("now type your second x coordanate!");
var y2 = prompt("and finally, your last y coordanate!");
var midText = ("your midpoints are: ");

var x1x2 = (+x1 + +x2) / 2;
var y1y2 = (+y2 + +y2) / 2 ;
alert(midText + x1x2 + "," + y1y2 + "!");

我会这样做的方式（jsFiddle）

HTML

<h1>Welcome to Nate's midpoint calculator!</h1>
<form>
    <div>
        <label for="x1">X1</label>
        <input type="textbox" id="x1" />
        <label for="y1">Y1</label>
        <input type="textbox" id="y1" />
    </div>
    <div>
        <label for="x2">X2</label>
        <input type="textbox" id="x2" />
        <label for="y2">Y2</label>
        <input type="textbox" id="y2" />
    </div>
    <div>
        <input type="submit" value="Calculate" onclick="Calculate()"/>
    </div>
</form>
<div>
    <span id="results"></span>
</div>

JS

function Calculate(){
    event.preventDefault();
    var x1 = parseFloat(document.getElementById('x1').value);
    var y1 = parseFloat(document.getElementById('y1').value);
    var x2 = parseFloat(document.getElementById('x2').value);
    var y2 = parseFloat(document.getElementById('y2').value);

    var x1x2 = parseFloat((x1 + +x2) / 2);
    var y1y2 = parseFloat((+y2 + +y2) / 2);
    document.getElementById("results").innerHTML=("your midpoints are: " + x1x2 + "," + y1y2 + "!");
}

使用 KnockoutJS

HTML

<h1>Welcome to Nate's midpoint calculator!</h1>

<div>
    <label for="x1">X1</label>
    <input type="textbox" id="x1" data-bind="value: x1" />
    <label for="y1">Y1</label>
    <input type="textbox" id="y1" data-bind="value: y1" />
</div>
<div>
    <label for="x2">X2</label>
    <input type="textbox" id="x2" data-bind="value: x2" />
    <label for="y2">Y2</label>
    <input type="textbox" id="y2" data-bind="value: y2" />
</div>
<div> 
    your midpoints are: <span id="results" data-bind="text: Midpoint"></span>!
</div>

JS

var MidpointCalulatorViewModel = function () {
    var self = this;
    self.x1 = ko.observable();
    self.x2 = ko.observable();
    self.y1 = ko.observable();
    self.y2 = ko.observable();

    self.x1x2 = ko.computed(function () {
        return parseFloat((parseFloat(self.x1()) + parseFloat(self.x2())) / 2);
    }, self);

    self.y1y2 = ko.computed(function () {
        return parseFloat((parseFloat(self.y1()) + parseFloat(self.y2())) / 2);
    }, self);

    self.Midpoint = ko.computed(function () {
        return self.x1x2() + "," + self.y1y2();
    }, self);
};

ko.applyBindings(new MidpointCalulatorViewModel());

请注意，您需要验证

于 2013-09-18T18:36:33.317 回答