利用JS写一个计算平方的网页

时间：2023-03-08 19:53:33
<!-- 计算一个数的平方并显示出来 -->

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>计算平方</title>

    <script>

        function pf(){

            var input =    document.getElementById("num");

            console.log(input);

            //获取框内的值

            var n = input.value;

            console.log(n);

            //获取span

            var span = document.getElementById("result");

            //判断该值是否为数字

            if(isNaN(n)){

                //不是数字，需要重新输入

                span.innerHTML ="不是数字，请重新输入数字";

            }else{

                //是数字，计算平方

                span.innerHTML= n*n ;

            }

        }

    </script>

</head>

<body>

    <!--

    1 如何获取网页上的一个元素

        document.getElementById("id")

    2 如何读写文本框的值

        读：input.value

        写：input.value = "abc"

    3 如何读写span的内容

        读：span.innerHTML

        写：span.innerHTML = "abc"

     -->

    <input type="text" id ="num"/>

    <input type="button" value="平方" onclick="pf();"/>

    =<span id="result"> </span>

</body>

</html>

效果：文本输入77，点击平方返回数字

利用JS写一个计算平方的网页

相关文章