웹/JavaScript,JQurey 검색 결과

해당 글 23건

자바스크립트- 가위바위보 게임

가위바위보.js var left = 0; var 딕셔너리 = { 바위: '0', 가위: '-142px', 보: '-284px' }; //left는 컴퓨터가 내는 것 function 컴퓨터의선택(left){ return Object.entries(딕셔너리).find(function(y){ return y[1]===left; })[0]; } var 인터벌; function 인터벌메이커(){ clearInterval(인터벌); 인터벌 = setInterval(function() { //컴퓨터 다음 낼 것 미리 정하기 순환 if(left === 딕셔너리.바위){ left = 딕셔너리.가위; } else if (left === 딕셔너리.가위){ left = 딕셔너리.보; } else { left = 딕셔너리.바위..
웹/JavaScript,JQurey 2019. 7. 26. 18:13

자바스크립트- 로또 추첨기

로또추첨기.js //empty는 반복문 불가 //1~45번 번호 채우기 //mapping var 후보군 =Array(45).fill().map(function(요소,인덱스){ return 인덱스 +1; }); console.log(후보군); //6개 뽑기 //splice를 통해 후보군에서 하나씩 랜덤으로 뽑고 이동 값에 넣어준다음 셔플에 푸시한다. var 셔플 = []; while(후보군.length>0){ var 이동값= 후보군.splice(Math.floor(Math.random() * 후보군.length),1)[0]; 셔플.push(이동값); } console.log(셔플); var 보너스 = 셔플[셔플.length-1]; var 당첨숫자들 = 셔플.slice(0,6).sort(function(p,..
웹/JavaScript,JQurey 2019. 7. 23. 16:22

자바스크립트-틱택토 게임

틱택토 게임은 3X3 오목과 비슷하며 먼저 가로줄 또는 세로줄 또는 대각선을 일치시키면 승리하는 간단한 게임이다. 구글에 틱택토 게임 치면 나올것이다. 틱택토.js var 바디 = document.body; var 테이블 = document.createElement('table'); var 줄들 = []; //줄들 기억하기 위함 [[tr],[tr],[tr]] var 칸들 = []; //칸들 기억하기 위함 [[td,td,td],[td,td,td],[td,td,td]] var 턴 = 'X'; var 결과 = document.createElement('div'); //칸 클릭 이벤트 var 비동기콜백 = function(이벤트){ //해당 클릭 이벤트 위치 알려주기 console.log(이벤트.target);..
웹/JavaScript,JQurey 2019. 7. 22. 17:13

자바스크립트- 구구단 게임

구구단.js var 숫자1 = Math.ceil(Math.random()*9); var 숫자2 = Math.ceil(Math.random()*9); var 결과 = 숫자1 * 숫자2; var 바디 = document.body; var 단어 = document.createElement('div'); 단어.textContent = String(숫자1) + '곱하기' + String(숫자2) + '는?'; document.body.append(단어); var 폼 = document.createElement('form'); document.body.append(폼); var 입력창 = document.createElement('input'); 입력창.type= 'number'; 폼.append(입력창); var..
웹/JavaScript,JQurey 2019. 7. 21. 18:03

D3.js 공부 9 - 막대차트 그리기(part1)

D3.js는 다음과 같은 차트를 만드는데 유용합니다. 막대 차트 원 차트 파이 차트 도넛 형 차트 선 차트 버블 차트 막대 차트는 개별 범주, 그룹의 수, 빈도, 평균 표시하고 비교할 때 사용합니다. 막대 높이 길이가 범주의 크기이겠죠. x축은 범주 y축은 눈금이 있고 측정 단위를 나타냅니다. 막대형 차트는 rect를 이용하여 그려줍니다. 1단계 : rect요소 스타일 지정해주기. svg rect { fill: gray; } 위 css으로 rect 스타일을 지정해줍니다. 즉 회색으로 색칠 해준다는 뜻이죠. 2단계 : 텍스트 요소에 스타일을 지정해주기. svg text { fill: yellow; font: 12px sans-serif; text-anchor: end; } 위 css으로 text 스타일을 ..
웹/JavaScript,JQurey 2019. 4. 16. 00:47

D3.js 공부 8 - 에니메이션

D3.js는 전환(transition)을 이용하여 애니메이션을 지원해줍니다. 우선 간단한 코드를 살펴보겠습니다. Simple transitions body태그를 선택 후 스타일로 배경색을 블루로 했지만 트랜지션으로 회색으로 배경색이 바뀌게 됩니다. duration() 이 메서드는 바로 변경하지 않고 지정해준 초만큼 부드럽게 전환시켜주는 효과를 가져옵니다. Simple transitions 위 코드처럼 duraton을 5초로 준다면 h3태그의 스타일을 5초 동안 초록색으로 전환시켜줍니다. d3.selectAll("h3").transition().style("color","rgb(0,150,120)").duration(5000); 만약에 위에처럼 rgb로 속성을 지정해주면 0~150까지 색이 5초동안 부드럽..
웹/JavaScript,JQurey 2019. 4. 16. 00:20

D3.js 공부 7 - transition(전환)

Transition() 메서드 이 메서드는 모든 선택자에 가능하고 전환시켜줍니다. atrr이나 style에는 적용되지만 그 상위인 append나 data에는 적용이 안됩니다. d3.select("body") .transition() .style("background-color", "lightblue"); body태그를 선택해주고 transition() 메서드를 적용시켜줍니다. 이때 전환 대상은 style이겠죠. body 태그의 배경 색을 파란색으로 전환해주는겁니다. 또한 duration도 함께 사용하는데 var t = d3.transition() .duration(2000); d3.select("body") .transition(t) .style("background-color", "lightblue")..
웹/JavaScript,JQurey 2019. 4. 10. 21:02

D3.js 공부 6 - SVG 변환

도형을 변환 시키는것을 알아보겠습니다. 즉 도형을 회전 시키거나 이동 시키거나 등등... Translate : x, y좌표를 움직입니다. ex) Translate(60,60) => 60,60만큼 이동 Rotate : 몇도 만큼 회전 시킵니다. ex) Rotate(45) => 45도 회전 Scale: 확대 시킵니다. ex) Scale(10) 직사각형 도형이 있는데 이를 (30,30)만큼 이동 시킵니다. 이는 rotate를 통해 45도 만큼 직시각형을 회전시킵니다. 원을 추가하여 태그로 그룹화 시켜서 함께 변환 시킵니다. 즉 직사각형 원 모두 (60,60)만큼 이동 시키고 30도 회전 시킵니다. 이들을 D3.js를 이용하면 어떻게 될까요 ?? 우선 컨테이너를 생성해줍니다. 그 다음 svg를 생성해줍니다. 즉..
웹/JavaScript,JQurey 2019. 4. 10. 00:47