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

<!-- 计算一个数的平方并显示出来 -->

<!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，点击平方返回数字

 

posted @ 2019-03-25 17:09  KwinWei  阅读(1884)  评论(0)  编辑  收藏  举报