首页 > > 网页制作 > css >

不完善迷你计算器

2018-06-24 00:40:11来源：未知阅读 ()

html代码：

<!DOCTYPE html PUBspanC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/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 href="style.css" rel="stylesheet" style="text/css" />
<script src="calculator.js" type="text/javascript"></script>
</head>

css代码：

@charset "utf-8";
/* CSS Document */
* { margin:0px;
padding:0px;
box-sizing: border-box;
font: bold 14px Arial;
}
/*整个文档流背景的一个扩散*/
html {
height: 100%;
background: white;
background: radial-gradient(circle, #fff 30%, #ccc);
background-size: cover;
}
/* 定义整个包裹盒子的宽度样式 */
#box {
width:340px;
margin:120px auto;
padding:20px 20px 9px;

background:#9CF;
background:linear-gradient(#9CF, #8bceec);
border-radius:4px;
box-shadow: 0px 4px #009de4, 0px 10px 15px rgba(0, 0, 0, 0.5);
}

#top .show {
width:212px;
height:40px;
float:right;
margin-right:15px;
padding:0 10px;
background: rgba(0, 0, 0, 0.2);
border-radius: 3px;
box-shadow: inset 0px 4px rgba(0, 0, 0, 0.2);

font-size: 17px;
line-height: 40px;
color: white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
text-align: right;
letter-spacing: 1px;
}

/* 清除父级的浮动 */
#keys, #top {overflow: hidden;}

/* 定义清除建和其他的数字键以及运算符号键的样式 */
#keys span, #top span.clear {
float: left;
position: relative;
top: 0;
cursor: pointer;
width: 66px;
height: 36px;
background: white;
border-radius: 3px;
box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
margin: 0 7px 11px 0;
color: #888;
line-height: 36px;
text-align: center;
}

/* 定义符号键的样式 */
#keys span.operator {
background: #FFF0F5;
margin-right: 0;
}

/* 鼠标移入所有的span标签显示的效果 */
#keys span:hover{
background: #9c89f6;
box-shadow: 0px 4px #6b54d3;
color: white;
}

#top span.clear {
background: #ff9fa8;
box-shadow: 0px 4px #ff7c87;
color: white;
}
/* 鼠标移入清除键所显示的效果 */
#top span.clear:hover{
background:#f68991;
box-shadow:0px 4px #d3545d;
color:#ffffff;
}

#keys span.eval {
background: #f1ff92;
box-shadow: 0px 4px #9da853;
color: #888e5f;
}

/* 鼠标移入计算符号键所显示的效果 */
#keys span.eval:hover {
background:#abb850;
box-shadow:0px 4px #717a33;
color:#ffffff;
}

/* 鼠标点击计算器的键过后，让所有的键阴影为0有一个下沉的效果 */
#keys span:active {
box-shadow: 0px 0px #6b54d3;
top: 4px;
}

#keys span.eval:active {
box-shadow: 0px 0px #717a33;
top: 4px;
}

#top span.clear:active {
top: 4px;
box-shadow: 0px 0px #d3545d;
}

js代码：

// JavaScript Document
window.onload = function(){
//获取所有的键
var keys = document.querySelectorAll('#box span');
var operators = ['+','-','*','÷'];
var decimalAdded = false;

//给所有的键添加点击事件
for(var i = 0; i < keys.length; i++) {
keys[i].onclick = function(e) {
var input = document.querySelector('.show');
var inputVal = input.innerHTML;
var btnVal = this.innerHTML;

//根据用户点击的键值来判断用什么运算符和输出结果
if(btnVal == 'C') {
input.innerHTML = '';
decimalAdded = false;
}
else if(btnVal == '=') {
var equation = inputVal;
var lastChar = equation[equation.length - 1];
equation = equation.replace(/x/g, '*').replace(/÷/g, '/');

if(operators.indexOf(lastChar) > -1 || lastChar == '.')
equation = equation.replace(/.$/, '');

if(equation)
input.innerHTML = eval(equation);

decimalAdded = false;
}

// IE9+ 下显示
else if(operators.indexOf(btnVal) > -1) {
var lastChar = inputVal[inputVal.length - 1];
if(inputVal != '' && operators.indexOf(lastChar) == -1)
input.innerHTML += btnVal;
else if(inputVal == '' && btnVal == '-')
input.innerHTML += btnVal;
if(operators.indexOf(lastChar) > -1 && inputVal.length > 1) {
input.innerHTML = inputVal.replace(/.$/, btnVal);
}

decimalAdded =false;
}
else if(btnVal == '.') {
if(!decimalAdded) {
input.innerHTML += btnVal;
decimalAdded = true;
}
}
else {
input.innerHTML += btnVal;
}
e.preventDefault();
}
}
};