用html div来制作制作一个计算器表,CSS3制作漂亮的计算器

插件描述：原生js CSS3制作漂亮的计算器_加减乘除计算器代码

实现代码html>

JS+CSS3实现计算器特效

C

7

8

9

+

4

5

6

-

1

2

3

÷

0

.

=

x

jsvar keys = document.querySelectorAll('#calculator span');

var operators = ['+', '-', 'x', '÷'];

var decimalAdded = false;

for(var i = 0; i 

keys[i].onclick = function(e) {

var input = document.querySelector('.screen');

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;

}

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();

}

}