点击查看原文
在别人代码基础上修改的看源代码请点击上方链接
需求：制作web版计算器，要求实现±*%和平方，开方。
优化归零的问题
支持正负数；
修复多个多个运算符号导致不能计算的bug;
多个小数点的bug，
自然数e的问题，
0.1，0.2，0.04等小数在使用Math.pow(value, 几次幂) 函数开2次幂，3次幂时的问题
这个版本只能进行7位数以下的开方和次幂，18位数的结果显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算器</title>
</head>
<body>
<div id="calculator">
<div id="c_title"><h2>计算器</h2></div>
<div id="c_text">
<input type="text" id="text" value="0" readonly="readonly" />
</div>
<div id="c_value">
<ul>
<li onclick="eq1(2)" class="c_blue">x²</li>
<li onclick="eq1(3)" class="c_blue">x³</li>
<li onclick="eq1(1/2)" class="c_blue">²√x</li>
<li onclick="eq1(1/3)" class="c_blue">³√x</li>
<li onclick="eq5()" class="c_blue">帮助</li>
<li onclick="get(7)">7</li>
<li onclick="get(8)">8</li>
<li onclick="get(9)">9</li>
<li onclick="goBack()" class="c_blue">←</li>
<li onclick="clearText()" class="c_blue">C</li>
<li onclick="get(4)">4</li>
<li onclick="get(5)">5</li>
<li onclick="get(6)">6</li>
<li onclick="get('*')" class="c_blue">×</li>
<li onclick="get('/')" class="c_blue">÷</li>
<li onclick="get(1)">1</li>
<li onclick="get(2)">2</li>
<li onclick="get(3)">3</li>
<li onclick="get('+')" class="c_blue">+</li>
<li onclick="get('-')" class="c_blue">-</li>
<li onclick="get(0)">0</li>
<li onclick="get('00')">00</li>
<li onclick="get('.')">.</li>
<li onclick="get('%')" class="c_blue">% </li>
<li onclick="eq()" class="c_yellow">=</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
var IsClear = false;
var cal = false;
function get(key) {
var str = document.getElementById("text").value;
var rr = str.substr(str.length - 1, 1); //获取最后一位字符
if (IsClear) {
str = "0";
IsClear = false;
cal = false;
}
if (str.length < 20) {
str = (str == "0" && key != "." ? "" : str);
if (str == "" && key == '00') {
str = "0";
} else {
if (isNaN(key)) {//不是数字类型
//是不是小数点
if (key == ".") {
if (isNaN(rr)) {//也不是数字类型
document.getElementById("text").value = str;
} else {
if (cal) {
document.getElementById("text").value = str;
} else {
str += key;
document.getElementById("text").value = str;
}
}
cal = true;
} else {
cal = false;
if (isNaN(rr)) {//也不是数字类型
document.getElementById("text").value = str;
} else {
str += key;
document.getElementById("text").value = str;
}
}
} else {
str += key;
document.getElementById("text").value = str;
}
}
}
}
function goBack(){
var str = document.getElementById("text").value;
var rr = str.substr(str.length - 1, 1); //获取最后一位字符
if (rr == ".") { cal = false; }
str = str.substring(0,str.length-1);
if(str=="") str="0";
document.getElementById("text").value = str;
}
function clearText(){
document.getElementById("text").value = "0";
}
function eq1(zds){
var result;
// IsClear = true; //计算之后是否归零
var str = document.getElementById("text").value;
if (str.length < 7) {
var value = eval(str)
if (value >= 0) {
result = Math.pow(value, zds);
} else {
result = - Math.pow(-value, zds);
}
if (result == "Infinity") {
IsClear = true;
result = "输入有误";
} else if (result.toString().length > 10) {
result = getBit(result, 10);
result = eval(result);
}
} else { IsClear = true; result = "数据太大结果超出";}
document.getElementById("text").value = result;
}
function getBit(value, bit) {
let str = value.toString();
let strIndex = str.indexOf('.');
if (strIndex === -1) return str;
str = str.substring(0, strIndex + bit);
console.log(str, bit);
return str;
}
function eq5(){
IsClear = true;
result = "支持正负数，修复多个运算符号不能计算bug，如还有问题联系：17673130936（彭旭）";
document.getElementById("text").value = result;
}
function eq(){
// IsClear = true; //计算之后是否归零
var str = document.getElementById("text").value;
if (str.length < 18) {
// 如果第一位不是数字类型去掉第一位
var aa = str.substr(0,1);
if(isNaN(aa) && aa != "-"){ str = str.substring(1,str.length); }
// 如果最后一位不是数字类型去掉最后一位
var zz= str.substr(str.length-1,1);
if (isNaN(zz)){ str = str.substring(0,str.length-1); }
var result = eval(str)
if(result == "Infinity"){
IsClear = true;
result = "输入有误";
}
} else { IsClear = true; result = "数据太大结果超出"; }
document.getElementById("text").value = result;
}
</script>
<style type="text/css">
body{
padding: 0;margin: 0;
background-color:#49C593 ;
}
#calculator{
position: absolute;
width: 1200px;height: 620px;
left: 50%;top: 50%;
margin-left: -600px;
margin-top: -310px;
}
#calculator #c_title {
margin: auto;
/*margin-left: 300px;*/
width: 800px;
height: 80px;
}
#calculator #c_title h2{
text-align: center;
font-size: 33px;font-family: "微软雅黑";color: #666;
line-height: 30px;
}
#c_text{
width: 1000px;
margin: auto;
}
#calculator #c_text #text{
/*margin-left: 200px;*/
padding-right: 10px;
width: 1000px;
height: 50px;
font-size: 25px;font-family: "微软雅黑";color: #666666;
text-align: right;border: 1px white;
border: double 1px;
}
#calculator #c_value{
width: 1080px;height: 408px;
/*margin-left: 160px;*/
margin: 20px auto;
}
#calculator #c_value ul{
margin: 0;
}
#calculator #c_value ul li{
margin: 10px;
list-style: none;float: left;
width: 180px;height: 80px;line-height: 80px;
text-align: center;background-color: chartreuse;
border: 1px solid black;
font-size: 30px;font-family: "微软雅黑";color: #666;
box-shadow: 5px 5px 30px rgba(0,0,0,0.4);
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
}
#calculator #c_value ul li:active{
background-color: white;
}
#calculator #c_value ul li:hover{
opacity:0.8;
cursor:pointer;
}
#calculator #c_value ul .c_blue{
background-color: cornflowerblue;color: #000000;
}
#calculator #c_value ul .c_yellow{
background-color: #f9f900;color: #000000;
}
</style>
</html>
版权声明：本文为qq_38762411原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。