the space coding
HTML
계산기 만들기
순서대로 진행해주세요
번호-> 4칙년산 ->sin,cos,tan-> 제곱은 내장함수가 없으니
새로 운 함수를 추가해 주세요 ..4가지만 주의 하면 만들수있습니다
|
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157 |
<!DOCTYPE html>
<html>
<head>
<title>계산기</title>
<script language="javascript">
var num1;
var num2;
function previewNum(value){
//alert(value);
var textvalue = document.getElementById("result");
textvalue.value = textvalue.value + value;
num1 = textvalue;
//temp = textvalue.value;
}
function Result(){
var res = new Array;
var temp;
var textvalue = document.getElementById("result");
test = textvalue;
// alert(num1.value);
if(test.value.indexOf('^') != -1){
res = test.value.split('^');
res[0] = eval(res[0]);
res[1] = eval(res[1]);
temp = Math.pow(res[0], res[1]);
textvalue.value = temp;
}
textvalue.value = eval(textvalue.value);
}
function Oper(value){
var textvalue = document.getElementById("result");
//var opera = document.getElementsByName("op");
temp = eval(textvalue.value);
//alert(temp);
if(value == "+/-"){
temp = -temp;
textvalue.value = temp;
}
else if(value == "sin"){
//alert(temp);
temp = Math.sin(temp);
textvalue.value = temp;
}
else if(value == "cos"){
temp = Math.cos(temp);
textvalue.value = temp;
}
else if(value == "tan"){
temp = Math.tan(temp);
textvalue.value = temp;
}
}
function square(value){
var textvalue = document.getElementById("result");
textvalue.value = textvalue.value + value;
}
</script>
<script>
function changeColor()
{
var color = ["#FF0000", "#00FF00", "#0000FF","#000FFF","#00F0FF","#0F00FF","#F000FF","#F002FF","#F110FF"];
var title = document.getElementById("body");
var i = 0;
setInterval(function(){
title.style.color = color[i]; //title의 색상을 바꿈
i = (i+1) % color.length;
}, 50);
}
</script>
<!-- <style>
/* 1. class 정의 */
.blueText {
color: blue;
}
.redText{
color: red;
}
</style> -->
</head>
<body onload="changeColor()" id = "body">
<form>
<center>
<table border="1">
<tr>
<td colspan="2"><input type="text" id="result" style="width: 400px; height: 40px; font-size:20px; text-align:right;" autocomplete=off readonly ><br></td>
<input type="text" style="display: none;" />
</tr>
<tr align="center">
<td><input type="reset" class="blueText" value="Clear" style="width: 180px; height: 50px; font-size: 25px;">
<input type="button" class="blueText" value="=" style="width: 180px; height: 50px;font-size: 25px;" onclick="Result();"></td>
</tr>
</table>
<table border="1">
<tr align="center">
<td><input type="button" class="blueText" value="1" name="number" onclick="previewNum(this.value)" style="width: 70px; height: 55px; font-size: 20px;"></td>
<td><input type="button" class="blueText" value="2" name="number" onclick="previewNum(this.value)" style="width: 70px; height: 55px; font-size: 20px;"></td>
<td><input type="button" class="blueText" value="3" name="number" onclick="previewNum(this.value)" style="width: 70px; height: 55px; font-size: 20px;"></td>
<td><input type="button" name="oper" value="+" name="number" onclick="previewNum(this.value)" style="width: 70px; height: 55px; font-size: 20px; margin-left: 20px "></td>
<td><input type="button" class="redText" value="x^y" name = "^" onclick="square(this.name)" name="op" style="width: 70px; height: 55px; font-size: 20px; margin-left: 20px "></td>
</tr>
<tr align="center">
<td><input type="button" class="blueText" value="4" name="number" onclick="previewNum(this.value)" style="width: 70px; height: 55px; font-size: 20px;"></td>
<td><input type="button" class="blueText" value="5" name="number" onclick="previewNum(this.value)" style="width: 70px; height: 55px; font-size: 20px;"></td>
<td><input type="button" class="blueText" value="6" name="number" onclick="previewNum(this.value)" style="width: 70px; height: 55px; font-size: 20px;"></td>
<td><input type="button" name="oper" value="-" name="number" style="width: 70px; height: 55px; font-size: 20px; margin-left: 20px" onclick="previewNum(this.value)"></td>
<td><input type="button" class="redText" value="sin" name="op" onclick="Oper(this.value)" style="width: 70px; height: 55px; font-size: 20px; margin-left: 20px "></td>
</tr>
<tr align="center">
<td><input type="button" class="blueText" value="7" name="number" onclick="previewNum(this.value)" style="width: 70px; height: 55px; font-size: 20px;"></td>
<td><input type="button" class="blueText" value="8" name="number" onclick="previewNum(this.value)" style="width: 70px; height: 55px; font-size: 20px;"></td>
<td><input type="button" class="blueText" value="9" name="number" onclick="previewNum(this.value)" style="width: 70px; height: 55px; font-size: 20px;"></td>
<td><input type="button" name="oper" value="*" name="number" style="width: 70px; height: 55px; font-size: 20px; margin-left: 20px" onclick="previewNum(this.value)"></td>
<td><input type="button" class="redText" value="cos" name="op" onclick="Oper(this.value)" style="width: 70px; height: 55px; font-size: 20px; margin-left: 20px "></td>
</tr>
<tr align="center">
<td><input type="button" class="blueText" value="0" name="number" onclick="previewNum(this.value)" style="width: 70px; height: 55px; font-size: 20px;"></td>
<td><input type="button" class="blueText" value="+/-" name="op" onclick="Oper(this.value)" style="width: 70px; height: 55px; font-size: 20px;"></td>
<td><input type="button" class="blueText" value="." name="number" style="width: 70px; height: 55px; font-size: 20px;" onclick="previewNum(this.value)"></td>
<td><input type="button" name="oper" value="/" name="number" style="width: 70px; height: 55px; font-size: 20px; margin-left: 20px" onclick="previewNum(this.value)"></td>
<td><input type="button" class="redText" value="tan" name="op" onclick="Oper(this.value)" style="width: 70px; height: 55px; font-size: 20px; margin-left: 20px"></td>
</tr>
</table>
</center>
</form>
</body>
</html>
|
cs |
'HTML' 카테고리의 다른 글
| [jQuery][유효성 검서] (0) | 2018.04.09 |
|---|---|
| [html][달력] (0) | 2018.04.06 |
| [HTML][기초] (0) | 2018.04.04 |
| [HTML][기능 넣어주기] (0) | 2018.04.04 |
| [HTML][회원 가입 양식] (0) | 2018.04.04 |
