1. calculator
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
h2{ margin-left:60px;}
.button{
width: 50px;
height:50px;
margin:2px;
}
div{
width: 240px;
height: 240px;
border: 1px solid black;
margin-top: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var fomula='';//전역변수
$('input[type=button]').click(function(){
var input = $(this).val();
if(input=='CE'){
fomula='';
$('#result').val(fomula);
}else if(input == '='){
$('#result').val(eval(fomula));
fomula = '';
}else{
fomula = fomula+input;
$('#result').val(fomula);
}
});
});
</script>
</head>
<body>
<h2>Encore Calculator</h2><p></p>
<input type="text" id="result" name ="result" value="0.0" size=33px/>
<div id="pad">
<input type = "button" id = "7" value = "7" class="button"/>
<input type = "button" id = "8" value = "8" class="button"/>
<input type = "button" id = "9" value = "9" class="button"/>
<input type = "button" id = "+" value = "+" class="button"/>
<input type = "button" id = "4" value = "4" class="button"/>
<input type = "button" id = "5" value = "5" class="button"/>
<input type = "button" id = "6" value = "6" class="button"/>
<input type = "button" id = "-" value = "-" class="button"/>
<input type = "button" id = "1" value = "1" class="button"/>
<input type = "button" id = "2" value = "2" class="button"/>
<input type = "button" id = "3" value = "3" class="button"/>
<input type = "button" id = "*" value = "*" class="button"/>
<input type = "button" id = "0" value = "0" class="button"/>
<input type = "button" id = "CE" value = "CE" class="button"/>
<input type = "button" id = "=" value = "=" class="button"/>
<input type = "button" id = "/" value = "/" class="button"/>
</div>
</body>
</html>2. unbind
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>unbind():: 이벤트를 해제시키는 함수</title>
<style type="text/css">
.reverse{background:blue; color:white;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('h2:first').click(function(){
$(this).html('<font color = red>CLICK</font>');
alert("click() Calling....");
$(this).unbind();
});
});
</script>
</head>
<body>
<h2>오늘은 화요일 입니다. </h2>
<h2>오후 늦게 비가 온다는 예보가 있습니다.</h2>
<h2>퇴근할 때 비가 올 수 있습니다. 우산들 가지고 오셨나요?</h2>
</body>
</html>'컴퓨터 프로그래밍 > JQuery' 카테고리의 다른 글
| key event-keyup(), textarea:maxlength (0) | 2020.05.30 |
|---|---|
| hide(), show()-hover(), mouseenter(), mouseleave() (0) | 2020.05.30 |
| hover() (0) | 2020.05.29 |
| bind()-removeClass(), addClass(), mouseenter(), mouseleave() (0) | 2020.05.29 |
| append()-img, setTimeOut(), setInterval() (0) | 2020.05.29 |