집 > 기사 > 웹 프론트엔드 > 자바스크립트에서 그래픽 영역을 찾는 방법

자바스크립트에서 그래픽 영역을 찾는 방법

王林원래의: 2021-10-26 16:21:042708검색

그래픽 영역을 찾는 Javascript 방법: [function Circle(r){ if (this 인스턴스of Circle){this.r=r; this.area=function(){return Math.PI*this].

이 기사의 운영 환경: windows10 시스템, javascript 1.8.5, thinkpad t480 컴퓨터.

그래픽 영역 솔루션:

첫 번째 유형: 생성자

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        function Retangle(a,b){
            if(this instanceof Retangle){
                this.a=a;
                this.b=b;
                this.area=function(){
                    return this.a*this.b;
                    //console.log(Math.PI*this.r*this.r);
                }
                this.premeter=function(){
                    return (this.a+this.b)*2;
                    //console.log(Math.PI*this.r*2);
                }
            }else{
                return new Retangle(a,b);
            }
        }
        let c=new Retangle(10,10);
        //console.log(c instanceof Circle);//判断bool值
        console.log(c.area());
        console.log(c.premeter());
        Retangle(10,10);
    </script>
</head>
<body>
</body>
</html>

원의 영역:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        function Circle(r){
            if(this instanceof Circle){
                this.r=r;
                this.area=function(){
                    return Math.PI*this.r*this.r;
                }
                this.premeter=function(){
                    return Math.PI*this.r*2;
                }
            }else{
                return new Circle(r);
            }
        }
        let c=new Circle(10);
        //console.log(c instanceof Circle);
        console.log(c.area());
        console.log(c.premeter());
        Circle(10);
    </script>
</head>
<body>
 
</body>
</html>

출력 시 두 가지 형태가 있습니다.

Windows 일반 함수

Circle(10);
console.log(window.r);
console.log(window.area());
console.log(window.premter());

Constructor

let c = new Circle(10);
// console.log(c);
console.log(c instanceof Circle);
 
console.log(c.r);
console.log(c.area());
console.log(c.premter());

두 번째 유형 :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function Retangle(){
            var a = document.getElementById("a1").value;
            var b = document.getElementById("b1").value;
            alert("矩形面积："+a*b);
        }
    </script>
</head>
<body>
<form>
    长：<br>
    <input type="text" id="a1"><br>
    宽：<br>
    <input type="text" id="b1"><br>
    <button onclick="Retangle()" name="矩形面积" value="">计算面积</button>
    <input type="reset" name="reset" value="重置">
</form>
</body>
</html>

추천 학습: javascript 비디오 튜토리얼

위 내용은 자바스크립트에서 그래픽 영역을 찾는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript if 构造函数 math function this windows

성명：

이전 기사：자바스크립트가 HTML 콘텐츠를 변경하는 방법다음 기사：자바스크립트가 HTML 콘텐츠를 변경하는 방법