js计算器

Posted 红叶11

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js计算器相关的知识,希望对你有一定的参考价值。

//body

<div id="maindiv">
<lable class="lbname">计算器</lable>
<div id="content">
<span id="note"></span>
<input type="text" onfocus="this.blur();" id="num" value="0">
</div>
<div id="result">
<ul>
<li>
<lable class="lb1" onclick="sin()">sin</lable>
</li>
<li>
<lable class="lb1" onclick="cos()">cos</lable>
</li>
<li>
<lable class="lb1" onclick="tan()">tan</lable>
</li>
<li>
<lable id="lb5" onclick="clearnum()">AC</lable>
</li>
</ul>
</div>
<div id="other">
<ul>
<li>
<lable class="lb2" onclick="command(1)">1</lable>
</li>
<li>
<lable class="lb2" onclick="command(2)">2</lable>
</li>
<li>
<lable class="lb2" onclick="command(3)">3</lable>
</li>
<li>
<lable class="lb3" onclick="plus()">+</lable>
</li>
<li>
<lable class="lb3" onclick="jian()">-</lable>
</li>
</ul>
<ul>
<li>
<lable class="lb2" onclick="command(4)">4</lable>
</li>
<li>
<lable class="lb2" onclick="command(5)">5</lable>
</li>
<li>
<lable class="lb2" onclick="command(6)">6</lable>
</li>
<li>
<lable class="lb3" onclick="chen()">*</lable>
</li>
<li>
<lable class="lb3" onclick="chu()">/</lable>
</li>
</ul>
<ul>
<li>
<lable class="lb2" onclick="command(7)">7</lable>
</li>
<li>
<lable class="lb2" onclick="command(8)">8</lable>
</li>
<li>
<lable class="lb2" onclick="command(9)">9</lable>
</li>
<li>
<lable class="lb3" onclick="yu()">%</lable>
</li>
<li>
<lable class="lb3" onclick="gen()">√</lable>
</li>
</ul>
<ul>
<li>
<lable class="lb2" onclick="command(0)">0</lable>
</li>
<li>
<lable class="lb2" onclick="dot()">.</lable>
</li>
<li>
<lable class="lb2" onclick="zhenfu()" value="+/-" id="zhenfu">+/-</lable>
</li>
<li>
<lable id="lb4" onclick="clearnum()">c</lable>
</li>
<li>
<lable id="lb6" onclick="equal()">=</lable>
</li>
</ul>
</div>
</div>
//CSS
body {
margin: 0px;
padding: 0px;
}

ul {
margin: 0px;
padding: 0px;
}

li {
list-style: none;
float: left;
}

#maindiv {
width: 310px;
height: 400px;
background: #2C1740;
margin: 0 auto;
}

#maindiv .lbname {
display: block;
margin-left: 30px;
color: white;
height: 30px;
text-align: left;
line-height: 30px;
}

#content {
width: 310px;
height: 100px;
background: #543382;
color: white;
padding-bottom: 0px;
padding-top: 43px;
padding-left: 250px;
box-sizing: border-box;
font-weight: bold;
}

#num {
width: 310px;
height: 20px;
line-height: 20px;
background: #543382;
border: 0;
color: white;
margin-left: -250px;
font-weight: bold;
padding-left: 250px;
box-sizing: border-box;
}

#result {
width: 310px;
height: 60px;
cursor: pointer;
}

#result .lb1, #lb5 {
display: block;
width: 75px;
height: 48px;
line-height: 48px;
background: #3D568C;
border: 1px solid black;
text-align: center;
font-weight: bold;
color: white;
}

#result .lb1:hover {
background-color: lightgray;
}

#result #lb5:hover {
background-color: lightgray;
}

#other {
width: 310px;
height: 230px;
}

#other ul li {
float: left;
}

#other .lb2 {
display: block;
width: 60px;
height: 50px;
line-height: 50px;
background: #717171;
border: 1px solid black;
text-align: center;
cursor: pointer;
color: white;
font-weight: bold;
}

