Showing
7 changed files
with
534 additions
and
549 deletions
1 | - | 1 | +body{ |
2 | -html, body{ | 2 | + background-image:url("metadata/image/home.png"); |
3 | - width: 100%; | 3 | + background-repeat: repeat-x; |
4 | - height: 100%; | ||
5 | - margin:0; | ||
6 | } | 4 | } |
5 | +#ent_frame{ | ||
6 | + width: 1600px; | ||
7 | + height: 900px; | ||
8 | + margin: auto; | ||
9 | +} | ||
10 | + | ||
7 | .line | 11 | .line |
8 | { | 12 | { |
9 | height: 40px; | 13 | height: 40px; |
... | @@ -45,7 +49,6 @@ html, body{ | ... | @@ -45,7 +49,6 @@ html, body{ |
45 | width: 100%; | 49 | width: 100%; |
46 | height: 45%; | 50 | height: 45%; |
47 | top:5%; | 51 | top:5%; |
48 | - background-color: skyblue; | ||
49 | } | 52 | } |
50 | 53 | ||
51 | #btn1 | 54 | #btn1 | ... | ... |
... | @@ -3,168 +3,179 @@ | ... | @@ -3,168 +3,179 @@ |
3 | <head> | 3 | <head> |
4 | <meta charset="utf-8"> | 4 | <meta charset="utf-8"> |
5 | <title>Home Page</title> | 5 | <title>Home Page</title> |
6 | - <link rel="stylesheet" type="text/css" href="main_home.css"/> | 6 | + <link rel="stylesheet" type="text/css" href="main_home.css" /> |
7 | </head> | 7 | </head> |
8 | + | ||
8 | <body> | 9 | <body> |
9 | <img id="logo" src="metadata/image/logo.png"> | 10 | <img id="logo" src="metadata/image/logo.png"> |
10 | - <A id="link" href= "https://kart.nexon.com/Main/Index.aspx" target="_blank">공식 홈페이지 바로가기</A> | 11 | + <A id="link" href="https://kart.nexon.com/Main/Index.aspx" target="_blank">공식 홈페이지 바로가기</A> |
11 | - <div id="select_div"> | 12 | + <div id="ent_frame"> |
12 | - <button id="btn1" onClick="location.href='test'"> <img src="metadata/image/btn1.png"><br><text id="test">성향 테스트</text></button> | 13 | + <div id="select_div"> |
13 | - <button id="btn2" onClick="location.href='search'"> <img src="metadata/image/btn2.png"><br><text id="search">전적 검색</text></button> | 14 | + <button id="btn1" onClick="location.href='test'"> <img src="metadata/image/btn1.png"> |
14 | - </div> | 15 | + <br><text id="test">성향 테스트</text></button> |
15 | - <div id="main_div"> | 16 | + <button id="btn2" onClick="location.href='search'"> <img src="metadata/image/btn2.png"> |
16 | - <div id="notice_div"> | 17 | + <br><text id="search">전적 검색</text></button> |
17 | - <img src="metadata/image/notice.PNG"> | ||
18 | - <table id="table"> | ||
19 | - <tr> | ||
20 | - <td class="line"> | ||
21 | - <a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135941" id="notice"> | ||
22 | - <img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" height="17" | ||
23 | - alt="공지"> 유령 배틀팀 등장 이벤트 당첨 라이더 안내</a> | ||
24 | - </td> | ||
25 | - </tr> | ||
26 | - <tr> | ||
27 | - <td class="line"> | ||
28 | - <a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135932" id="notice"> | ||
29 | - <img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" height="17" | ||
30 | - alt="공지"> 11/18(목) 같이하기 오류 수정을 위한 임시점검 안내</a> | ||
31 | - </td> | ||
32 | - </tr> | ||
33 | - <tr> | ||
34 | - <td class="line"> | ||
35 | - <a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135926" id="notice"> | ||
36 | - <img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" height="17" | ||
37 | - alt="공지"> 2021 카트라이더 리그 수퍼컵 승부예측 이벤트 보상 지급 안내</a> | ||
38 | - </td> | ||
39 | - </tr> | ||
40 | - <tr> | ||
41 | - <td class="line"> | ||
42 | - <a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135916" id="notice"> | ||
43 | - <img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" height="17" | ||
44 | - alt="공지"> (수정) 11/18(목) 넥슨 정기점검 안내</a> | ||
45 | - </td> | ||
46 | - </tr> | ||
47 | - <tr> | ||
48 | - <td class="line"> | ||
49 | - <a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135914" id="notice"> | ||
50 | - <img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" height="17" | ||
51 | - alt="공지"> 11/18(목) 보안센터 점검 및 U-OTP 서비스 종료 안내</a> | ||
52 | - </td> | ||
53 | - </tr> | ||
54 | - <tr> | ||
55 | - <td class="line"> | ||
56 | - <a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135908" id="notice"> | ||
57 | - <img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" height="17" | ||
58 | - alt="공지"> [수정] 11/15(월) 넥슨 전화 서비스 오류 안내</a> | ||
59 | - </td> | ||
60 | - </tr> | ||
61 | - <tr> | ||
62 | - <td class="line"> | ||
63 | - <a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135906" id="notice"> | ||
64 | - <img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" height="17" | ||
65 | - alt="공지"> 2021 신한은행 Hey Young 카트라이더 리그 수퍼컵 개막 안내</a> | ||
66 | - </td> | ||
67 | - </tr> | ||
68 | - <tr> | ||
69 | - <td class="line"> | ||
70 | - <a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135905" id="notice"> | ||
71 | - <img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" height="17" | ||
72 | - alt="공지"> 운영정책 위반 라이더 제재 안내</a> | ||
73 | - </td> | ||
74 | - </tr> | ||
75 | - </table> | ||
76 | </div> | 18 | </div> |
77 | - <div id="ranking_div"> | 19 | + <div id="main_div"> |
78 | - <img src="metadata/image/ranking.PNG"> | 20 | + <div id="notice_div"> |
79 | - <table id="table"> | 21 | + <img src="metadata/image/notice.png"> |
80 | - <tr> | 22 | + <table id="table"> |
81 | - <img src="metadata/image/menu.PNG"> | 23 | + <tr> |
82 | - </tr> | 24 | + <td class="line"> |
83 | - <tr> | 25 | + <a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135941" |
84 | - <td id="ranktd"><img src="metadata/image/rank1.png"></td> | 26 | + id="notice"> |
85 | - <td><a href="https://kart.nexon.com/Garage/Main?strRiderID=멋진샌박주장&maskGameCode_Group=73985" | 27 | + <img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" |
86 | - onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;" | 28 | + height="17" alt="공지"> 유령 배틀팀 등장 이벤트 당첨 라이더 안내</a> |
87 | - id="notice">멋진샌박주장</a></td> | 29 | + </td> |
88 | - <td>두두카클럽</td> | 30 | + </tr> |
89 | - <td>3331</td> | 31 | + <tr> |
90 | - </tr> | 32 | + <td class="line"> |
91 | - <tr> | 33 | + <a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135932" |
92 | - <td id="ranktd"><img src="metadata/image/rank2.png"></td> | 34 | + id="notice"> |
93 | - <td><a href="https://kart.nexon.com/Garage/Main?strRiderID=병수욤&maskGameCode_Group=73985" | 35 | + <img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" |
94 | - onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;" | 36 | + height="17" alt="공지"> 11/18(목) 같이하기 오류 수정을 위한 임시점검 안내</a> |
95 | - id="notice">병수욤</a></td> | 37 | + </td> |
96 | - <td>TeamAox</td> | 38 | + </tr> |
97 | - <td>3254</td> | 39 | + <tr> |
98 | - </tr> | 40 | + <td class="line"> |
99 | - <tr> | 41 | + <a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135926" |
100 | - <td id="ranktd"><img src="metadata/image/rank3.png"></td> | 42 | + id="notice"> |
101 | - <td><a href="https://kart.nexon.com/Garage/Main?strRiderID=쑹턔&maskGameCode_Group=73985" | 43 | + <img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" |
102 | - onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;" | 44 | + height="17" alt="공지"> 2021 카트라이더 리그 수퍼컵 승부예측 이벤트 보상 지급 안내</a> |
103 | - id="notice">쑹턔</a></td> | 45 | + </td> |
104 | - <td> </td> | 46 | + </tr> |
105 | - <td>3056</td> | 47 | + <tr> |
106 | - </tr> | 48 | + <td class="line"> |
107 | - <tr class="rline"> | 49 | + <a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135916" |
108 | - <td id="ranktd">4</td> | 50 | + id="notice"> |
109 | - <td><a href="https://kart.nexon.com/Garage/Main?strRiderID=현수쿨쿨&maskGameCode_Group=73985" | 51 | + <img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" |
110 | - onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;" | 52 | + height="17" alt="공지"> (수정) 11/18(목) 넥슨 정기점검 안내</a> |
111 | - id="notice">현수쿨쿨</a></td> | 53 | + </td> |
112 | - <td>Blossom</td> | 54 | + </tr> |
113 | - <td>3001</td> | 55 | + <tr> |
114 | - </tr> | 56 | + <td class="line"> |
115 | - <tr class="rline"> | 57 | + <a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135914" |
116 | - <td id="ranktd">5</td> | 58 | + id="notice"> |
117 | - <td><a href="https://kart.nexon.com/Garage/Main?strRiderID=지쵸민파&maskGameCode_Group=73985" | 59 | + <img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" |
118 | - onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;" | 60 | + height="17" alt="공지"> 11/18(목) 보안센터 점검 및 U-OTP 서비스 종료 안내</a> |
119 | - id="notice">지쵸민파</a></td> | 61 | + </td> |
120 | - <td>FreeSky</td> | 62 | + </tr> |
121 | - <td>2934</td> | 63 | + <tr> |
122 | - </tr> | 64 | + <td class="line"> |
123 | - <tr class="rline"> | 65 | + <a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135908" |
124 | - <td id="ranktd">6</td> | 66 | + id="notice"> |
125 | - <td><a href="https://kart.nexon.com/Garage/Main?strRiderID=AF노준현&maskGameCode_Group=73985" | 67 | + <img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" |
126 | - onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;" | 68 | + height="17" alt="공지"> [수정] 11/15(월) 넥슨 전화 서비스 오류 안내</a> |
127 | - id="notice">AF노준현</a></td> | 69 | + </td> |
128 | - <td>두두카클럽</td> | 70 | + </tr> |
129 | - <td>2918</td> | 71 | + <tr> |
130 | - </tr> | 72 | + <td class="line"> |
131 | - <tr class="rline"> | 73 | + <a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135906" |
132 | - <td id="ranktd">7</td> | 74 | + id="notice"> |
133 | - <td><a href="https://kart.nexon.com/Garage/Main?strRiderID=챵현&maskGameCode_Group=73985" | 75 | + <img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" |
134 | - onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;" | 76 | + height="17" alt="공지"> 2021 신한은행 Hey Young 카트라이더 리그 수퍼컵 개막 안내</a> |
135 | - id="notice">챵현</a></td> | 77 | + </td> |
136 | - <td>OneQ</td> | 78 | + </tr> |
137 | - <td>2913</td> | 79 | + <tr> |
138 | - </tr> | 80 | + <td class="line"> |
139 | - <tr class="rline"> | 81 | + <a href="https://kart.nexon.com:443/Kart/News/Notice/view.aspx?noticearticlesn=135905" |
140 | - <td id="ranktd">8</td> | 82 | + id="notice"> |
141 | - <td><a href="https://kart.nexon.com/Garage/Main?strRiderID=다함께갑시다&maskGameCode_Group=73985" | 83 | + <img src="https://ssl.nexon.com/s2/game/kart/v2/community/ico_notice.gif" width="30" |
142 | - onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;" | 84 | + height="17" alt="공지"> 운영정책 위반 라이더 제재 안내</a> |
143 | - id="notice">다함께갑시다</a></td> | 85 | + </td> |
144 | - <td> </td> | 86 | + </tr> |
145 | - <td>2904</td> | 87 | + </table> |
146 | - </tr> | 88 | + </div> |
147 | - <tr class="rline"> | 89 | + <div id="ranking_div"> |
148 | - <td id="ranktd">9</td> | 90 | + <img src="metadata/image/ranking.png"> |
149 | - <td><a href="https://kart.nexon.com/Garage/Main?strRiderID=AttackXiaoGu&maskGameCode_Group=73985" | 91 | + <table id="table"> |
150 | - onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;" | 92 | + <tr> |
151 | - id="notice">AttackXiaoGu</a></td> | 93 | + <img src="metadata/image/menu.png"> |
152 | - <td>TCCstar</td> | 94 | + </tr> |
153 | - <td>2903</td> | 95 | + <tr> |
154 | - </tr> | 96 | + <td id="ranktd"><img src="metadata/image/rank1.png"></td> |
155 | - <tr class="rline"> | 97 | + <td><a href="https://kart.nexon.com/Garage/Main?strRiderID=멋진샌박주장&maskGameCode_Group=73985" |
156 | - <td id="ranktd">10</td> | 98 | + onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;" |
157 | - <td><a href="https://kart.nexon.com/Garage/Main?strRiderID=재혁Zzz&maskGameCode_Group=73985" | 99 | + id="notice">멋진샌박주장</a></td> |
158 | - onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;" | 100 | + <td>두두카클럽</td> |
159 | - id="notice">재혁Zzz</a></td> | 101 | + <td>3331</td> |
160 | - <td>두두카클럽</td> | 102 | + </tr> |
161 | - <td>2901</td> | 103 | + <tr> |
162 | - </tr> | 104 | + <td id="ranktd"><img src="metadata/image/rank2.png"></td> |
163 | - </table> | 105 | + <td><a href="https://kart.nexon.com/Garage/Main?strRiderID=병수욤&maskGameCode_Group=73985" |
106 | + onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;" | ||
107 | + id="notice">병수욤</a></td> | ||
108 | + <td>TeamAox</td> | ||
109 | + <td>3254</td> | ||
110 | + </tr> | ||
111 | + <tr> | ||
112 | + <td id="ranktd"><img src="metadata/image/rank3.png"></td> | ||
113 | + <td><a href="https://kart.nexon.com/Garage/Main?strRiderID=쑹턔&maskGameCode_Group=73985" | ||
114 | + onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;" | ||
115 | + id="notice">쑹턔</a></td> | ||
116 | + <td> </td> | ||
117 | + <td>3056</td> | ||
118 | + </tr> | ||
119 | + <tr class="rline"> | ||
120 | + <td id="ranktd">4</td> | ||
121 | + <td><a href="https://kart.nexon.com/Garage/Main?strRiderID=현수쿨쿨&maskGameCode_Group=73985" | ||
122 | + onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;" | ||
123 | + id="notice">현수쿨쿨</a></td> | ||
124 | + <td>Blossom</td> | ||
125 | + <td>3001</td> | ||
126 | + </tr> | ||
127 | + <tr class="rline"> | ||
128 | + <td id="ranktd">5</td> | ||
129 | + <td><a href="https://kart.nexon.com/Garage/Main?strRiderID=지쵸민파&maskGameCode_Group=73985" | ||
130 | + onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;" | ||
131 | + id="notice">지쵸민파</a></td> | ||
132 | + <td>FreeSky</td> | ||
133 | + <td>2934</td> | ||
134 | + </tr> | ||
135 | + <tr class="rline"> | ||
136 | + <td id="ranktd">6</td> | ||
137 | + <td><a href="https://kart.nexon.com/Garage/Main?strRiderID=AF노준현&maskGameCode_Group=73985" | ||
138 | + onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;" | ||
139 | + id="notice">AF노준현</a></td> | ||
140 | + <td>두두카클럽</td> | ||
141 | + <td>2918</td> | ||
142 | + </tr> | ||
143 | + <tr class="rline"> | ||
144 | + <td id="ranktd">7</td> | ||
145 | + <td><a href="https://kart.nexon.com/Garage/Main?strRiderID=챵현&maskGameCode_Group=73985" | ||
146 | + onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;" | ||
147 | + id="notice">챵현</a></td> | ||
148 | + <td>OneQ</td> | ||
149 | + <td>2913</td> | ||
150 | + </tr> | ||
151 | + <tr class="rline"> | ||
152 | + <td id="ranktd">8</td> | ||
153 | + <td><a href="https://kart.nexon.com/Garage/Main?strRiderID=다함께갑시다&maskGameCode_Group=73985" | ||
154 | + onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;" | ||
155 | + id="notice">다함께갑시다</a></td> | ||
156 | + <td> </td> | ||
157 | + <td>2904</td> | ||
158 | + </tr> | ||
159 | + <tr class="rline"> | ||
160 | + <td id="ranktd">9</td> | ||
161 | + <td><a href="https://kart.nexon.com/Garage/Main?strRiderID=AttackXiaoGu&maskGameCode_Group=73985" | ||
162 | + onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;" | ||
163 | + id="notice">AttackXiaoGu</a></td> | ||
164 | + <td>TCCstar</td> | ||
165 | + <td>2903</td> | ||
166 | + </tr> | ||
167 | + <tr class="rline"> | ||
168 | + <td id="ranktd">10</td> | ||
169 | + <td><a href="https://kart.nexon.com/Garage/Main?strRiderID=재혁Zzz&maskGameCode_Group=73985" | ||
170 | + onclick="window.open(this.href,'','width=700, height=600, scrollbars=yes'); return false;" | ||
171 | + id="notice">재혁Zzz</a></td> | ||
172 | + <td>두두카클럽</td> | ||
173 | + <td>2901</td> | ||
174 | + </tr> | ||
175 | + </table> | ||
176 | + </div> | ||
164 | </div> | 177 | </div> |
165 | </div> | 178 | </div> |
166 | - | ||
167 | </body> | 179 | </body> |
168 | 180 | ||
169 | - | ||
170 | </html> | 181 | </html> |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -2,34 +2,38 @@ body | ... | @@ -2,34 +2,38 @@ body |
2 | { | 2 | { |
3 | background:rgb(26, 154, 248); | 3 | background:rgb(26, 154, 248); |
4 | } | 4 | } |
5 | +#main_frame | ||
6 | +{ | ||
7 | + width:1600px; | ||
8 | + height:900px; | ||
9 | + margin: auto; | ||
10 | +} | ||
5 | .search | 11 | .search |
6 | { | 12 | { |
7 | - position:absolute; | 13 | + position:relative; |
8 | width: 700px; | 14 | width: 700px; |
9 | height:100px; | 15 | height:100px; |
10 | - top:33%; | 16 | + top:-15%; |
11 | - left:50%; | 17 | + margin:auto; |
12 | background:white; | 18 | background:white; |
13 | border-radius: 50px; | 19 | border-radius: 50px; |
14 | - margin:-50px 0px 0px -350px; | 20 | + border:4px solid black; |
15 | - border:3px solid black; | ||
16 | } | 21 | } |
17 | #left | 22 | #left |
18 | { | 23 | { |
19 | - position:absolute; | 24 | + position:relative; |
20 | - width:500px; | 25 | + width:400px; |
21 | - height:500px; | 26 | + height:400px; |
22 | - top:40%; | 27 | + top:45%; |
23 | - left:5%; | ||
24 | 28 | ||
25 | } | 29 | } |
26 | #right | 30 | #right |
27 | { | 31 | { |
28 | - position:absolute; | 32 | + position:relative; |
29 | - width:550px; | 33 | + width:450px; |
30 | - height:500px; | 34 | + height:400px; |
31 | - top:40%; | 35 | + top:45%; |
32 | - left:65%; | 36 | + left:45%; |
33 | } | 37 | } |
34 | .box { | 38 | .box { |
35 | animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; | 39 | animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; | ... | ... |
1 | <html> | 1 | <html> |
2 | - <head> | 2 | + |
3 | - <title>전적 검색</title> | 3 | +<head> |
4 | - <meta charset="utf-8"> | 4 | + <title>전적 검색</title> |
5 | - <!-- 제이쿼리 불러오기 --> | 5 | + <meta charset="utf-8"> |
6 | - <!--<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>--> | 6 | + <link rel="stylesheet" type="text/css" href="search_home.css" /> |
7 | - <link rel="stylesheet" type="text/css" href="search_home.css" /> | 7 | + <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> |
8 | - <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> | 8 | + <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> |
9 | - <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> | 9 | +</head> |
10 | - | 10 | + |
11 | - </head> | 11 | +<body> |
12 | - <body> | 12 | + <div id="main_frame"> |
13 | <img class="box" id="left" src="metadata/image/wodi.png"> | 13 | <img class="box" id="left" src="metadata/image/wodi.png"> |
14 | <img class="box2" id="right" src="metadata/image/sdao.png"> | 14 | <img class="box2" id="right" src="metadata/image/sdao.png"> |
15 | <div class="search" id="a"> | 15 | <div class="search" id="a"> |
16 | <input type="text" id="name" placeholder="카트라이더 닉네임 입력" /> | 16 | <input type="text" id="name" placeholder="카트라이더 닉네임 입력" /> |
17 | <button id="OK"></button> | 17 | <button id="OK"></button> |
18 | </div> | 18 | </div> |
19 | - <script> | 19 | + </div> |
20 | - $("#OK").click(function(){ // OK 버튼 클릭하면 | 20 | +</body> |
21 | - $.ajax({ | 21 | + |
22 | - url: '/search', // postTest 주소로 | 22 | +<script> |
23 | - async: true, // 동기화 - 서버에서 반응이 올때까지 기다림 | 23 | + $("#OK").click(function () { |
24 | - type: 'POST', // POST 방식으로 | 24 | + $.ajax({ |
25 | - data: { | 25 | + url: '/search', |
26 | - test: $("#name").val() // 텍스트필드에 입력한 값을 test라는 이름으로 보냄 | 26 | + async: true, |
27 | - }, | 27 | + type: 'POST', |
28 | - dataType: 'json', | 28 | + data: { |
29 | - success: function(data){ | 29 | + test: $("#name").val() |
30 | - if(data=="200"){ | 30 | + }, |
31 | - const div_target=document.querySelector('#a'); | 31 | + dataType: 'json', |
32 | - var obj=document.createElement('img'); | 32 | + success: function (data) { |
33 | - obj.id="loading"; | 33 | + if (data == "200") { |
34 | - obj.src='metadata/image/loading.gif'; | 34 | + const div_target = document.querySelector('#a'); |
35 | - div_target.append(obj); | 35 | + var obj = document.createElement('img'); |
36 | - window.location.href="/search/result"; | 36 | + obj.id = "loading"; |
37 | - } | 37 | + obj.src = 'metadata/image/loading.gif'; |
38 | - else{ | 38 | + div_target.append(obj); |
39 | - swal("ERROR", "존재하지 않는 닉네임입니다."); | 39 | + window.location.href = "/search/result"; |
40 | - } | 40 | + } |
41 | - } | 41 | + else { |
42 | - }); | 42 | + swal("ERROR", "존재하지 않는 닉네임입니다."); |
43 | - }); | 43 | + } |
44 | - </script> | 44 | + } |
45 | - </body> | 45 | + }); |
46 | + }); | ||
47 | +</script> | ||
48 | + | ||
46 | </html> | 49 | </html> |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
1 | body{ | 1 | body{ |
2 | background:rgb(240, 239, 239) | 2 | background:rgb(240, 239, 239) |
3 | } | 3 | } |
4 | -#div | 4 | +#main_frame |
5 | +{ | ||
6 | + width: 1600px; | ||
7 | + height: 1000px; | ||
8 | + margin:auto; | ||
9 | +} | ||
10 | +#most | ||
5 | { | 11 | { |
6 | position: relative; | 12 | position: relative; |
7 | - width: 1200px; | 13 | + width: 400px; |
8 | - height: 200px; | 14 | + height: 800px; |
9 | - left:50%; | 15 | + left:6%; |
10 | - margin:0px 0px 0px -600px; | ||
11 | float:left; | 16 | float:left; |
12 | } | 17 | } |
13 | #emblem | 18 | #emblem |
... | @@ -27,51 +32,34 @@ body{ | ... | @@ -27,51 +32,34 @@ body{ |
27 | top:4%; | 32 | top:4%; |
28 | left:3%; | 33 | left:3%; |
29 | } | 34 | } |
30 | -#s_home | 35 | +#nick |
31 | -{ | ||
32 | - position:relative; | ||
33 | - width:100%; | ||
34 | -} | ||
35 | -#title | ||
36 | { | 36 | { |
37 | font-family: 'Nanum Gothic'; | 37 | font-family: 'Nanum Gothic'; |
38 | - font-size:large; | 38 | + font-size:35px; |
39 | font-weight:bold; | 39 | font-weight:bold; |
40 | } | 40 | } |
41 | -#resu | 41 | + |
42 | -{ | 42 | +#record |
43 | - position: relative; | ||
44 | - width: 1700px; | ||
45 | - height: 1100px; | ||
46 | - margin: 0 auto; | ||
47 | - top:250px; | ||
48 | -} | ||
49 | -#most | ||
50 | { | 43 | { |
51 | position: relative; | 44 | position: relative; |
52 | - width: 400px; | 45 | + width: 55%; |
53 | - height: 800px; | 46 | + height: 900px; |
54 | - left:6%; | 47 | + left:10%; |
55 | float:left; | 48 | float:left; |
56 | } | 49 | } |
57 | -#imgId | 50 | + |
51 | +#s_home | ||
58 | { | 52 | { |
59 | - vertical-align: middle; | 53 | + position:relative; |
54 | + width:100%; | ||
60 | } | 55 | } |
61 | -#nick | 56 | +#title |
62 | { | 57 | { |
63 | font-family: 'Nanum Gothic'; | 58 | font-family: 'Nanum Gothic'; |
64 | - font-size:35px; | 59 | + font-size:large; |
65 | font-weight:bold; | 60 | font-weight:bold; |
66 | } | 61 | } |
67 | -#div1 | 62 | + |
68 | -{ | ||
69 | - position: relative; | ||
70 | - width: 50%; | ||
71 | - height: 900px; | ||
72 | - left:10%; | ||
73 | - float:left; | ||
74 | -} | ||
75 | 63 | ||
76 | #IMG | 64 | #IMG |
77 | { | 65 | { |
... | @@ -93,18 +81,7 @@ body{ | ... | @@ -93,18 +81,7 @@ body{ |
93 | width:80px; | 81 | width:80px; |
94 | height:60px; | 82 | height:60px; |
95 | } | 83 | } |
96 | -#IMG4 | 84 | + |
97 | -{ | ||
98 | - width:80px; | ||
99 | - height:60px; | ||
100 | -} | ||
101 | -#img3 | ||
102 | -{ | ||
103 | - position: relative; | ||
104 | - width: 100%; | ||
105 | - height:100%; | ||
106 | - float:left; | ||
107 | -} | ||
108 | 85 | ||
109 | #table | 86 | #table |
110 | { | 87 | { | ... | ... |
... | @@ -3,64 +3,69 @@ | ... | @@ -3,64 +3,69 @@ |
3 | 3 | ||
4 | <head> | 4 | <head> |
5 | <meta charset="utf-8"> | 5 | <meta charset="utf-8"> |
6 | + <title>전적 결과</title> | ||
6 | <link rel="stylesheet" type="text/css" href="search_result.css" /> | 7 | <link rel="stylesheet" type="text/css" href="search_result.css" /> |
7 | <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> | 8 | <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> |
8 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | 9 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
9 | </head> | 10 | </head> |
10 | <script language="JavaScript"> | 11 | <script language="JavaScript"> |
11 | - function embl(){ | 12 | + function embl() { |
12 | - var rand=Math.floor(Math.random()*8+1); | 13 | + var rand = Math.floor(Math.random() * 8 + 1); |
13 | - return "background-image:url('metadata/emblem/emblem"+rand+".png')"; | 14 | + return "background-image:url('metadata/emblem/emblem" + rand + ".png')"; |
15 | + } | ||
16 | + function get_jsondata(id, kind) { | ||
17 | + var str; | ||
18 | + var local_url = 'metadata/' + kind + '.json'; | ||
19 | + function save(data) { | ||
20 | + str = data; | ||
14 | } | 21 | } |
15 | - function get_jsondata(id, kind){ | 22 | + $.ajaxSetup({ |
16 | - var str; | 23 | + async: false |
17 | - var local_url='metadata/'+kind+'.json'; | 24 | + }); |
18 | - function save(data){ | 25 | + $.getJSON(local_url, function (json) { |
19 | - str=data; | 26 | + var kind_json; |
27 | + if (kind == "kart") { | ||
28 | + kind_json = json.kart; | ||
20 | } | 29 | } |
21 | - $.ajaxSetup({ | 30 | + else if (kind == "track") { |
22 | - async: false | 31 | + kind_json = json.track; |
23 | - }); | 32 | + } |
24 | - $.getJSON(local_url,function(json){ | 33 | + else if (kind == "character") { |
25 | - var kind_json; | 34 | + kind_json = json.character; |
26 | - if(kind=="kart"){ | 35 | + } |
27 | - kind_json=json.kart; | 36 | + for (var i = 0; i < kind_json.length; i++) { |
28 | - } | 37 | + if (kind_json[i]['id'] == id) { |
29 | - else if(kind=="track"){ | 38 | + save(kind_json[i]['name']); |
30 | - kind_json=json.track; | 39 | + break; |
31 | - } | ||
32 | - else if(kind=="character"){ | ||
33 | - kind_json=json.character; | ||
34 | - } | ||
35 | - for (var i = 0; i < kind_json.length; i++) { | ||
36 | - if (kind_json[i]['id'] == id) { | ||
37 | - save(kind_json[i]['name']); | ||
38 | - break; | ||
39 | - } | ||
40 | } | 40 | } |
41 | - }); | 41 | + } |
42 | - return str; | 42 | + }); |
43 | - } | 43 | + return str; |
44 | + } | ||
44 | </script> | 45 | </script> |
46 | + | ||
45 | <body> | 47 | <body> |
48 | + <div id="main_frame"> | ||
46 | <div id="most"> | 49 | <div id="most"> |
47 | <div id="emblem"> | 50 | <div id="emblem"> |
48 | <script>document.getElementById("emblem").style = embl()</script> | 51 | <script>document.getElementById("emblem").style = embl()</script> |
49 | </div> | 52 | </div> |
50 | <div id="name"> | 53 | <div id="name"> |
51 | - <text id="nick"> <%- name %> </text> | 54 | + <text id="nick"> |
55 | + <%- name %> | ||
56 | + </text> | ||
52 | </div> | 57 | </div> |
53 | <text id="title"><br>SAVE</text> | 58 | <text id="title"><br>SAVE</text> |
54 | - <canvas id="myChart2"width="350" height="200"></canvas> | 59 | + <canvas id="myChart2" width="350" height="200"></canvas> |
55 | <text id="title"><br>RANKING GRAPE</text> | 60 | <text id="title"><br>RANKING GRAPE</text> |
56 | - <canvas id="myChart"width="350" height="200"></canvas> | 61 | + <canvas id="myChart" width="350" height="200"></canvas> |
57 | <text id="title"><br>MOST KART</text> | 62 | <text id="title"><br>MOST KART</text> |
58 | <table id="table_most" border="1" style="text-align: center;"> | 63 | <table id="table_most" border="1" style="text-align: center;"> |
59 | <colgroup> | 64 | <colgroup> |
60 | - <col width="10%"/> | 65 | + <col width="10%" /> |
61 | - <col width="30%"/> | 66 | + <col width="30%" /> |
62 | - <col width="10%"/> | 67 | + <col width="10%" /> |
63 | - <col width="10%"/> | 68 | + <col width="10%" /> |
64 | </colgroup> | 69 | </colgroup> |
65 | <tr> | 70 | <tr> |
66 | <td>카트</td> | 71 | <td>카트</td> |
... | @@ -71,276 +76,258 @@ | ... | @@ -71,276 +76,258 @@ |
71 | </table> | 76 | </table> |
72 | </div> | 77 | </div> |
73 | 78 | ||
74 | - <div id="div1"> | 79 | + <div id="record"> |
75 | <img id="s_home" src="metadata/image/search_image.png"> | 80 | <img id="s_home" src="metadata/image/search_image.png"> |
76 | <table id="table"> | 81 | <table id="table"> |
77 | <colgroup> | 82 | <colgroup> |
78 | - <col width="100px"/> | 83 | + <col width="100px" /> |
79 | - <col width="100px"/> | 84 | + <col width="100px" /> |
80 | - <col width="150px"/> | 85 | + <col width="150px" /> |
81 | - <col width="200px"/> | 86 | + <col width="200px" /> |
82 | - <col width="100px"/> | 87 | + <col width="100px" /> |
83 | - <col width="100px"/> | 88 | + <col width="100px" /> |
84 | </colgroup> | 89 | </colgroup> |
85 | </table> | 90 | </table> |
86 | </div> | 91 | </div> |
92 | + </div> | ||
87 | </body> | 93 | </body> |
88 | 94 | ||
89 | <script> | 95 | <script> |
90 | - var body = '<%- body -%>'; | 96 | + //////////////전적 검색 후 결과 출력 스크립트///////////////////////////////////////////////////// |
91 | - var most_kart=[]; | 97 | + var body = '<%- body -%>'; |
92 | - var rank_grape=[]; | 98 | + var most_kart = []; |
93 | - var retire=0; | 99 | + var rank_grape = []; |
94 | - var match = JSON.parse(body); | 100 | + var retire = 0; |
95 | - var Len = match.matches[0].matches.length; | 101 | + var match = JSON.parse(body); |
96 | - const div_target=document.querySelector('#table'); | 102 | + var Len = match.matches[0].matches.length; |
97 | - for(var i=1; i<=Len; i++){ | 103 | + const div_target = document.querySelector('#table'); |
98 | - var obj=document.createElement('tr'); | 104 | + for (var i = 1; i <= Len; i++) { |
99 | - obj.id="table_row"; | 105 | + var obj = document.createElement('tr'); |
100 | - var win = match.matches[0].matches[i-1].player.matchWin; | 106 | + obj.id = "table_row"; |
101 | - var tId = match.matches[0].matches[i-1].trackId; | 107 | + var win = match.matches[0].matches[i - 1].player.matchWin; |
102 | - var character=match.matches[0].matches[i-1].character; | 108 | + var tId = match.matches[0].matches[i - 1].trackId; |
103 | - var kartId = match.matches[0].matches[i-1].player.kart; | 109 | + var character = match.matches[0].matches[i - 1].character; |
104 | - most_kart.push(kartId); | 110 | + var kartId = match.matches[0].matches[i - 1].player.kart; |
105 | - var mrank = match.matches[0].matches[i-1].player.matchRank; | 111 | + most_kart.push(kartId); |
106 | - var players = match.matches[0].matches[i-1].playerCount; | 112 | + var mrank = match.matches[0].matches[i - 1].player.matchRank; |
107 | - var stime = new Date(match.matches[0].matches[i-1].startTime.split('T')[0] + " " + match.matches[0].matches[i-1].startTime.split('T')[1]); | 113 | + var players = match.matches[0].matches[i - 1].playerCount; |
108 | - var etime = new Date(match.matches[0].matches[i-1].endTime.split('T')[0] + " " + match.matches[0].matches[i-1].endTime.split('T')[1]); | 114 | + var stime = new Date(match.matches[0].matches[i - 1].startTime.split('T')[0] + " " + match.matches[0].matches[i - 1].startTime.split('T')[1]); |
109 | - var diff = etime - stime | 115 | + var etime = new Date(match.matches[0].matches[i - 1].endTime.split('T')[0] + " " + match.matches[0].matches[i - 1].endTime.split('T')[1]); |
110 | - var minute = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); | 116 | + var diff = etime - stime |
111 | - if(minute<10) | 117 | + var minute = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); |
112 | - minute='0'+minute; | 118 | + if (minute < 10) |
113 | - var second = Math.floor((diff % (1000 * 60)) / 1000); | 119 | + minute = '0' + minute; |
114 | - if(second<10) | 120 | + var second = Math.floor((diff % (1000 * 60)) / 1000); |
115 | - second='0'+second; | 121 | + if (second < 10) |
116 | - var ranking = mrank + "/" + players | 122 | + second = '0' + second; |
117 | - var diff_time=minute + " : " + second; | 123 | + var ranking = mrank + "/" + players |
118 | - var now_time=new Date(); | 124 | + var diff_time = minute + " : " + second; |
119 | - var diff_day=Math.ceil((now_time-etime) / (1000*60*60*24))-1+"일 전"; | 125 | + var now_time = new Date(); |
120 | - | 126 | + var diff_day = Math.ceil((now_time - etime) / (1000 * 60 * 60 * 24)) - 1 + "일 전"; |
121 | - if(win=="0"){ | 127 | + |
122 | - win="패"; | 128 | + if (win == "0") { |
123 | - obj.style="background: white"; | 129 | + win = "패"; |
130 | + obj.style = "background: white"; | ||
131 | + } | ||
132 | + else if (win == "1") { | ||
133 | + win = "승"; | ||
134 | + | ||
135 | + obj.style = "background: rgb(163,207,236)"; | ||
136 | + } | ||
137 | + else { | ||
138 | + win = "탈주" | ||
139 | + } | ||
140 | + | ||
141 | + if (mrank == "99" || win == "탈주") { | ||
142 | + ranking = "retire"; | ||
143 | + retire += 1; | ||
144 | + diff_time = "retire"; | ||
145 | + obj.style = "background: rgb(226,182,179)"; | ||
146 | + rank_grape.push(8); | ||
147 | + } | ||
148 | + else { | ||
149 | + rank_grape.push(parseInt(mrank)); | ||
150 | + } | ||
151 | + | ||
152 | + if (diff_day == "0일 전") { | ||
153 | + diff_day = Math.ceil((now_time - etime) / 1000 / 60 / 60) - 1; | ||
154 | + diff_day += "시간 전" | ||
155 | + } | ||
156 | + | ||
157 | + div_target.append(obj); | ||
158 | + var arr = ["개인전", "#" + ranking, kartId, tId, character, diff_time, ranking]; | ||
159 | + for (var j = 1; j <= 6; j++) { | ||
160 | + var sobj = document.createElement('td'); | ||
161 | + if (j == 1) { | ||
162 | + var tet1 = document.createElement('text'); | ||
163 | + var tet2 = document.createElement('text'); | ||
164 | + var br = document.createElement('br'); | ||
165 | + tet1.innerText = arr[j - 1]; | ||
166 | + tet2.innerText = diff_day; | ||
167 | + sobj.append(tet1); | ||
168 | + sobj.append(br); | ||
169 | + sobj.append(tet2); | ||
124 | } | 170 | } |
125 | - else if (win =="1"){ | 171 | + else if (j == 2) { |
126 | - win="승"; | 172 | + var tet1 = document.createElement('text'); |
127 | - | 173 | + tet1.innerText = arr[j - 1]; |
128 | - obj.style="background: rgb(163,207,236)"; | 174 | + tet1.id = "text_ranking"; |
175 | + sobj.append(tet1); | ||
129 | } | 176 | } |
130 | - else{ | 177 | + else if (j == 3) { |
131 | - win="탈주" | 178 | + var img = document.createElement('img'); |
179 | + var tet1 = document.createElement('text'); | ||
180 | + var str = get_jsondata(arr[j - 1], "kart"); | ||
181 | + var br = document.createElement('br'); | ||
182 | + img.id = "IMG"; | ||
183 | + if (str == null) { | ||
184 | + tet1.innerText = "조회 불가능" | ||
185 | + img.src = "metadata/image/empty.png"; | ||
186 | + } | ||
187 | + else { | ||
188 | + tet1.innerText = str; | ||
189 | + img.src = "metadata/kart/" + arr[j - 1] + ".png"; | ||
190 | + } | ||
191 | + sobj.append(img); | ||
192 | + sobj.append(br); | ||
193 | + sobj.append(tet1); | ||
132 | } | 194 | } |
133 | - | 195 | + else if (j == 4) { |
134 | - if (mrank == "99" || win=="탈주") { | 196 | + var img = document.createElement('img'); |
135 | - ranking = "retire"; | 197 | + var tet1 = document.createElement('text'); |
136 | - retire+=1; | 198 | + var str = get_jsondata(arr[j - 1], "track"); |
137 | - diff_time = "retire"; | 199 | + tet1.id = "IMG2_TEXT"; |
138 | - obj.style="background: rgb(226,182,179)"; | 200 | + var br = document.createElement('br'); |
139 | - rank_grape.push(8); | 201 | + img.id = "IMG2"; |
202 | + if (str == null || str[1] == 'r') { | ||
203 | + tet1.innerText = "조회 불가능" | ||
204 | + img.src = "metadata/image/empty.png"; | ||
205 | + } | ||
206 | + else { | ||
207 | + tet1.innerText = str; | ||
208 | + img.src = "metadata/track/" + arr[j - 1] + ".png"; | ||
209 | + } | ||
210 | + sobj.append(img); | ||
211 | + sobj.append(br); | ||
212 | + sobj.append(tet1); | ||
140 | } | 213 | } |
141 | - else{ | 214 | + else if (j == 5) { |
142 | - rank_grape.push(parseInt(mrank)); | 215 | + var img = document.createElement('img'); |
216 | + var str = get_jsondata(arr[j - 1], "character"); | ||
217 | + var tet1 = document.createElement('text'); | ||
218 | + var br = document.createElement('br'); | ||
219 | + img.id = "IMG3"; | ||
220 | + img.src = "metadata/character/" + arr[j - 1] + ".png"; | ||
221 | + tet1.innerText = str; | ||
222 | + sobj.append(img); | ||
223 | + sobj.append(br); | ||
224 | + sobj.append(tet1); | ||
143 | } | 225 | } |
144 | - | 226 | + else { |
145 | - if(diff_day=="0일 전"){ | 227 | + sobj.innerText = arr[j - 1]; |
146 | - diff_day=Math.ceil((now_time-etime)/1000/60/60)-1; | ||
147 | - diff_day+="시간 전" | ||
148 | } | 228 | } |
229 | + obj.append(sobj); | ||
230 | + } | ||
231 | + } | ||
149 | 232 | ||
150 | - div_target.append(obj); | 233 | + /////////////가장 많이 사용한 카트, 그래프 등의 표시 부분///////////////////////// |
151 | - var arr=["개인전","#"+ranking,kartId,tId,character,diff_time,ranking]; | 234 | + var count = []; |
152 | - for(var j=1; j<=6; j++){ | 235 | + for (var i = 0; i < Len; i++) { |
153 | - var sobj=document.createElement('td'); | 236 | + var item = most_kart[i]; |
154 | - if(j==1){ | 237 | + count[i] = 0; |
155 | - var tet1=document.createElement('text'); | 238 | + for (var j = 0; j < Len; j++) { |
156 | - var tet2=document.createElement('text'); | 239 | + if (item == most_kart[j]) { |
157 | - var br=document.createElement('br'); | 240 | + count[i] += 1; |
158 | - tet1.innerText=arr[j-1]; | ||
159 | - tet2.innerText=diff_day; | ||
160 | - sobj.append(tet1); | ||
161 | - sobj.append(br); | ||
162 | - sobj.append(tet2); | ||
163 | - } | ||
164 | - else if(j==2){ | ||
165 | - var tet1=document.createElement('text'); | ||
166 | - tet1.innerText=arr[j-1]; | ||
167 | - tet1.id="text_ranking"; | ||
168 | - sobj.append(tet1); | ||
169 | - } | ||
170 | - else if(j==3){ | ||
171 | - var img=document.createElement('img'); | ||
172 | - var tet1=document.createElement('text'); | ||
173 | - var str=get_jsondata(arr[j-1],"kart"); | ||
174 | - var br=document.createElement('br'); | ||
175 | - img.id="IMG"; | ||
176 | - if(str==null){ | ||
177 | - tet1.innerText="조회 불가능" | ||
178 | - img.src="metadata/image/empty.png"; | ||
179 | - } | ||
180 | - else{ | ||
181 | - tet1.innerText=str; | ||
182 | - img.src="metadata/kart/"+arr[j-1]+".png"; | ||
183 | - } | ||
184 | - sobj.append(img); | ||
185 | - sobj.append(br); | ||
186 | - sobj.append(tet1); | ||
187 | - } | ||
188 | - else if(j==4){ | ||
189 | - var img=document.createElement('img'); | ||
190 | - var tet1=document.createElement('text'); | ||
191 | - var str=get_jsondata(arr[j-1],"track"); | ||
192 | - tet1.id="IMG2_TEXT"; | ||
193 | - var br=document.createElement('br'); | ||
194 | - img.id="IMG2"; | ||
195 | - if(str==null || str[1]=='r'){ | ||
196 | - tet1.innerText="조회 불가능" | ||
197 | - img.src="metadata/image/empty.png"; | ||
198 | - } | ||
199 | - else{ | ||
200 | - tet1.innerText=str; | ||
201 | - img.src="metadata/track/"+arr[j-1]+".png"; | ||
202 | - } | ||
203 | - sobj.append(img); | ||
204 | - sobj.append(br); | ||
205 | - sobj.append(tet1); | ||
206 | - } | ||
207 | - else if(j==5){ | ||
208 | - var img=document.createElement('img'); | ||
209 | - var str=get_jsondata(arr[j-1],"character"); | ||
210 | - var tet1=document.createElement('text'); | ||
211 | - var br=document.createElement('br'); | ||
212 | - img.id="IMG4"; | ||
213 | - img.src="metadata/character/"+arr[j-1]+".png"; | ||
214 | - tet1.innerText=str; | ||
215 | - sobj.append(img); | ||
216 | - sobj.append(br); | ||
217 | - sobj.append(tet1); | ||
218 | - } | ||
219 | - else{ | ||
220 | - sobj.innerText=arr[j-1]; | ||
221 | - } | ||
222 | - obj.append(sobj); | ||
223 | } | 241 | } |
224 | } | 242 | } |
225 | - /////////////most카트라이더 부분///////////////////////// | 243 | + } |
226 | - var count=[]; | 244 | + var max = 0; |
227 | - for(var i=0; i<Len; i++){ | 245 | + var index = 0; //most_kart 배열에서 어디부분이 모스트인지 알려주는 index |
228 | - var item=most_kart[i]; | 246 | + for (var i = 0; i < Len; i++) { |
229 | - count[i]=0; | 247 | + if (max < count[i]) { |
230 | - for(var j=0; j<Len; j++){ | 248 | + max = count[i]; |
231 | - if(item==most_kart[j]){ | 249 | + index = i; |
232 | - count[i]+=1; | ||
233 | - } | ||
234 | - } | ||
235 | } | 250 | } |
236 | - var max=0; | 251 | + } |
237 | - var index=0; //most_kart 배열에서 어디부분이 모스트인지 알려주는 index | 252 | + const most_div = document.querySelector('#table_most'); |
238 | - for(var i=0; i<Len; i++){ | 253 | + var obj = document.createElement('tr'); |
239 | - if(max<count[i]){ | 254 | + most_div.append(obj); |
240 | - max=count[i]; | 255 | + /*save는 retire횟수 따져주는 것*/ |
241 | - index=i; | 256 | + var temp_arr = [most_kart[index], get_jsondata(most_kart[index], 'kart'), (Len - retire) * 10 + "%", max]; |
257 | + for (var i = 0; i < 4; i++) { | ||
258 | + var sobj = document.createElement('td'); | ||
259 | + if (i == 0) { | ||
260 | + var img = document.createElement('img'); | ||
261 | + img.id = "IMG3"; | ||
262 | + if (temp_arr[1] == null) { | ||
263 | + temp_arr[1] = "조회 불가능" | ||
264 | + img.src = "metadata/image/empty.png"; | ||
265 | + } | ||
266 | + else { | ||
267 | + img.src = "metadata/kart/" + temp_arr[i] + ".png"; | ||
242 | } | 268 | } |
269 | + sobj.append(img); | ||
243 | } | 270 | } |
244 | - const most_div=document.querySelector('#table_most'); | 271 | + else { |
245 | - var obj=document.createElement('tr'); | 272 | + sobj.innerText = temp_arr[i]; |
246 | - most_div.append(obj); | 273 | + } |
247 | - /*save는 retire횟수 따져주는 것*/ | 274 | + obj.append(sobj); |
248 | - var temp_arr=[most_kart[index],get_jsondata(most_kart[index],'kart'),(Len-retire)*10+"%",max]; | 275 | + } |
249 | - for(var i=0; i<4; i++){ | 276 | + |
250 | - var sobj=document.createElement('td'); | 277 | + rank_grape = rank_grape.reverse(); |
251 | - if(i==0){ | 278 | + var options = { |
252 | - var img=document.createElement('img'); | 279 | + type: 'line', |
253 | - img.id="IMG3"; | 280 | + data: { |
254 | - if(temp_arr[1]==null){ | 281 | + labels: ['', '', '', '', '', '', '', '', '', ''], |
255 | - temp_arr[1]="조회 불가능" | 282 | + datasets: [{ |
256 | - img.src="metadata/image/empty.png"; | 283 | + label: 'rank', |
257 | - } | 284 | + data: rank_grape, |
258 | - else{ | 285 | + backgroundColor: [ |
259 | - img.src="metadata/kart/"+temp_arr[i]+".png"; | 286 | + 'rgba(0, 0, 0, 0)' |
260 | - } | 287 | + ], |
261 | - sobj.append(img); | 288 | + borderColor: [ |
289 | + 'rgba(54, 162, 235, 1)' | ||
290 | + ], | ||
291 | + borderWidth: 2 | ||
292 | + }] | ||
293 | + }, | ||
294 | + options: { | ||
295 | + responsive: false, | ||
296 | + scales: { | ||
297 | + xAxes: [{ | ||
298 | + gridLines: { | ||
299 | + display: false | ||
262 | } | 300 | } |
263 | - else{ | 301 | + }], |
264 | - sobj.innerText=temp_arr[i]; | 302 | + yAxes: [{ |
303 | + ticks: { | ||
304 | + reverse: true, | ||
305 | + min: 1, | ||
306 | + max: 8, | ||
307 | + stepSize: 1 | ||
265 | } | 308 | } |
266 | - obj.append(sobj); | ||
267 | - } | ||
268 | - //sebo부분////////////////////////////////////////////////////////// | ||
269 | - rank_grape=rank_grape.reverse(); | ||
270 | - var options={ | ||
271 | - type: 'line', | ||
272 | - data:{ | ||
273 | - labels: ['', '', '', '', '', '','','','',''], | ||
274 | - datasets: [{ | ||
275 | - label: 'rank', | ||
276 | - data: rank_grape, | ||
277 | - backgroundColor:[ | ||
278 | - 'rgba(0, 0, 0, 0)' | ||
279 | - ], | ||
280 | - borderColor:[ | ||
281 | - 'rgba(54, 162, 235, 1)' | ||
282 | - ], | ||
283 | - borderWidth: 2 | ||
284 | }] | 309 | }] |
285 | - }, | ||
286 | - options:{ | ||
287 | - responsive:false, | ||
288 | - scales:{ | ||
289 | - xAxes:[{ | ||
290 | - gridLines:{ | ||
291 | - display:false | ||
292 | - } | ||
293 | - }], | ||
294 | - yAxes: [{ | ||
295 | - ticks:{ | ||
296 | - reverse:true, | ||
297 | - min:1, | ||
298 | - max:8, | ||
299 | - stepSize:1 | ||
300 | - } | ||
301 | - }] | ||
302 | - } | ||
303 | } | 310 | } |
304 | - }; | 311 | + } |
305 | - var ctx=document.getElementById('myChart').getContext('2d'); | 312 | + }; |
306 | - new Chart(ctx,options); | 313 | + |
307 | - /////////////////////// | 314 | + var ctx = document.getElementById('myChart').getContext('2d'); |
308 | - | 315 | + new Chart(ctx, options); |
309 | - var options2={ | 316 | + var options2 = { |
310 | - type: 'doughnut', | 317 | + type: 'doughnut', |
311 | - data:{ | 318 | + data: { |
312 | - labels:['retire','save'], | 319 | + labels: ['retire', 'save'], |
313 | - datasets: [{ | 320 | + datasets: [{ |
314 | - data: [retire,Len-retire], | 321 | + data: [retire, Len - retire], |
315 | - backgroundColor:[ | 322 | + backgroundColor: [ |
316 | - 'rgba(255, 100, 100, 1)', | 323 | + 'rgba(255, 100, 100, 1)', |
317 | - 'rgba(54, 162, 235, 1)' | 324 | + 'rgba(54, 162, 235, 1)' |
318 | - ], | 325 | + ], |
319 | - }] | 326 | + }] |
320 | }, | 327 | }, |
321 | - /* options:{ | 328 | + }; |
322 | - responsive:false, | 329 | + var ctx2 = document.getElementById('myChart2').getContext('2d'); |
323 | - scales:{ | 330 | + new Chart(ctx2, options2); |
324 | - xAxes: [{ | ||
325 | - gridLines:{ | ||
326 | - display:false | ||
327 | - }, | ||
328 | - ticks:{ | ||
329 | - display:false | ||
330 | - } | ||
331 | - }], | ||
332 | - yAxes: [{ | ||
333 | - gridLines:{ | ||
334 | - display:false | ||
335 | - }, | ||
336 | - ticks:{ | ||
337 | - display:false | ||
338 | - } | ||
339 | - }] | ||
340 | - } | ||
341 | - }*/ | ||
342 | - }; | ||
343 | - var ctx2=document.getElementById('myChart2').getContext('2d'); | ||
344 | - new Chart(ctx2,options2); | ||
345 | </script> | 331 | </script> |
332 | + | ||
346 | </html> | 333 | </html> |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -10,11 +10,11 @@ | ... | @@ -10,11 +10,11 @@ |
10 | var vec = ""; | 10 | var vec = ""; |
11 | function Ajax(index) { | 11 | function Ajax(index) { |
12 | $.ajax({ | 12 | $.ajax({ |
13 | - url: '/test/result', | 13 | + url: '/test/result', |
14 | - async: true, | 14 | + async: true, |
15 | - type: 'POST', | 15 | + type: 'POST', |
16 | data: { | 16 | data: { |
17 | - test: index | 17 | + test: index |
18 | } | 18 | } |
19 | }); | 19 | }); |
20 | } | 20 | } | ... | ... |
-
Please register or login to post a comment