Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

codingfarm

<input> 태그의 값 읽기 - 물고기 움직이기 본문

web/JQuery

<input> 태그의 값 읽기 - 물고기 움직이기

scarecrow1992 2020. 10. 9. 23:59

입력받은 좌표대로 물고기를 움직이게하는 코드를 작성하시오

이때 x값은 0~500, y값은 0~300 의 범위를 가저야하며

이를 벗어날경우 "입력된 값이 너무 큽니다. 다시 입력해주세요" 라고 출력되어야 한다.

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <style>
        body {
            font-size: 9pt;
        }
        #panel {
            width: 600px;
            height: 400px;
            border: 1px solid #999;
            position: relative;
        }
        #fish {
            position: absolute;
            left: 50px;
            top: 120px;
        }
        #nav {
            text-align: center;
            width: 600px;
        }
    </style>
    <!--
    미션 03: 물고기 움직이기
    버튼을 누르면 x, y에 입력된 값만큼 물고기를 움직여주세요.
    단, x값이 0~500, y는 0~300이 넘는 값이 입력되면  "입력된 값이 너무 큽니다. 다시 입력해주세요."
    라고 출력해 주세요.
    팁!
       - 물고기를 움직이는 방법
            $fish.css({
                 left: x축 이동 위치 값,
                 top: y축 이동 위치 값
            });
        
        - 물고기 위치 입력 값 구하기
            x축 위치 값 = parseInt($("#txtX").val());
            y축 위치 값 = parseInt($("#txtY").val());
    -->
 
    <script type="text/javascript"  src="../../../libs/jquery-1.11.0.min.js"></script>
    <script>
        $(document).ready(function() {
 
            // 물고기 노드 구하기.
            var $fish = $("#fish");
 
            // 버튼에 클릭 이벤트 걸기.
            $("#btnStart").click(function() {
 
                // 1. 값 구하기
                var x = parseInt($("#txtX").val());
                var y = parseInt($("#txtY").val());
 
                // 여기에 소스를 입력해주세요.
                // 2. 비교.
                if ((x >= 0 && x <= 500) && y >= 0 && y <= 300) {
                    // 물고기 움직이기.
                    $fish.css({
                        left : x,
                        top : y
                    });
                } else {
                    alert("입력된 값이 너무 큽니다. 다시 입력해주세요.");
                }
            });
        })
 
    </script>
</head>
 
<body>
<div>
 
    <div id="panel">
 
        <img src="fish.png" id="fish">
    </div>
 
    <div id="nav">
        <label>x값 입력 : </label>
        <input id="txtX"></input>
        <br>
        <label>y값 입력 : </label>
        <input id="txtY">
        </input>
        <br>
        <button id="btnStart">
            물고기 움직이기
        </button>
 
    </div>
</div>
</body>
</html>
 
cs

 

 

 

 

저작자표시

'web > JQuery' 카테고리의 다른 글

.eq() - 이미지 배열하기  (0) 2020.10.11
switch, keydown- 물고기 움직이기  (0) 2020.10.11
addClass, removeClass - 체크박스 만들기  (0) 2020.10.11
사용법  (0) 2020.10.09
소개  (0) 2020.10.09
'web/JQuery' Related Articles more
Comments