js——document.getElementById( ) 方法简单例子：输入圆的半径，自动显示周长和面积

# JJU_干干

 

要点：

1）用document.getElementById()根据标签的 id 对该标签进行赋值等操作

document.getElementById('id名').value = 赋值;

2）函数要返回多个变量，可用数组的形式括起来，再返回

var 数组变量名 = [变量名1, 变量名2, 变量名3, ... , 变量名n]

 

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆</title>

    <!-- 圆函数 -->
    <script type="text/javascript">
        function Yuan(){
            var  r = prompt("请输入圆的半径："); //输入
            r = parseFloat(r) && Number(r);
            if(!isNaN(r) && r>=0){
                var cir = 2*Math.PI*r;  // 周长
                var area = Math.PI*r*r; // 面积
                var yuan = [r,cir,area] // 返回一个包含：半径、周长和面积的数组
                return yuan
            }else{
                alert("半径输入有误！");
            }
        }
    </script>

</head>
<body>

    <div>
        <!-- 三个输入框，通过 js 代码 显示 value属性-->
        <p>
            请输入圆的半径：<input type="text" id="R"> 
        </p>
        <p>
            圆的周长：<input type="text" id="Cir"> 
        </p>
        <p>
            圆的面积：<input type="text" id="Area"> 
        </p>
    </div>

    <div>
        <script type="text/javascript">
            // 调用Yuan()方法：输入半径，返回半径、周长和面积组成的数组
            var yuan = Yuan();
            document.getElementById('R').value = yuan[0];  
            document.getElementById('Cir').value = yuan[1];
            document.getElementById('Area').value = yuan[2];
        </script>
    </div>

</body>
</html>

 

运行结果：

输入点击确定前：

点击确定后：

 

posted @ 2020-11-25 16:17  ZengZG  Views(1084)  Comments(0)  Edit  收藏  举报