Link
11-28 22:35
«   2020/11   »
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          
Archives
Today
1,731
Total
1,176,303
관리 메뉴

꿈 많은 사람의 이야기

자바스크립트 계산기 만들기 본문

javascript

자바스크립트 계산기 만들기

이수진의 블로그 이수진의 블로그 2017. 8. 16. 08:46

매우 간단한 계산기 만들기 예제이다.
뭐 방법은 여러가지 방법이 있겠지만 본인은 본인 편한데로 했다

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .btn{ width: 50px; height: 50px; font-size: 18pt; } #calc{ width: 150px; } input#result{ width: 150px; height: 30px; border: 1px solid blue; border-radius: 5px; } </style> <body> <div id="calc"> <input type="text" id="result"> <hr> <div id="butns"> </div> </div> </body> </html> <script> function getById(str) { return document.getElementById(str); } var result = getById('result'); var butns = getById('butns'); var arrEvent = new Array(); //배열을 생성한다. 여기에 각 아이디별 객체 정보를 담는다. for(var i =1 ; i <=15 ; i++) { btn =document.createElement('button'); //ㅇ엘리먼트가 추가된다. btn.className ='btn'; //클래스 부여 butns.appendChild(btn); //자식에다 붙인다. var val =""; switch(i) { case 10 : val ='0'; break; case 11 : val ='+'; break; case 12 : val ='-'; break; case 13 : val ='*'; break; case 14 : val ='/'; break; case 15 : val ='='; break; default : val = i; } btn.innerText = val; btn.value = val; btn.id ="btn"+val; //아이디 값 부여 arrEvent.push(getById(btn.id)); //배열에 push하면서 객체 정보를 담는다. } //문자열을 수식으로 바꿔주는 -> eval() 함수 사용해서 한다. //즉 이번 과제는 문자열을 받아 eval() 로 바꿔준다. for(var i = 0 ; i < arrEvent.length ; i++) { arrEvent[i].onclick = function(){ //그리고 반복을 돌면서 이벤트를 적용 if(this.value === "=") //= 면 결과 값이 나와야하니까 { result.value = eval(result.value); //eval함수를 적용시켜 다시 result.vaule영역을 초기화한다. return; } result.value += this.value; } } /* var btnArr = butns.getElementsByClassName('btn'); console.log(btnArr); for(var i = 0 ; i < btnArr.length ; i++) { btnArr[i].onclick = function(){ result.value = this.innerText; }; } 로도 가능 */ </script>


0 Comments
댓글쓰기 폼