Question

我最近看到了谷歌内置的几何计算器。当我搜索任何其他形状的“圆形区域”时，Google有一个内置计算器，用户可以在其中填充半径并提供该区域。因此，当用户键入值时，计算器会自动提供区域，而无需用户单击提交按钮，当用户更改半径时，计算器会立即自动重新计算区域。
（如果要测试，请检查example）

那它是如何运作的？它只是JavaScript或AJAX或其他一些网络技术？提前致谢

Answer 1

它只是一个数学计算，可以单独使用javascript完成。我想不需要AJAX。即使使用画布，您也可以获得输入并使用绘图进行计算和显示。

您需要的是公式，如您需要的链接A = π * (r * r)圈

和square A = a * a，其中a是边的长度。

使用键盘回叫，您无需使用按钮即可轻松完成。查看示例here

HTML

<input type="text" id="radius" />
<div id="res"> Area is <span> 0 </span> </div>

jquery的

$(document).ready(function() {
    $("#radius").keyup(function(e) {
        e.preventDefault();
        var r = parseInt($(this).val(),10);
        var a = (r*r) * 3.142;
        $("#res span").html(a);
    });
});

的javascript

var rad = document.getElementById("radius");
rad.addEventListener("keyup", function() {
    var r = parseInt(this.value, 10);
    var a = (r*r) * 3.142;
    alert(a);// display it in a element instead of alert
}, false);

谷歌几何计算器如何工作

1 个答案: