JavaScript实例--实现计算器
- 格式：pdf
- 大小：104.22 KB
- 文档页数：4
JavaScript实例--实现计算器⽬录⼀、实例代码⼆、实例演⽰三、实例剖析
⼀、实例代码
HTML：
Document
CSS：
* {
border: none;/*去除默认边框*/
font-family: 'Open Sans', sans-serif;/*更改字体*/
margin: 0;/*去除默认外边距*/
padding: 0;/*去除默认内边距*/
}
.center {
background-color: #fff;
border-radius: 50%;/*圆⾓*/
height: 600px;/*计算器总⾼度*/ margin: auto;/*⽔平居中*/
width: 600px;/*宽度*/
}
h1 {/*修改标题样式*/
color: #495678;/*字体颜⾊*/
font-size: 30px; /*字体⼤⼩*/
margin-top: 20px;/*顶部外边距*/
padding-top: 50px;/*顶部内边距*/
display: block;/*修改为块级元素，独占⼀⾏*/
text-align: center;/*⽂字居中*/
text-decoration: none;/*去除默认⽂字样式*/
}
a {/*这是标题下⾯⼀块位置，点击可以跳转到github的仓库地址*/
color: #495678;
font-size: 30px;
display: block;
text-align: center;
text-decoration: none;
padding-top: 20px;
}
form {/*定义表单区域的样式*/
background-color: #495678;/*背景颜⾊*/
box-shadow: 4px 4px #3d4a65;/*阴影*/
margin: 40px auto;/*定义外边距*/
padding: 40px 0 30px 40px; /*定义内边距*/
width: 280px;/*宽度*/
/*⾼度由内容撑起*/
}
.btn {/*定义每个数字按钮的格式*/
outline: none;/*清除默认边框样式*/
cursor: pointer;/*定义⿏标移上时变成⼿的图案，使⽤户知道可点击*/
font-size: 20px;/*字体⼤⼩*/
height: 45px;/*按钮⾼度*/
margin: 5px 0 5px 10px;/*外边距*/
width: 45px;/*按钮宽度*/
}
.btn:first-child {
margin: 5px 0 5px 10px;/*第⼀个按钮特殊*/
}
.btn, #display, form {/*按钮，⽂本输⼊框和整个表单区域*/
border-radius: 25px;/*圆⾓*/
}
/*定义输⼊框*/
#display {
outline: none;/*清除默认边框样式*/
background-color: #98d1dc;/*背景颜⾊*/
box-shadow: inset 6px 6px 0px #3facc0;/*阴影*/
color: #dededc;/*内部⽂本颜⾊*/
font-size: 20px;/*⽂本⼤⼩*/
height: 47px;/*输⼊框⾼度*/
text-align: right;/*⽂本右对齐*/
width: 165px;/*定义宽度*/
padding-right: 10px;/*右内边距*/
margin-left: 10px;/*左外边距*/
}
.number {/*定义数字的按钮*/
background-color: #72778b;/*背景颜⾊*/
box-shadow: 0 5px #5f6680;/*阴影*/
color: #dededc;/*数字颜⾊*/
}
.number:active {/*选中数字样式，就是点击数字的动态效果*/
box-shadow: 0 2px #5f6680; -webkit-transform: translateY(2px);
-ms-transform: translateY(2px);
-moz-tranform: translateY(2px);
transform: translateY(2px);
/*这四个其实是⼀样的，这是为了兼容不同的浏览器，效果就是向上移动2px距离
需要配合js，点击时赋active，点击后抹掉
*/
}
.operator {/*定义运算符按钮*/
background-color: #dededc;/*背景颜⾊*/
box-shadow: 0 5px #bebebe;/*阴影*/
color: #72778b;/*运算符颜⾊*/
}
.operator:active {/*定义运算符点击时*/
/*这个⽐数字点击多了⼀个，就是把下⾯的阴影减少了⼀点*/
box-shadow: 0 2px #bebebe;
-webkit-transform: translateY(2px);
-ms-transform: translateY(2px);
-moz-tranform: translateY(2px);
transform: translateY(2px);
}
.other {/*定义归零键和=键*/
background-color: #e3844c;/*背景颜⾊*/
box-shadow: 0 5px #e76a3d;/*阴影*/
color: #dededc;/*符号颜⾊*/
}
.other:active {/*点击效果和点击运算符⼀样*/
box-shadow: 0 2px #e76a3d;
-webkit-transform: translateY(2px);
-ms-transform: translateY(2px);
-moz-tranform: translateY(2px);
transform: translateY(2px);
}
JavaScript：
/* limpa o display */
document.getElementById("clear").addEventListener("click", function() {
document.getElementById("display").value = "";
});
/* recebe os valores */
function get(value) {
document.getElementById("display").value += value;
}
/* calcula */
function calculates() {
var result = 0;
result = document.getElementById("display").value;
document.getElementById("display").value = "";
document.getElementById("display").value = eval(result);
};
⼆、实例演⽰页⾯加载后，显⽰⼀个计算器的页⾯，可以进⾏正常的四则运算运算结果：也可以归零，加⼩数等等操作
三、实例剖析