#other .lb2:hover {
background-color: lightgray;

}

#other .lb3, #lb4, #lb6 {
display: block;
width: 60px;
height: 50px;
line-height: 50px;
background: #D56503;
border: 1px solid black;
text-align: center;
cursor: pointer;
color: white;
font-weight: bold;
}

#other .lb3:hover {
background-color: lightgray;
}

#other #lb4:hover {
background-color: lightgray;
}

#other #lb6:hover {
background-color: lightgray;
}

#note {
float: left;
width: 210px;
height: auto;
overflow: hidden;
color: red;
margin-left: -100px;
margin-bottom: 20px;
}
js部分
var num = 0, result = 0, numshow = "0";
var operate = 0;//判断输入状态
var calcul = 0;//判断计算状态
var quit = 0;//防止重复按键的标志
var va = document.getElementById("num");//获取输入的值
var ds = document.getElementById("zhenfu");
function command(num) {
va.value = (va.value != "0") ? ((operate == 0) ? va.value : "") : "";//
va.value = va.value + String(num);//给当前字符追加字符
va.value = va.value;//刷新显示
operate = 0;//重置输入状态
quit = 0;//防止重复输入状态
}

function dot() {
va.value = (va.value != "0") ? ((operate == 0) ? va.value : "0") : "0";
for (var i = 0; i <= va.value.length; i++) {
if (va.value.substr(i, 1) == ".")
return false;
}
va.value = va.value + ".";
va.value = va.value;
operate = 0;
}
//清除数据
function clearnum() {
num = 0;
result = 0;
numshow = "0";
va.value = "0";
}
//加法
function plus() {
calculate();//计算函数
operate = 1;//更改输入状态
calcul = 1;//更改计算状态
}
function jian() {
calculate();//计算函数
operate = 1;//更改输入状态
calcul = 2;//更改计算状态
}
function chen() {
calculate();//计算函数
operate = 1;//更改输入状态
calcul = 3;//更改计算状态
}
function chu() {
calculate();//计算函数
operate = 1;//更改输入状态
calcul = 4;//更改计算状态
}
function yu() {
va.value = va.value / 100;
operate = 1;//更改输入状态
calcul = 5;//更改计算状态
}
function equal() {
calculate();//计算函数
operate = 1;//更改输入状态
num = 0;
result = 0;
numshow = "0";
}
//开根号
function gen() {
va.value = Math.sqrt(va.value);
operate = 1;
calcul = 6;
}
//tan值
function tan() {
va.value = Math.tan(va.value);
operate = 1;
calcul = 7;
}
//正负运算
function zhenfu() {
if (ds.innerhtml == "+/-") {
va.value = -1 * va.value;
}
operate = 1;
calcul = 8;
}
function sin() {
va.value = Math.sin(va.value);
operate = 1;
calcul = 9;
}
function cos() {
va.value = Math.cos(va.value);
operate = 1;
calcul = 10;
}
function calculate() {
numshow = Number(va.value);
if (num != 0 && quit != 1) {
switch (calcul) {
case 1:
result = num + numshow;
break;
case 2:
result = num - numshow;
break;
case 3:
result = num * numshow;
break;
case 4:
if (numshow != 0)
result = num / numshow;
else {
document.getElementById("note").innerHTML = "除数不能为零!";
setTimeout(clearnote, 4000);
}
break;
case 7:
result = Math.tan(num);
break;
case 9:
result = Math.sin(num);
break;
case 10:
result = Math.cos(num);
break;
}
quit = 1;//防止重复按键
}
else {
result = numshow;
}
numshow = String(result);
va.value = numshow;
num = result;//存储当前值
}
function clearnote() {
document.getElementById("note").innerHTML = "";
}




















































































































































































































































































































































































以上是关于js计算器的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段9——JS中的面向对象编程

js代码片段: utils/lcoalStorage/cookie

JS代码片段:一个日期离现在多久了

js常用代码片段(更新中)

js常用代码片段

Chrome-Devtools代码片段中的多个JS库