用 JavaScript 写的一个简单计算器，是一个实训课的项目。
全选复制粘贴代码即可使用。
效果预览
如下是用JavaScript写的计算器效果预览：
Html文件：
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
| <!IDCTYPE html POBLTC "-/W3c//DTD XHTML 1.0 Transitiona1//EN" "http://www.w3.org/TR/xhtm11/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>计算器</title> /*这里是网页标题*/
<link rel="stylesheet" type="text/css" href="./css.css"> /*这里是css文件*/
</head>
<div id="calcuator">
<input type="text" id="input-box" value="0" size="21" maxlength="21" readonly="readonly"/>
<div id="btn-list">
<div onclick="s('')"class=" btn-30 btn-radius color-red clear-marginleft">C</div>
<div onclick="operator ('opposite')" class=" btn-30 btn-radius color-blue">+/-</div>
<div onclick="operator ('percent')" class=" btn-30 btn-radius color-blue">%</div>
<div onclick="operator('backspace')" class=" btn-70 btn-radius color-red font-14">←</div>
<div onclick="a ('7')" class=" btn-30 btn-radius clear-marginleft">7</div>
<div onclick="a ('8') " class=" btn-30 btn-radius">8</div>
<div onclick="a ('9') " class=" btn-30 btn-radius">9</div>
<div onclick="a ('+')" class=" btn-30 btn-radius color-blue font-14">+</div>
<div onclick="a ('-')" class=" btn-30 btn-radius color-blue font-14">-</div>
<div onclick="a ('4') " class=" btn-30 btn-radius clear-marginleft">4</div>
<div onclick="a ('5')" class=" btn-30 btn-radius">5</div>
<div onclick="a ('6')" class=" btn-30 btn-radius">6</div>
<div onclick="a ('*')" class=" btn-30 btn-radius color-blue font-14">x</div>
<div onclick="a ('/')" class=" btn-30 btn-radius color-blue font-12">÷</div>
<div onclick="a ('1')" class=" btn-30 btn-radius clear-marginleft">1</div>
<div onclick="a ('2') " class=" btn-30 btn-radius">2</div>
<div onclick="a ('3') " class=" btn-30 btn-radius">3</div>
<div onclick="operator ('pow')" class=" btn-30 btn-radius color-blue font-14">x²</div>
<div onclick="operator ('sqrt') " class=" btn-30 btn-radius color-blue font-12">√</div>
<div onclick="a ('0') " class=" btn-70 btn-radius clear-marginleft">0</div>
<div onclick="a ('.') " class=" btn-30 btn-radius">.</div>
<div onclick="e() " class=" btn-70 btn-radius color-red font-14">=</div>
</div>
</div>
<script>
input=document.getElementById('input-box');
function s(v) {
input.value = v
}
function a (v) {
input.value += v
}
function e() {
try {
s(eval (input.value))
}catch (e) {
s('Error') }}
function operator (type) {
switch (type){
case "backspace" :
var str = input.value;
str = (str !="0") ? str : "";
str = str.substr(0, str.length - 1);
str = (str != "") ? str : "o";
input.value = str;
break ;
case "opposite" :
input.value = -input.value;
break ;
}
}
</script>
</body>
</html>
|
Css文件:
如果想直接复制粘贴使用本程序，请在同级目录下创建css文件并且命名为【css.css】，如果想自定义文件名及文件路径，请在html文件中修改对应名称。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| @charset "utf-8";
#calcuator{ width:200px; height:245px; padding:10px; border:1px solid #e5e5e5; background:#f8f8f8; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius:3px; box-shadow:0px 0px 10px #f2f2f2; -moz-box-shadow:0px 0px 10px #f2f2f2; -webkit-box-shadow:0px 0px 10px #f2f2f2; margin: 0px auto; }
#calcuator #input-box{ margin:0; width:187px; padding:9px 5px; height:14px;border:1px solid #e5e5e5; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; background:#FFF; text-align:right; line-height:14px; font-size:12px; }
#calcuator #btn-list{ width:200px; overflow:hidden;}
#calcuator #btn-list .btn-radius{ border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; border:1px solid #e5e5e5; background:-webkit-gradient(linear, 0 0, 0 100%, from(#f7f7f7), to(#ebebeb)); background:-moz-linear-gradient(top, #f7f7f7,#ebebeb);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f7f7f7,endColorstr=#ebebeb,grandientType=1); line-height:29px; text-align:center; text-shadow:0px 1px 1px #FFF; font-weight:bold; font-family:Verdana, Geneva, sans-serif; color:#666; float:left; margin-left:11px; margin-top:11px; font-size:12px; cursor:pointer;}
#calcuator #btn-list .btn-radius:active{ background:#ffffff;}
#calcuator #btn-list .clear-marginleft{ margin-left:0;}
#calcuator #btn-list .font-14{ font-size:14px;}
#calcuator #btn-list .color-red{ color:#ff5050}
#calcuator #btn-list .color-blue{ color:#00b4ff}
#calcuator #btn-list .btn-30{ width:29px; height:29px;}
#calcuator #btn-list .btn-70{ width:70px; height:29px;}
|