1. 경마게임
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 106 107 108 109 110 111 112 113 114 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>경마게임</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"> <!-- <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script> --> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script> <script src="https://kit.fontawesome.com/df66332deb.js" crossorigin="anonymous"></script> <style> #red, #orange, #yellow, #green, #blue { font-size: 35pt; text-shadow: 0px 0px 10px gray; } .result { font-size: 30px; } </style> <script> 'use strict'; $(function(){ let red = Math.random()*5000 + 3000; let orange = Math.random()*5000 + 3000; let yellow = Math.random()*5000 + 3000; let green = Math.random()*5000 + 3000; let blue = Math.random()*5000 + 3000; let results = []; let finishCount = 0; let totalHorses = 5; function racingResult(horseColor) { results.push(horseColor); finishCount++; if (finishCount === totalHorses) { printRanking(); } } function printRanking() { let resultText = '<div class="row align-items-center">' + '<div class="col-auto">' + '<h2><i class="fa-solid fa-flag-checkered"></i> 결과 <i class="fa-solid fa-flag-checkered"></i></h2>' + '</div>' + '<div class="col-auto">' + '<button xxxxonclick="location.reload()" class="btn btn-dark">다시하기</button>' + '</div>' + '</div><br>'; results.forEach((result, index) => { resultText += `<div class="result mb-3">${index + 1}등 : <span style="text-shadow: 0px 0px 10px gray;">${result}</span></div>`; }); $('#demo').html(resultText); console.log(results); } $('#startBtn').on('click', function() { $('#red').animate({ marginLeft: '1000px' }, red, function(){ racingResult('<font color="red"><i class="fa-solid fa-horse fa-lg"></i></font>'); }); $('#orange').animate({ marginLeft: '1000px' }, orange, function(){ racingResult('<font color="orange"><i class="fa-solid fa-horse fa-lg"></i></font>'); }); $('#yellow').animate({ marginLeft: '1000px' }, yellow, function(){ racingResult('<font color="yellow"><i class="fa-solid fa-horse fa-lg"></i></font>'); }); $('#green').animate({ marginLeft: '1000px' }, green, function(){ racingResult('<font color="green"><i class="fa-solid fa-horse fa-lg"></i></font>'); }); $('#blue').animate({ marginLeft: '1000px' }, blue, function(){ racingResult('<font color="blue"><i class="fa-solid fa-horse fa-lg"></i></font>'); }); }); }); </script> </head> <body> <div class="container"> <div class="row align-items-center"> <div class="col-auto"> <h2><i class="fa-solid fa-flag-checkered"></i> 경마게임 <i class="fa-solid fa-flag-checkered"></i></h2> </div> <div class="col-auto"> <button id="startBtn" class="btn btn-dark">게임시작</button> </div> </div> <hr/> <div id="red"><font color="red"><i class="fa-solid fa-horse"></i></font></div> <hr/> <div id="orange"><font color="orange"><i class="fa-solid fa-horse"></i></font></div> <hr/> <div id="yellow"><font color="yellow"><i class="fa-solid fa-horse"></i></font></div> <hr/> <div id="green"><font color="green"><i class="fa-solid fa-horse"></i></font></div> <hr/> <div id="blue"><font color="blue"><i class="fa-solid fa-horse"></i></font></div> <hr/> <div id="demo"></div> </div> </body> </html> | cs |
2. 달력 예약
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 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>날짜예약</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"> <!-- <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script> --> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script> <script> 'use strict'; $(() => { let today = new Date(); let year = today.getFullYear(); let month = today.getMonth(); let date = today.getDate(); let ymd = `${year}-${month+1}-${date}`; let startDate = null; let endDate = null; $('#today').html(`오늘 날짜: <font color='red'><b>${ymd}</b></font>`); $('td').each(function(){ let cellDay = Number($(this).text()); let cellDate = new Date(year, month, cellDay); if(cellDate < today) { $(this).addClass('disabled'); } }); $('td').not('.disabled').on('click', function(){ let cellDay = Number($(this).text()); let cellDate = new Date(year, month, cellDay); if(!startDate || endDate) { $('td').not('.disabled').removeClass('bgColor'); $(this).addClass('bgColor'); startDate = cellDate; endDate = null; } else if(cellDate < startDate) { alert('종료 날짜는 시작 날짜 이후여야 합니다.'); } else { endDate = cellDate; selectDateRange(startDate, endDate); } }); function selectDateRange(start, end) { $('td').not('.disabled').each(function(){ let day = Number($(this).text()); let thisDate = new Date(year, month, day); if(thisDate >= start && thisDate <= end) { $(this).addClass('bgColor'); } }); } }); </script> <style> body { margin: 0px; } .bgColor { background-color: yellow; } .disabled { color: gray; background-color: lightgray; pointer-events: none; } </style> </head> <body> <p><br/></p> <div class="container"> <h2>예약할 날짜를 선택해주세요.</h2> <p><b id="today"></b></p> <table class="table table-bordered text-center"> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> </tr> <tr> <td>11</td> <td>12</td> <td>13</td> <td>14</td> <td>15</td> </tr> <tr> <td>16</td> <td>17</td> <td>18</td> <td>19</td> <td>20</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> <td>24</td> <td>25</td> </tr> <tr> <td>26</td> <td>27</td> <td>28</td> <td>29</td> <td>30</td> </tr> </table> <hr/> </div> </body> </html> | cs |
3.
Web Server
웹 서버는 주로 클라이언트(예: 브라우저)의 HTTP 요청을 처리하고
일반적으로 웹 페이지를 구성하는 파일(HTML 페이지, CSS, JavaScript 및 이미지) 형식으로 HTTP 응답을 제공한다.
웹 서버는 요청을 처리하고 클라이언트가 요청한 정적 콘텐츠를 반환하거나
요청을 다른 서비스로 리디렉션하여 응답을 가져온다.
Web Application Server
웹 애플리케이션 서버는 더 동적이다.
애플리케이션의 비즈니스 로직을 관리하는 데 사용되며
데이터베이스 또는 기타 서비스와 상호 작용하여 동적 콘텐츠를 생성한다.
PHP, Java, Ruby 또는 Python과 같은 서버 측 언어를 사용하여
스크립트를 처리하여 클라이언트의 웹 브라우저로 전송되는 HTML 컨텐츠를 생성한다.
웹 애플리케이션 서버는 세션 관리, 보안 인증, 애플리케이션 로직을 포함하여
단순한 HTML 제공보다 더 복잡한 작업을 처리하는 경우가 많다.
web application server의 예
첫댓글 경주마를 아이콘으로 처리하셨군요..ㅎ.
순위 출력부분 배열처리 좋습니다.
달력 선택처리도 조건지정내용 좋습니다.
내용 잘 보았어요... 수고 많으셨습니다.