高度/长度发生器是英尺?

时间:2013-02-14 01:42:30

标签: javascript html generator

我目前有这段代码,用于确定给定长度的高度和翼展。我非常希望将结果输入作为英尺和英寸的测量结果,以及在相同测量中产生的翼展和高度。我不介意它是否使用撇号或句号。

<SCRIPT LANGUAGE="LiveScript">
    function wings(form) {
        form.wingspan.value = (form.length.value * .75) * 2
        form.height.value = form.length.value * .5
    }
</SCRIPT>

<TABLE>
    <TR>
        <TD>Dragon Length:</TD>
        <TD><INPUT TYPE="text" NAME="length" SIZE=15 /></TD>
    </TR>
    <TR>
        <TD>Dragon Wingspan:</TD>
        <TD><INPUT TYPE="text" NAME="wingspan" SIZE=15 /></TD>
    </TR>
    <TR>
        <TD>Dragon Height:</TD>
        <TD><INPUT TYPE="text" NAME="height" SIZE=15 /></TD>
    </TR>
    <TR>
        <TD><INPUT TYPE="button" VALUE="Calculate" ONCLICK="wings(this.form)" /></TD>
    </TR>
</TABLE>

</FORM>

2 个答案:

答案 0 :(得分:0)

您是在浏览器中加载它吗?

如果您是,那么LiveScript将无法在大多数情况下运行。您可能希望使用Javascript或JQuery来查看编程。

这是一个可以帮助您入门的代码段,其中包含内联注释以供解释。注意我实际上并没有为你计算任何东西......你应该尝试自己做这个:

<!DOCTYPE html>
<html>
<head>
    <!-- You need this line so you can load the JQuery functions that you will be using -->
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<form id="wings">
<TABLE>
<TR><TD>Dragon Length:</TD><TD>
    <INPUT TYPE ="text" id="winglength" SIZE=15</TD></TR>
</TABLE>
</form>

<!-- ID of this element is called "trigger" and will be used for clicking -->
<div id="trigger">Click me to calculate the Wingspan and Height!</div>

<!-- This div tag is called "wingspan" -->
<div id="wingspan">Wingspan is: </div>

<!-- Can you write the HTML code for "height" here? -->

<script>

    // Everything in here will run when your page is loaded
    $(document).ready(function() {

        // When you click on the DIV tag called "trigger", you run this cod below.
        $("#trigger").click(function() {

            // "append" the wing length to the HTML tag above: the # refers to id called winglength
            $("#wingspan").append($("#winglength").val());

            // How you calculate the "height" is left as an exercise for the original poaster!
        });
    });
</script>

</body>
</html>

答案 1 :(得分:0)

没有插件或库,这是您的示例...

看一下这个例子:http://jsfiddle.net/BtC4K/

<强>使用Javascript:

function wings(){
    var lenght = document.getElementsByName("length")[0];
    var wingspan = document.getElementsByName("wingspan")[0];
    var height = document.getElementsByName("height")[0];

    wingspan.value = (lenght.value * 0.75) * 2;
    height.value = lenght.value * 0.5;
}

<强> HTML:

<table>
    <tr>
        <td>Dragon Length:</td>
        <td><input type="text" name="length" SIZE=15 /></td>
    </tr>
    <tr>
        <td>Dragon Wingspan:</td>
        <td><input type="text" name="wingspan" SIZE=15 readonly /></td>
    </tr>
    <tr>
        <td>Dragon Height:</td>
        <td><input type="text" name="height" SIZE=15 readonly /></td>
    </tr>
    <tr>
        <td><button onclick="wings()">Calculate</button></td>
    </tr>
</table>