這篇文章主要介紹了Javascript 實現簡單計算器實例代碼的相關資料,需要的朋友可以參考下
|
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset=
"utf-8"
>
<title>js簡單計算器</title>
<style type=
"text/css"
>
*{
margin:0px;
padding:0px;
}
input{
margin-top:2px;
margin-left:2px;
width:230px;
height:30px;
text-align:right;
}
button{
margin-top:2px;
margin-left:2px;
width:50px;
height:50px;
}
#container{
margin-left:1px;
border:1px solid
#E4E4E4;
background:
#BBBBBB;
width:235px;
height:215px;
}
</style>
<script>
function
onLoad(){
//加載完畢后光標自動對應到輸入框
document.getElementById(
"input"
).focus();
}
//讀取按鈕的值，傳給輸入框
function
inputEvent(e){
//把val的值改為每個事件的innerHTML值
var
val=e.innerHTML;
//獲取input標簽
var
xsval=document.getElementById(
"input"
);
//標簽里的value連接每個事件的innerHTML值
xsval.value+=val;
}
//計算出結果
function
inputOper(){
var
xsval=document.getElementById(
"input"
);
xsval.value=eval(document.getElementById(
"input"
).value);
}
//清零
function
clearNum(){
var
xsval=document.getElementById(
"input"
);
xsval.value=
""
;
document.getElementById(
"input"
).focus();
}
//退格
function
backNum(){
var
arr=document.getElementById(
"input"
);
arr.value=arr.value.substring(0,arr.value.length-1);
}
|
|
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
|
</script>
</head>
<body onload=
"onLoad()"
>
<input id=
"input"
type=
"text"
>
<div id=
"container"
>
<div>
<button onclick=
"inputEvent(this)"
>1</button>
<button onclick=
"inputEvent(this)"
>2</button>
<button onclick=
"inputEvent(this)"
>3</button>
<button onclick=
"inputEvent(this)"
>+</button>
</div>
<div>
<button onclick=
"inputEvent(this)"
>4</button>
<button onclick=
"inputEvent(this)"
>5</button>
<button onclick=
"inputEvent(this)"
>6</button>
<button onclick=
"inputEvent(this)"
>-</button>
</div>
<div>
<button onclick=
"inputEvent(this)"
>7</button>
<button onclick=
"inputEvent(this)"
>8</button>
<button onclick=
"inputEvent(this)"
>9</button>
<button onclick=
"inputEvent(this)"
>*</button>
</div>
<div>
<button onclick=
"inputEvent(this)"
>0</button>
<button onclick=
"inputEvent(this)"
>.</button>
<button onclick=
"inputOper(this)"
>=</button>
<button onclick=
"inputEvent(this)"
>/</button>
</div>
</div>
<button onclick=
"clearNum()"
>清零</button>
<button onclick=
"backNum()"
>退格</button>
</body>
</html>
|
(轉載) http://www.jb51.net/article/95464.htm