javascript白色计算器实现代码

发布时间:2019-07-17编辑:脚本学堂
一款javascript简单计算器代码,白色的简洁型计算器,白色简洁样式计算器js代码,在网页上放置一个输入框及多个计算器按钮,通过js脚本来实现计算器功能。

javascript白色计算器代码

效果:
javascript白色计算器

1、html部分,在网页上放置一个输入框及多个计算器按钮。
 

复制代码 代码示例:
<div id="calcuator">
<input type="text" id="input-box" value="0" size="21" maxlength="21" readonly="readonly" />
<div id="btn-list">
<div onclick="operator('clear')" class=" btn-30 btn-radius color-red clear-marginleft">
C</div>
<div onclick="operator('opposite')" class=" btn-30 btn-radius color-blue">
+/-</div>
<div onclick="operator('percent')" class=" btn-30 btn-radius color-blue">
%</div>
<div onclick="operator('backspace')" class=" btn-70 btn-radius color-red font-14">
←</div>
<div onclick="typetoinput('7')" class=" btn-30 btn-radius clear-marginleft">
7</div>
<div onclick="typetoinput('8')" class=" btn-30 btn-radius">
8</div>
<div onclick="typetoinput('9')" class=" btn-30 btn-radius">
9</div>
<div onclick="operator('plus')" class=" btn-30 btn-radius color-blue font-14">
+</div>
<div onclick="operator('minus')" class=" btn-30 btn-radius color-blue font-14">
-</div>
<div onclick="typetoinput('4')" class=" btn-30 btn-radius clear-marginleft">
4</div>
<div onclick="typetoinput('5')" class=" btn-30 btn-radius">
5</div>
<div onclick="typetoinput('6')" class=" btn-30 btn-radius">
6</div>
<div onclick="operator('multiply')" class=" btn-30 btn-radius color-blue font-14">
×</div>
<div onclick="operator('divide')" class=" btn-30 btn-radius color-blue font-12">
÷</div>
<div onclick="typetoinput('1')" class=" btn-30 btn-radius clear-marginleft">
1</div>
<div onclick="typetoinput('2')" class=" btn-30 btn-radius">
2</div>
<div onclick="typetoinput('3')" class=" btn-30 btn-radius">
3</div>
<div onclick="operator('pow')" class=" btn-30 btn-radius color-blue font-14">
×2</div>
<div onclick="operator('sqrt')" class=" btn-30 btn-radius color-blue font-12">
√</div>
<div onclick="typetoinput('0')" class=" btn-70 btn-radius clear-marginleft">
0</div>
<div onclick="typetoinput('.')" class=" btn-30 btn-radius">
.</div>
<div onclick="operator('result')" class=" btn-70 btn-radius color-red font-14">
=</div>
</div>
</div>

2、js代码,根据操作类型作相应操作:
 

复制代码 代码示例:
function operator(type) {
switch (type) {
case "clear":
input.value = "0";
_string.length = 0;
/*document.getElementById("ccc").innerHTML="";
for(i=0;i<_string.length;i++)
{
document.getElementById("ccc").innerHTML+=_string[i]+" "
}*/
break;
case "backspace":
if (checknum(input.value) != 0) {
input.value = input.value.replace(/.$/, '');
if (input.value == "") {
input.value = "0";
}
}
break;
case "opposite":
if (checknum(input.value) != 0) {
input.value = -input.value;
}
break;
case "percent":
if (checknum(input.value) != 0) {
input.value = input.value / 100;
}
break;
case "pow":
if (checknum(input.value) != 0) {
input.value = Math.pow(input.value, 2);
}
break;
case "sqrt":
if (checknum(input.value) != 0) {
input.value = Math.sqrt(input.value);
}
break;
case "plus":
if (checknum(input.value) != 0) {
_string.push(input.value);
_type = "plus"input.value = "+";
input.name = "type";
}
break;
case "minus":
if (checknum(input.value) != 0) {
_string.push(input.value);
_type = "minus"input.value = "-";
input.name = "type";
}
break;
case "multiply":
if (checknum(input.value) != 0) {
_string.push(input.value);
_type = "multiply"input.value = "×";
input.name = "type";
}
break;
case "divide":
if (checknum(input.value) != 0) {
_string.push(input.value);
_type = "divide"input.value = "÷";
input.name = "type";
}
break;
case "result":
if (checknum(input.value) != 0) {
_string.push(input.value);
if (parseInt(_string.length) % 2 != 0) {
_string.push(_string[_string.length - 2])
}
if (_type == "plus") {
input.value = parseFloat(result(_string)[0]) + parseFloat(result(_string)[1]);
input.name = "type"
} else if (_type == "minus") {
input.value = parseFloat(result(_string)[0]) - parseFloat(result(_string)[1]);
input.name = "type"
} else if (_type == "multiply") {
input.value = parseFloat(result(_string)[0]) * parseFloat(result(_string)[1]);
input.name = "type"
} else if (_type == "divide") {
input.value = parseFloat(result(_string)[0]) / parseFloat(result(_string)[1]);
input.name = "type"
}
break;
}
}
}

更多教程,请关注:javascript计算器专题教程