0

好吧，感谢这个网站上的用户，我能够将 JavaScript 函数中的一些数据记录到 html 表中。现在我还有一个问题要问。如何在页面加载时多次运行该函数并将该函数的输出记录到同一个 html 表中？因为我的代码现在只运行并记录一次函数的输出，当我刷新页面时，我丢失了之前生成的数字。我希望能够运行该函数 10 次并将其显示在 html 表上。您的帮助将不胜感激。

<html>
<head>
</head>
    <body>
        <script type="text/javascript" language="javascript">
            R = 10;
            theta = Math.random() * 2 * Math.PI;
            r1 = Math.random() * R;
            r2 = R + (Math.random() * 100);
            ray = r1 + (Math.random() * (r2 - r1));
            point = [ray*Math.cos(theta), ray*Math.sin(theta)];


            var distance = function(x1, y1, rad, x2, y2) {
                return (Math.sqrt(Math.pow((y2 - y1), 2) + Math.pow((x2 - x1), 2))) - rad;
            };

        </script>

    <div>
            <table border="1">
                <th>X Center</th>
                <th>Y Center</th>
                <th>r1</th>
                <th>r2</th>
                <th>X Random</th>
                <th>Y Random</th>
                <th>Distance</th>
                <tr>
                    <td><input type="text" id="x center"/></td>
                    <td><input type="text" id="y center"/></td>
                    <td><input type="text" id="r1"/></td>
                    <td><input type="text" id="r2"/></td>
                    <td><input type="text" id="x random"/></td>
                    <td><input type="text" id="y random"/></td>
                    <td><input type="text" id="displacement"/></td>
                </tr>

            </table>
        <script>
            document.getElementById("x center").value = 0;
            document.getElementById("y center").value = 0;
            document.getElementById("r1").value = r1;
            document.getElementById("r2").value = r2;
            document.getElementById("x random").value = point[0];
            document.getElementById("y random").value = point[1];
            document.getElementById("displacement").value = distance(0,0,R,point[0], point[1]);
        </script>
    </div>
  </body>
</html>
4

1 回答 1

1

这就是你想要的：

<html>

    <head></head>

    <body>
        <div>
            <table border="1">
                <thead>
                    <tr>
                        <th>X Center</th>
                        <th>Y Center</th>
                        <th>r1</th>
                        <th>r2</th>
                        <th>X Random</th>
                        <th>Y Random</th>
                        <th>Distance</th>
                    </tr>
                </thead>
                <tbody id="log"></tbody>
            </table>
        </div>
        <script>
            for (var i = 0; i < 10; i++) {
                addRow();
            }

            function addRow() {
                var R = 10;
                var theta = Math.random() * 2 * Math.PI;
                var r1 = Math.random() * R;
                var r2 = R + (Math.random() * 100);
                var ray = r1 + (Math.random() * (r2 - r1));
                var point = [ray * Math.cos(theta), ray * Math.sin(theta)];
                var dist = distance(0, 0, R, point[0], point[1]);

                var newRow =
                    "<tr>" +
                    "<td>" + 0 + "</td>" +
                    "<td>" + 0 + "</td>" +
                    "<td>" + r1 + "</td>" +
                    "<td>" + r2 + "</td>" +
                    "<td>" + point[0] + "</td>" +
                    "<td>" + point[1] + "</td>" +
                    "<td>" + dist + "</td>" +
                    "</tr>";
                document.getElementById("log").innerHTML += newRow;
            }

            function distance(x1, y1, rad, x2, y2) {
                return (Math.sqrt(Math.pow((y2 - y1), 2) + Math.pow((x2 - x1), 2))) - rad;
            };
        </script>
    </body>
于 2013-06-25T18:13:14.953 回答