Question

最近我一直在尝试将字符串从文本输入转换为浮点数/整数以在各种动画中使用时出现问题。有任何想法吗？目前我正在尝试使用parsFloat，但这只是阻止圆圈加载所有。有没有其他方法将字符串转换为浮点数？谢谢！

function myFunction() { 

    var degrees = undefined;
    var Rad = function degToRad(x) {
        degrees = x/(180/Math.PI);
        return degrees;
    };

    var canvas = document.getElementById("canvas"),
        c = canvas.getContext("2d");

    var posX = 55, posY = 100, gravity = parseFloat(document.getElementById("drag").value) * parseFloat(document.getElementById("gravity").value), vX = parseFloat(document.getElementById("xVel").value), vY = 0;
    setInterval(function() {

        c.fillStyle = "black";
        c.fillRect(0, 0, canvas.width, canvas.height);

        c.beginPath();
        c.arc(posX, posY, parseFloat(document.getElementById("radius").value), 0, Rad(360), false);
        c.fillStyle = "white";
        c.fill();

        posX+= vX;
        posY+= vY;

        if (posY > 800-parseFloat(document.getElementById("radius").value)) {
            vY *= -document.getElementById("bounce").value;
            posY = 800-parseFloat(document.getElementById("radius").value);
            vX *= 0.9;
        }

        vY += gravity;
    }, parseFloat(document.getElementById("framerate").value));

}
 </script>

</head>
<body>
  <input id = "gravity" type="text" placeholder="gravity (m/s)">
  <input id = "xVel" type = "text" placeholder="x velocity (m/s)">
  <input id = "bounce" type = "text" placeholder="bounce (0-1)">
  <input id = "radius" type = "text" placeholder="sphere radius">
  <input id = "Mass" type = "text" placeholder="sphere mass">
  <input id = "density" type = "text" placeholder="fluid density">
  <input id = "framerate" type = "text" placeholder="framerate (ms/frame)">
  <input id = "drag" type = "text" placeholder="drage co. (sphere = 0.5)">
  <input id = "submit" type = "submit" onclick="myFunction()">
  <button type="submit" onclick="location.reload()">done</button>
 <canvas id = "canvas" width="5000" height="800">

 </canvas>
</body>
</html>

Answer 1

你应该过滤和审核任何输入。

以下功能只是一个例子。它审查了str，具有约束min和max。如果它不能生成数字，它将默认为给定值。它会在字符串中找到第一个数字。它不会使用e（12e-10或9.245e34）

接受数字

function vetNumber(str, defaultVal, min, max) {
    if(min === undefined || min === null){
        min = -Infinity;
    }
    if(max === undefined || max === null){
        max = Infinity;
    }
    if(defaultVal === undefined || defaultVal === null){
        defaultVal = 1;  // what the default defaultVal is is up to you.
    }
    if (typeof str === "string") {
        // extract a number
        // could have a leading - or . or -.

        str = /(-??([0-9]+\.?|\.?)[0-9]+)/.exec(str);
        if (str === null) {
            return defaultVal;
        }
        str = Number(str[0]); // convert to a number;
        return str < min ? min : str > max ? max : str;
    }
    if (typeof str === "number") {
        return str < min ? min : str > max ? max : str;
    }
    return defaultVal;
}

我喜欢使用一个也允许常数和公式的数字兽医，例如PI是3.14...而1/3是0.3333333等。我发现客户喜欢这样的一个功能，只要它是非侵入性的。

尝试将字符串转换为画布上的浮点数时JS问题？

1 个答案: