不完善迷你计算器
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>迷你計(jì)算器</title>
<link href="style.css" rel="stylesheet" style="text/css" />
<script src="calculator.js" type="text/javascript"></script>
</head>
<body>
<!-- 外部的大盒子 -->
<div id = "box">
<div id = "top">
<span class = "clear">C</span>
<!-- 用于顯示用戶輸入結(jié)果 -->
<div class = "show"></div>
</div>
<!-- 計(jì)算器按鍵 -->
<div id="keys">
<span>7</span>
<span>8</span>
<span>9</span>
<span class = "operator"> </span>
<span>4</span>
<span>5</span>
<span>6</span>
<span class = "operator">-</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span class = "operator">×</span>
<span>0</span>
<span>.</span>
<span class = "eval">=</span>
<span class = "operator">÷</span>
</div>
</div>
</body>
</html>
?
?
css代碼：
@charset "utf-8";
/* CSS Document */
* { margin:0px;
padding:0px;
box-sizing: border-box;
font: bold 14px Arial;
}
/*整個(gè)文檔流背景的一個(gè)擴(kuò)散*/
html {
height: 100%;
background: white;
background: radial-gradient(circle, #fff 30%, #ccc);
background-size: cover;
}
/* 定義整個(gè)包裹盒子的寬度樣式 */
#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;
}
/* 清除父級(jí)的浮動(dòng) */
#keys, #top {overflow: hidden;}
/* 定義清除建和其他的數(shù)字鍵以及運(yùn)算符號(hào)鍵的樣式 */
#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;
}
/* 定義符號(hào)鍵的樣式 */
#keys span.operator {
background: #FFF0F5;
margin-right: 0;
}
/* 鼠標(biāo)移入所有的span標(biāo)簽顯示的效果 */
#keys span:hover{
background: #9c89f6;
box-shadow: 0px 4px #6b54d3;
color: white;
}
#top span.clear {
background: #ff9fa8;
box-shadow: 0px 4px #ff7c87;
color: white;
}
/* 鼠標(biāo)移入清除鍵所顯示的效果 */
#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;
}
/* 鼠標(biāo)移入計(jì)算符號(hào)鍵所顯示的效果 */
#keys span.eval:hover {
background:#abb850;
box-shadow:0px 4px #717a33;
color:#ffffff;
}
/* 鼠標(biāo)點(diǎn)擊計(jì)算器的鍵過(guò)后，讓所有的鍵陰影為0有一個(gè)下沉的效果 */
#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;
//給所有的鍵添加點(diǎn)擊事件
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;
//根據(jù)用戶點(diǎn)擊的鍵值來(lái)判斷用什么運(yùn)算符和輸出結(jié)果
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();
}
}
};
?
總結(jié)
