JavaScript实战——简单计算器

这是我上课老师教的一个简单的小程序

效果图如下：

 上代码**************************************************************************

HTML文件

 //这儿是css路径，代表css文件夹下的css.css文件
C
+/-
%
←
7
8
9
+
-
 
4
5
6
*
/
1
2
3
x²
根号
0
.
=
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 : "0";break;case "opposite":input.value=-input.value;break;case "percent":input.value=input.value/100;break;case "pow":input.value=Math.pow(input.value,2);break;case "sqrt":input.value=Math.sqrt(input.value);break; }}

CSS布局文件代码

在html文件同目录下创建名为css的文件夹，在css文件见内创建css.css文件，把代码复制粘贴进去，如果自己改名了记得在html文件中也修改成对应文件名。

@charset "utf-8"; /*css--层叠样式表，让网页好看点*/ #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;}