Practice :Web Calculator[웹 계산기]
2018. 12. 10. 00:10ㆍJavaScript
Practice :Web Calculator[웹 계산기]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html, body { height:100%; overflow:hidden }
*{
margin: 0; padding: 0;
}
section{
position:absolute;
left:50%;
top:50%;
transform:translateX(-50%) translateY(-50%);
}
.main{
position:absolute;
left:50%;
top:50%;
transform:translateX(-50%) translateY(-50%);
background-color: rgb(11, 146, 7);
width:350px;
height:500px;
border-radius: 35px;
box-shadow: 15px 15px 8px 0px #2eca2e;
}
.button{
width:65px;
height:65px;
font-size:40px;
margin: 2px;
cursor: pointer;
border:none;
border-radius: 11px;
background-color:rgb(5, 107, 29);
color: white;}
.button1{
width:65px;
height:65px;
font-size:40px;
margin: 2px;
cursor: pointer;
border:none;
border-radius: 11px;
background-color:rgb(30, 192, 43);
color: white;
}
.textView{
width:277px;
height: 80px; margin:3px;
padding: 0px;
font-size: 45px;
border-radius:11px;
border:none;
background-color: rgb(0, 0, 0);
color:white;
}
.back{
background: linear-gradient(to right,rgb(19, 235, 66),rgb(164, 231, 148));
height: 100%;
}
table .button:hover{
background-color:rgb(19, 248, 92);
}
table .button1:hover{
background-color:rgb(19, 248, 92);
}
</style>
</head>
<body>
<script>
function insert(num) {
document.form.textView.value = document.form.textView.value + num;
};
function equal() {
document.form.textView.value = eval(document.form.textView.value);
};
function clean() {
document.form.textView.value = "";
};
function back() {
var text = document.form.textView.value;
document.form.textView.value = text.substring(0, text.length - 1);
};
</script>
<div class="back"></div>
<div class="main">
<section>
<form name="form" class="form">
<input class="textView" name="textView">
<table>
<tr>
<td><input class="button" type="button" value="C" onclick="clean()"></td>
<td><input class="button" type="button" value="Del" onclick="back()"></td>
<td><input class="button" type="button" value="%" onclick="insert('%')"></td>
<td><input class="button" type="button" value="÷" onclick="insert('/')"></td>
</tr>
<tr>
<td><input class="button1" type="button" value="7" onclick="insert(7)"></td>
<td><input class="button1" type="button" value="8" onclick="insert(8)"></td>
<td><input class="button1" type="button" value="9" onclick="insert(9)"></td>
<td><input class="button" type="button" value="×" onclick="insert('*')"></td>
</tr>
<tr>
<td><input class="button1" type="button" value="4" onclick="insert(4)"></td>
<td><input class="button1" type="button" value="5" onclick="insert(5)"></td>
<td><input class="button1" type="button" value="6" onclick="insert(6)"></td>
<td><input class="button" type="button" value="-" onclick="insert('-')"></td>
</tr>
<tr>
<td><input class="button1" type="button" value="1" onclick="insert(1)"></td>
<td><input class="button1" type="button" value="2" onclick="insert(2)"></td>
<td><input class="button1" type="button" value="3" onclick="insert(3)"></td>
<td><input class="button" type="button" value="+" onclick="insert('+')"></td>
</tr>
<tr>
<td colspan=2><input class="button1" style="width:136px" type="button" value="0" onclick="insert(0)"></td>
<td><input class="button" type="button" value="." onclick="insert('.')"></td>
<td><input class="button" type="button" value="=" onclick="equal()"></td>
</tr>
</table>
</form>
</div>
</section>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| JSON 의 DB연동(AJAX 사용) (0) | 2019.04.03 |
|---|---|
| jQuery 적용하기 (0) | 2019.03.27 |
| Script 기본 사용법 (2) (0) | 2019.03.27 |
| Script 기본 사용법(1) (0) | 2019.03.27 |
| 2018.12.07 함수,연산자,객체,오브젝트,타입확인,타입변경 (0) | 2018.12.07 |