IT & CODE 이야기

갤러리 배열 이번 예제는 jquery의 String 클래스, charAt 예제입니다. 예제의 조건은 다음과 같습니다. 입력을 받기 위한 칸과 "값 입력"이라는 버튼을 둬주세요 버튼을 누르면 전에 있던 텍스트가 사라지고 입력받은 문자열을 1초에 한번씩 #pannel에 출력해주세요 출력이 완료되면 전에 있던 텍스트가 사라지고 "종료되었습니다"라는 글씨가 #pannel에 나타나고 밑에 초기화 버튼을 넣어주세요 초기화 버튼을 누르면 1의 과정으로 돌아갑니다 #pannel{border:1px solid black; width:500px;height:250px;text-align:center; vertical-align:middle; display:table-cell;} .letter{display:inline-b..

갤러리 배열 이번 예제는 jquery로 Math 클래스를 연습할수 있는 예제입니다. 예제의 조건은 다음과 같습니다. 게임의 목표는 10초 안에 물고기를 많이 클릭할수록 점수를 얻는 게임입니다. 게임 시작하기 버튼을 누르면 버튼이 사라지고 물고기가 박스 안에 나타나고 계속해서 움직입니다. 물고기를 클릭하면 하단의 점수란의 점수가 클릭한 수만큼 올라가고, 흘러간 시간이 표시됩니다. 물고기는 랜덤한 지점을 향해 계속 이동하고 그 지점에 도착하면 다른 랜덤한 지점을 설정해 움직입니다 제한된 시간이 끝나면 물고기가 사라지고 점수가 표시됩니다. 물고기 src:http://cfile6.uf.tistory.com/image/2637484856B21E3332B223 물고기 width:200px; position:rela..

갤러리 배열 이번 예제는 jquery로 setInterval 함수와 clearInterval 함수를 연습하기 위한 예제입니다 시작 버튼을 누르면 물고기가 바 위에서 좌우로 이동하면서 움직인다. 물고기의 머리는 항상 이동하는 방향을 향한다. 멈춤 버튼을 누르면 물고기가 멈춘다.멈춤 버튼을 눌렀다가 시작 버튼을 누르면 이전 움직이던 방향 그대로 다시 물고기가 움직인다.물고기가 멈췄을때 리소스 절약을 위해 setInterval 함수가 해제되어야 한다#bar{ width: 500px; height: 10px; background-color: red;} #fish{ position: relative; width:80px; transform:rotateY(180deg);} 물고기 src : http://cfile6..

갤러리 배열 이번 예제는 jquery로 이미지를 제어하는 방법을 담은 예제입니다. 예제의 조건은 다음과 같습니다. 이미지들을 100*100 px의 크기로 x간격, y간격으로 배열한다 x간격, y간격, 1줄의 이미지 갯수를 input태그로 받아서 버튼을 누르면 그대로 나타나게 한다. 키보드의 +버튼과 -버튼을 누르면 이미지가 추가되었다가 제거되었다가 하게 한다. 아래는 예제를 완성시킨 모습입니다. 이 예제의 코드 갤러리 배열 +버튼으로 이미지 추가, -버튼으로 이미지 제거 x간격: y간격: 1줄에 이미지 갯수:

이번 예제는 jquery로 수족관속의 물고기를 움직이는 예제입니다. 예제의 조건은 다음과 같습니다. xy좌표를 입력하면 입력 버튼을 누르면 물고기가 좌표로 움직인다. 물고기를 누르면 랜덤한 위치로 이동한다. 물고기가 수족관 밖으로 나가는 좌표를 입력하면 경고창을 띄운다. 키보드 화살표를 이용해서 물고기를 10px씩 이동시킨다. 물고기 src:http://cfile6.uf.tistory.com/image/2637484856B21E3332B223 물고기 width:200px; position:relative; 수족관 width:700px; height:442px; border:2px solid grey; margin:auto; if문 ,Math.random, .animate를 알아야 합니다. 아래는 예제를 ..

물고기 움직이기 이번 예제는 jquery로 이미지의 위치를 제어하는 방법을 담은 예제입니다. 예제의 조건은 다음과 같습니다. 물고기를 수평선 위에서 (왼쪽으로 이동)버튼을 누르면 왼쪽으로, (오른쪽으로 이동)버튼을 누르면 오른쪽으로 이동하게 한다. 키보드의 ←버튼을 누르면 왼쪽으로 20px, →버튼을 누르면 오른쪽으로 20px이동한다.. 수평선은 width: 300px; height: 2px; background-color: red; 물고기는 position: relative; width:40px;이다. 물고기 사진의 src주소는 http://cfile6.uf.tistory.com/image/2637484856B21E3332B223 아래는 예제를 완성시킨 모습입니다. 물고기 왼쪽물고기 오른쪽 오른쪽 왼쪽..

랜덤한 색상 이번 예제는 jquery로 글자뒤의 배경색을 랜덤으로 바뀌게 하는 예제입니다. 예제의 조건은 다음과 같습니다. 버튼을 누르면 글자색이 흰색으로 변하고 배경색이 랜덤하게 바뀐다 글자를 누르면 흰 바탕에 검은 글씨로 바뀐다. 형변환, setInterval을 알아야 합니다. 아래는 예제를 완성시킨 모습입니다. 정승호정승호 코드 해설 정승호정승호