728x90
반응형

HTML+CSS(실습) 36

2023-4-19(수) 동적생성 및 제거(createElement,setAttribute,innerText,lastChild,removeChild,value)

1. 생성클릭시 createDiv() 함수 동작 1-1 myDiv 변수에 div element 생성 1-2 myDiv에 id값 box 부여(style 지정 빨간박스) 1-3 innerText로 n번째 div 텍스트 입력 1-4 num++ 1-5 wrap element받아와서 appendChild로 추가 2. 마지막 제거 클릭시 removeLastDiv() 함수 동작 2-1 wrap 변수에 wrap element값 부여 2-2 lastChild 변수에 wrap의 last Child 불러와서 부여 2-3 wrap.removeChild(lastChild)로 부여해둔 마지막 자식(div) 제거 2-4 num-- 해줌으로써 n번째 div가 입력될 text 컨트롤 3. 선택제거 클릭시 removeDiv() 함수 동..

HTML+CSS(실습) 2023.04.19

2023-04-19(수) 랜덤공+로또 실습(getElement , createElement , innerHTML , setAttribute , append) ★

1. div id를 circle1~6으로 미리 공스타일 생성 1. lottoNum배열 생성 및 for문으로 로또번호 생성 2. temp를 사용해 오름차순 정렬 3. 생성 버튼 클릭으로 createCircle() 함수 동작 4. circle이라는 element생성 및 id이름 circle1~6 부여(클릭시 마다 num값 증가로 1~6 컨트롤) 5. circle에 lottoNum배열값을 추가 6. div wrap에 하나씩 추가

HTML+CSS(실습) 2023.04.19

2023-04-12(수) 체크박스 실습(getElementsByClassName)

1. input(checkbox) 에 class는 공통값 value는 다르게 설정 2. trip배열에 이름과 가격 추가 3. 금액확인 버튼클릭시 myFunc()함수작동 4. checked로 체크박스의 체크 확인 후 체크된 부분의 price를 total(총 가격)값에 추가 5. 총 가격span을 innerHTML로 total값입력(출력) 6. 총 가격 표기 후 total을 0으로 리셋하여 다른 체크박스를 눌러 값을 확인해도 중첩되지 않도록 설정

HTML+CSS(실습) 2023.04.12

★2023-04-11(화) audio 플레이어 실습(innerHTML,audio메소드)

DOCTYPE html> Document piano1 00:00 03:42 │◀ ▶ ││ ▶│ ■ //오디오 불러오기 var audio1 = new Audio(); var audio2 = new Audio(); var audio3 = new Audio(); audio1.src='../Audio/my_piano1.mp3' audio2.src='../Audio/my_piano2.mp3' audio3.src='../Audio/my_piano3.mp3' var musicList = [ {name:"piano1" , music:audio1}, {name:"piano2" , music:audio2}, {name:"piano3" , music:audio3} ]; var i = 0; var isPlaying = fal..

HTML+CSS(실습) 2023.04.12
728x90
반응형