티스토리 뷰

[JQUERY]자바스크립트

jQuery 041. 소수점 올림, 버림(절사), 반올림

가산동 2018. 12. 1. 22:44

아래는 예제입니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    
    <script>
        $(function(){       // jquery 시작
            /*
                소수점 올림, 버림(절사), 반올림 
            */
            
            
            //#buttionP 클릭이벤트
            $("#buttonP").click(function(){
                
                //test 숫자
                var num = 0;
                
                //소수점 올림
                num = 9.1;    
                var ceil = Math.ceil(num);
                $("#ceil").text(ceil);
                
                //소수점 절사
                num = 9.9
                var floor = Math.floor(num);
                $("#floor").text(floor);
                
                //소숫점 반올림
                num = 9.5
                var round = Math.round(num);
                $("#round").text(round);
                
                
            });
        });
    </script>
    
    <style>
        #buttonP{
            font-size: 30px;
            font-weight: bold;
            cursor: pointer;
        } 
    </style>
    
</head>
    <body>
        <p id="buttonP">클릭하면 위 예제의 결과를 확인 합니다.</p>
        <p>소수점 올림 ceil = <span id="ceil"></span></p>
        <p>소수점 버림(절사) floor = <span id="floor"></span></p>
        <p>소수점 반올림 round = <span id="round"></span></p>
    </body>
</html>
cs


아래는 예제 미리보기 입니다 클릭해보세요.


클릭하면 위 예제의 결과를 확인 합니다.

소수점 올림 ceil =

소수점 버림(절사) floor =

소수점 반올림 round =



예제를 라인별로 보겠습니다.


1
2
3
4
5
6
    <body>
        <p id="buttonP">클릭하면 위 예제의 결과를 확인 합니다.</p>
        <p>소수점 올림 ceil = <span id="ceil"></span></p>
        <p>소수점 버림(절사) floor = <span id="floor"></span></p>
        <p>소수점 반올림 round = <span id="round"></span></p>
    </body>
cs

먼저 body 를 위처럼 생성해줍니다. 예제의 결과를 출력할때 사용합니다.


14
15
            //#buttionP 클릭이벤트
            $("#buttonP").click(function(){                
cs

라인 15.    <p id="buttonP">에 클릭 이벤트를 생성합니다.


17
18
                //test 숫자
                var num = 0; 
cs

라인 18.    테스트에 사용할 var num을 생성합니다.


20
21
22
23
                //소수점 올림
                num = 9.1;    
                var ceil = Math.ceil(num);
                $("#ceil").text(ceil);
cs

라인 21.    var num을 9.1로 바꿉니다.

라인 22.    var ceil에 var num을 Math.ceil()을 사용해 소수점 위로 '올림'한 값을 넣어줍니다.

라인 23.    text() 를 활용해서 <span id="ceil">에 var ceil의 값을 넣어줍니다.


25
26
27
28
                //소수점 절사
                num = 9.9
                var floor = Math.floor(num);
                $("#floor").text(floor);
cs

라인 26.    var num을 9.9로 바꿉니다.

라인 27.    var floor에 var num을 Math.floor()을 사용해 소수점 아래로 '내림(절사)'한 값을 넣어줍니다.

라인 28.    text() 를 활용해서 <span id="floor">에 var floor의 값을 넣어줍니다. 


30
31
32
33
                //소숫점 반올림
                num = 9.5
                var round = Math.round(num);
                $("#round").text(round);
cs

라인 31.    var num을 9.9로 바꿉니다.

라인 32.    var round에 var num을 Math.floor()을 사용해 소수점 아래를 기준으로 

   '반올림'한 값을 넣어줍니다.

라인 33.    text() 를 활용해서 <span id="round">에 var round의 값을 넣어줍니다.  


#결과를 확인해보면, 

Math.ceil(num)은 소수점을 기준으로 올림한 값이기 때문에 10을 반환하고,

Math.floor(num)은 소수점을 기준으로 내림(절사)한 값이기 때문에 9를 반화하고,

Math.round(num)은 소수점을 기준으로 반올림한 값이기 때문에 10을 반환하는 것을 볼 수 있습니다.

저작자표시 비영리 변경금지

'[JQUERY]자바스크립트' 카테고리의 다른 글

jQuery 043. 반복문 while()  (0) 2018.12.03
jQuery 042. 난수(랜덤한 숫자) 생성, Math.random()  (0) 2018.12.02
jQuery 040. 반복문 for(), break  (0) 2018.11.24
jQuery 039. 반복문 for(), continue  (0) 2018.11.24
jQuery 038. llist[](배열)을 활용한 for()  (0) 2018.11.23
댓글