//style样式代码
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
font-size: 20px;
}
.calculator {
width: 326px;
height: 460px;
margin: 80px auto;
background-color: #368590;
border-radius: 5px;
box-shadow: 0 2px 15px black;
overflow: hidden;
}
.calculator .c_screen {
position: relative;
width: 326px;
height: 110px;
background-color: #96a4c2;
border-radius: 5px;
box-shadow: inherit;
}
.calculator .c_screen>p {
position: absolute;
top: 50%;
margin-top: -28px;
width: 236px;
text-align: center;
word-break: break-all;
color: #fff;
font-size: 20px;
font-weight: bold;
padding: 10px 45px;
}
.calculator .c_row {
margin: 0 23px;
}
button {
cursor: pointer;
width: 60px;
height: 45px;
margin: 20px 2px 0;
border: 0px;
border-radius: 5px;
color: #fff;
background-color: #2b2f5b;
outline: none;
}
button::selection {
color: #fff;
}
button:active {
box-shadow: 0 0 5px 5px dodgerblue;
}
.c_func_btn {
background: linear-gradient(to bottom, rgba(252, 156, 23, 1) 0%, rgba(247, 126, 27, 1) 100%);
}
.d {
width: 60px;
height: 110px;
float: right;
position: relative;
bottom: 66px;
right: 32px;
}
.z {
width: 129px;
height: 45px;
}
</style>
//body代码
<body>
<div class="calculator">
<div class="c_screen">
<p></p>
</div>
<div class="c_btn_wrapper">
<div class="c_row"> <button class="c_func_btn">/</button> <button class="c_func_btn">*</button> <button class="c_func_btn">CE</button> <button class="c_func_btn">AC</button> </div>
<div class="c_row"> <button>7</button> <button>8</button> <button>9</button> <button class="c_func_btn">+</button> </div>
<div class="c_row"> <button>4</button> <button>5</button> <button>6</button> <button class="c_func_btn">-</button> </div>
<div class="c_row"> <button>1</button> <button>2</button> <button>3</button> </div> <button class="c_func_btn d">=</button>
<div class="c_row"> <button class="z">0</button> <button>.</button> </div>
</div>
</div>
<script>
var btnList = document.getElementsByTagName('button');
var show = document.getElementsByTagName('p')[0];
var symbolB = false; //记录符号
var symbol = null;
//记录a值,b值,记录结果,保存计算结果
var aNum = 0,
bNum = 0,
result = 0,
resultCookic = 0;
for(var i = 0, len = btnList.length; i < len; i++) {
btnList[i].onclick = function() {
//结果
if(this.innerText == '=') {
console.log(aNum, bNum);
getResult(symbol, aNum, bNum);
show.innerHTML = result;
console.log("result" + result);
resultCookic = result;
result = 0;
aNum = 0;
bNum = 0;
symbolB = false;
} else {
//初始化和归零
if(this.innerText == 'AC') {
//初始化所有值
initAll();
show.innerText = "";
return;
} else if(this.innerText == 'CE') {
//初始化所有值
initAll();
show.innerText = result;
return;
} else if(this.innerText == '+' || this.innerText == '-' || this.innerText == '*' || this.innerText == '/') {
// a,b 两个数都有了但是没有计算结果而是又进行了点击
if(bNum != 0) {
console.log("sy: " + symbol);
getResult(symbol, aNum, bNum);
// 把上次计算的结果给 a
aNum = result;
bNum = 0;
show.innerText = aNum;
console.log("a: " + aNum);
}
//如果点击了符号按钮,那么之后输入的值就是b值
//记录符号
symbol = this.innerText;
symbolB = true;
} else { // 点击其他的数字按钮
if(symbolB == false) { // 没有点击运算按钮, 记录数字 a 的值
console.log("innerText: " + this.innerText);
aNum += this.innerHTML;
console.log("aNum: " + aNum);
show.innerText = Number(aNum);
} else { // 点击了运算符号
// 计算完一次结果,再次点击符号按钮进行计算,就把上一次的计算结果赋值给a
if(aNum == 0) {
aNum = resultCookic;
console.log("计算一次结果后: " + aNum);
}
bNum += this.innerText;
console.log("bNum: " + bNum);
show.innerText = Number(bNum);
}
}
}
}
}
//初始化所有值
function initAll() {
result = 0;
resultCookic = 0;
aNum = 0;
bNum = 0;
}
/**
* 判断符号计算结果
* @param {Object} symbol
* @param {Object} aNum
* @param {Object} bNum
*/
function getResult(symbol, aNum, bNum) {
switch(symbol) {
case "+":
addition(aNum, bNum);
break;
case "-":
subtraction(aNum, bNum);
break;
case "*":
multiplication(aNum, bNum);
break;
case "/":
division(aNum, bNum);
break;
}
}
/** * 加法
* @param a{number}
* @param b{number}
* */
function addition(a, b) {
result = Number(a) + Number(b);
}
/** * 减法
* * @param a{number}
* * @param b{number} */
function subtraction(a, b) {
result = Number(a) - Number(b);
}
/** * 乘法 * @param a{number} * @param b{number} */
function multiplication(a, b) {
result = Number(a) * Number(b);
}
/** * 除法 * @param a{number} * @param b{number} */
function division(a, b) {
result = Number(a) / Number(b);
}
</script>
</body>
JS 实现计算器功能
猜你喜欢
转载自blog.csdn.net/weixin_39200549/article/details/82873535
今日推荐
周排行