[已解决]简易计算器

真的只会一点点 · 发表于 2020-11-3 22:32:56

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

如何让计算器中等式和结果一起显示而不是结果代替等式，求助，谢谢。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算器</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="box-1">
         <div class="box-2">
        <input type="text" name="" class="bag" id="input-box" value="0" maxlength="21" readonly="readonly">
        <div class="bag-2">
        <div onclick="a('1')" class="little-box">1</div>
        <div onclick="a('2')" class="little-box">2</div>
        <div onclick="a('3')" class="little-box">3</div>
        <div onclick="operator('backspace')" class="little-box">←</div>
        <div onclick="a('+')" class="little-box">+</div>
         </div>
        <div class="bag-2">
        <div onclick="a('4')" class="little-box">4</div>
        <div onclick="a('5')" class="little-box">5</div>
        <div onclick="a('6')" class="little-box">6</div>
        <div onclick="operator('pow')" class="little-box">x2</div>
        <div onclick="a('-')" class="little-box">-</div>
        </div>
        <div class="bag-2">
        <div onclick="a('7')" class="little-box">7</div>
        <div onclick="a('8')" class="little-box">8</div>
        <div onclick="a('9')" class="little-box">9</div>
        <div onclick="operator('opposite')" class="little-box">+/-</div>
        <div onclick="a('*')" class="little-box">*</div>
        </div>
        <div class="bag-2">
        <div onclick="a('.')" class="little-box">.</div>
        <div onclick="a('0')" class="little-box">0</div>
        <div onclick="e()" class="little-box">=</div>
        <div onclick="operator('sqrt')"  class="little-box">√</div>
        <div onclick="a('/')" class="little-box">/</div>
        </div>

      </div>
</div>
<script>
input = document.getElementById('input-box');

function s(v) {
input.value = v
}

function a(v) {
input.value += v
}

function e() {

try {
s(eval(input.value))
} catch (e) {
s('Error')
}
}

function operator(type) {
switch (type) {
case "backspace":
var str = input.value;
//str = (str != "0") ? str : "";
str = str.substr(0, str.length - 1);
str = (str != "") ? str : "0";
input.value = str;
break;
case "opposite":
input.value = -input.value;
break;
case "percent":
input.value = input.value / 100;
break;
case "pow":
input.value = Math.pow(input.value, 2);
break;
case "sqrt":
input.value = Math.sqrt(input.value);
break;
}
}
</script>
</body>
</html>

以下是css代码
* {
margin: 0;
padding: 0;

}
.box-1{
width: 901px;
height: 647px;
background-color: #000;
z-index: 2;
margin-left: 333px;
margin-top: 20px;

}
.box-2{
width: 649px;
height: 566px;
background-color: #ffff;
padding-left: 86px;
padding-top: 41px;
  margin: 80px;
}
.bag{
height: 80px;
width: 569px;
background-color: #eeeeeb;
padding-top: 20px;
padding-left: 20px;
}
.bag-2{
height: 98px;
width: 569px;
margin: 10px;
background-color: #ffff;

}
.little-box{
margin: 10px;
float: left;
width: 83px;
height: 85px;
padding-left: 10px;
background-color: #eeeeeb;
text-align: center;
font-size: 14px;

}

最佳答案

月排行榜 / 总排行榜

kogawananari

2020-11-4 08:49:56

多行屏幕显示一行显示算式一行显示结果每次按【=】就复制
贴一个我以前写的

<style>
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
body {
background-color: #eee;
}
.frame {
width: 500px;
height: 600px;
margin: 50px auto;
background-color: #ccc;
box-shadow: 0 0 10px #000;
padding: 4px;
border-radius: 6px;
}
.numberOutput {
width: 498px;
background-color: #eee;
}
.numberOutput p {
display: flex;
flex-direction: row-reverse;
font-size: 48px;
overflow-y: hidden;
height: 75px;
}
.numberInput {
float: left;
width: 500px;
height: 360px;
background-color: #fff;
}
.numberInput li {
float: left;
width: 121px;
line-height: 86px;
text-align: center;
font-size: 35px;
background-color: #aaa;
border: 2px solid #ccc;
cursor: pointer;
}
.numberInput li:hover {
background-color: #ccc;
}
</style>
<script>
window.onload = function () {
let num = document.getElementsByClassName("num")
let btn = document.getElementsByClassName("btn")
let vw = document.getElementsByClassName("output")[1]
let vwH = document.getElementsByClassName("output")[0]
for (let i = 0; i < num.length; i++) {
num[i].onclick = function () {
vw.innerHTML += num[i].innerHTML
}
}
btn[0].onclick = function () {
vw.innerHTML = vw.innerHTML.substr(0, vw.innerHTML.length - 1)
}
btn[1].onclick = function () {
location.reload(); //刷新页面
}
btn[2].onclick = function () {
if (vw.innerHTML.indexOf('%') !== -1) { //这个百分数结果并不能在下次运算中使用除非退格删掉
vw.innerHTML = 'error'
} else if (vw.innerHTML.indexOf('e') !== -1) { //error没删干净强制刷新
location.reload();
} else {
vwH.innerHTML = vw.innerHTML + '×100%'
vw.innerHTML = Number(vw.innerHTML) * 100 + '%'
}
}
btn[3].onclick = function () {
if (vw.innerHTML.indexOf('%') !== -1) { //这个百分数结果并不能在下次运算中使用除非退格删掉
vw.innerHTML = 'error'
} else if (vw.innerHTML.indexOf('e') !== -1) { //error没删干净强制刷新
location.reload();
} else {
vwH.innerHTML = 'sqrt(' + vw.innerHTML + ')'
vw.innerHTML = Number(vw.innerHTML) ** 0.5
}
}
function floatBase(numA, numB) { //浮点数运算问题
let aLastIndex = String(numA).length - 1
let bLastIndex = String(numB).length - 1
let aFloLen = aLastIndex - (Number.isInteger(numA * 1) ? aLastIndex : String(numA).indexOf('.'))
let bFloLen = bLastIndex - (Number.isInteger(numB * 1) ? bLastIndex : String(numB).indexOf('.'))
return 10 ** (aFloLen > bFloLen ? aFloLen : bFloLen)
}
function computed(numA, numB, sym, base) { //定义中文及自定义运算符号
switch (sym) {
case '＋':
return (numA * base + numB * base) / base
break;
case '－':
return (numA * base - numB * base) / base
break;
case '×':
return (numA * base * (numB * base)) / base ** 2
break;
case '÷':
return numA * base / (numB * base)
break;
//default:
}
}
function evaluation(arr, s = 0, e = arr.length) {
let arr2 = arr.slice(s, e)
let symArr1 = arr2.filter(z => (z === '×' || z === '÷')) //回调函数filter() 定义运算优先级
let symArr2 = arr2.filter(z => (z === '＋' || z === '－'))
while (1) {
let idx, base, sym, res;
let first = symArr1.shift() || symArr2.shift()
if (!first) { break }
idx = arr2.indexOf(first)
sym = first
base = floatBase(arr2[idx - 1], arr2[idx + 1])
res = computed(arr2[idx - 1], arr2[idx + 1], sym, base)
arr2.splice(idx - 1, 3, res)
}
return arr2.shift()
}
btn[18].onclick = function () {
vwH.innerHTML = vw.innerHTML
if (vw.innerHTML.indexOf('%') !== -1) { //这个百分数结果并不能在下次运算中使用除非退格删掉
vw.innerHTML = 'error'
} else if (vw.innerHTML.indexOf('I') !== -1) { //Infinity没删干净强制刷新
location.reload();
} else if (vw.innerHTML.indexOf('e') !== -1) { //error没删干净强制刷新
location.reload();
} else if (vw.innerHTML.indexOf('N') !== -1) { //NaN没删干净强制刷新
location.reload();
} else {
vw.innerHTML = vw.innerHTML.replace(/\＋/g, ',＋,').replace(/\－/g, ',－,').replace(/\×/g, ',×,').replace(/\÷/g, ',÷,');
vw.innerHTML = evaluation(vw.innerHTML.split(','))
}
}
}
</script>
<div class="frame">
<div class="numberOutput">
<p class="output"></p>
<p class="output"></p>
</div>
<div class="numberInput" onselectstart="return false;" ondragstart="return false">
<ul>
<li class="btn">←</li>
<li class="btn">C</li>
<li class="btn">%</li>
<li class="btn">√</li>
<li class="num btn">7</li>
<li class="num btn">8</li>
<li class="num btn">9</li>
<li class="num btn">÷</li>
<li class="num btn">4</li>
<li class="num btn">5</li>
<li class="num btn">6</li>
<li class="num btn">×</li>
<li class="num btn">1</li>
<li class="num btn">2</li>
<li class="num btn">3</li>
<li class="num btn">－</li>
<li class="num btn">0</li>
<li class="num btn">.</li>
<li class="btn">＝</li>
<li class="num btn">＋</li>
</ul>
</div>
</div>

复制代码

跳转到最佳答案楼层

kogawananari · 发表于 2020-11-4 08:49:56

这个最佳答案由 kogawananari 给出，感谢 kogawananari 的回答。

单击隐藏图章

多行屏幕显示一行显示算式一行显示结果每次按【=】就复制
贴一个我以前写的

<style>
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
body {
background-color: #eee;
}
.frame {
width: 500px;
height: 600px;
margin: 50px auto;
background-color: #ccc;
box-shadow: 0 0 10px #000;
padding: 4px;
border-radius: 6px;
}
.numberOutput {
width: 498px;
background-color: #eee;
}
.numberOutput p {
display: flex;
flex-direction: row-reverse;
font-size: 48px;
overflow-y: hidden;
height: 75px;
}
.numberInput {
float: left;
width: 500px;
height: 360px;
background-color: #fff;
}
.numberInput li {
float: left;
width: 121px;
line-height: 86px;
text-align: center;
font-size: 35px;
background-color: #aaa;
border: 2px solid #ccc;
cursor: pointer;
}
.numberInput li:hover {
background-color: #ccc;
}
</style>
<script>
window.onload = function () {
let num = document.getElementsByClassName("num")
let btn = document.getElementsByClassName("btn")
let vw = document.getElementsByClassName("output")[1]
let vwH = document.getElementsByClassName("output")[0]
for (let i = 0; i < num.length; i++) {
num[i].onclick = function () {
vw.innerHTML += num[i].innerHTML
}
}
btn[0].onclick = function () {
vw.innerHTML = vw.innerHTML.substr(0, vw.innerHTML.length - 1)
}
btn[1].onclick = function () {
location.reload(); //刷新页面
}
btn[2].onclick = function () {
if (vw.innerHTML.indexOf('%') !== -1) { //这个百分数结果并不能在下次运算中使用除非退格删掉
vw.innerHTML = 'error'
} else if (vw.innerHTML.indexOf('e') !== -1) { //error没删干净强制刷新
location.reload();
} else {
vwH.innerHTML = vw.innerHTML + '×100%'
vw.innerHTML = Number(vw.innerHTML) * 100 + '%'
}
}
btn[3].onclick = function () {
if (vw.innerHTML.indexOf('%') !== -1) { //这个百分数结果并不能在下次运算中使用除非退格删掉
vw.innerHTML = 'error'
} else if (vw.innerHTML.indexOf('e') !== -1) { //error没删干净强制刷新
location.reload();
} else {
vwH.innerHTML = 'sqrt(' + vw.innerHTML + ')'
vw.innerHTML = Number(vw.innerHTML) ** 0.5
}
}
function floatBase(numA, numB) { //浮点数运算问题
let aLastIndex = String(numA).length - 1
let bLastIndex = String(numB).length - 1
let aFloLen = aLastIndex - (Number.isInteger(numA * 1) ? aLastIndex : String(numA).indexOf('.'))
let bFloLen = bLastIndex - (Number.isInteger(numB * 1) ? bLastIndex : String(numB).indexOf('.'))
return 10 ** (aFloLen > bFloLen ? aFloLen : bFloLen)
}
function computed(numA, numB, sym, base) { //定义中文及自定义运算符号
switch (sym) {
case '＋':
return (numA * base + numB * base) / base
break;
case '－':
return (numA * base - numB * base) / base
break;
case '×':
return (numA * base * (numB * base)) / base ** 2
break;
case '÷':
return numA * base / (numB * base)
break;
//default:
}
}
function evaluation(arr, s = 0, e = arr.length) {
let arr2 = arr.slice(s, e)
let symArr1 = arr2.filter(z => (z === '×' || z === '÷')) //回调函数filter() 定义运算优先级
let symArr2 = arr2.filter(z => (z === '＋' || z === '－'))
while (1) {
let idx, base, sym, res;
let first = symArr1.shift() || symArr2.shift()
if (!first) { break }
idx = arr2.indexOf(first)
sym = first
base = floatBase(arr2[idx - 1], arr2[idx + 1])
res = computed(arr2[idx - 1], arr2[idx + 1], sym, base)
arr2.splice(idx - 1, 3, res)
}
return arr2.shift()
}
btn[18].onclick = function () {
vwH.innerHTML = vw.innerHTML
if (vw.innerHTML.indexOf('%') !== -1) { //这个百分数结果并不能在下次运算中使用除非退格删掉
vw.innerHTML = 'error'
} else if (vw.innerHTML.indexOf('I') !== -1) { //Infinity没删干净强制刷新
location.reload();
} else if (vw.innerHTML.indexOf('e') !== -1) { //error没删干净强制刷新
location.reload();
} else if (vw.innerHTML.indexOf('N') !== -1) { //NaN没删干净强制刷新
location.reload();
} else {
vw.innerHTML = vw.innerHTML.replace(/\＋/g, ',＋,').replace(/\－/g, ',－,').replace(/\×/g, ',×,').replace(/\÷/g, ',÷,');
vw.innerHTML = evaluation(vw.innerHTML.split(','))
}
}
}
</script>
<div class="frame">
<div class="numberOutput">
<p class="output"></p>
<p class="output"></p>
</div>
<div class="numberInput" onselectstart="return false;" ondragstart="return false">
<ul>
<li class="btn">←</li>
<li class="btn">C</li>
<li class="btn">%</li>
<li class="btn">√</li>
<li class="num btn">7</li>
<li class="num btn">8</li>
<li class="num btn">9</li>
<li class="num btn">÷</li>
<li class="num btn">4</li>
<li class="num btn">5</li>
<li class="num btn">6</li>
<li class="num btn">×</li>
<li class="num btn">1</li>
<li class="num btn">2</li>
<li class="num btn">3</li>
<li class="num btn">－</li>
<li class="num btn">0</li>
<li class="num btn">.</li>
<li class="btn">＝</li>
<li class="num btn">＋</li>
</ul>
</div>
</div>

复制代码

真的只会一点点 · 发表于 2020-11-9 23:14:29

kogawananari 发表于 2020-11-4 08:49
多行屏幕显示一行显示算式一行显示结果每次按【=】就复制
贴一个我以前写的

我想问一下从119到132行是什么意思，谢谢

kogawananari · 发表于 2020-11-10 09:37:22

真的只会一点点发表于 2020-11-9 23:14
我想问一下从119到132行是什么意思，谢谢

先算乘除再算加减

账号		自动登录	找回密码
密码			立即注册

[已解决]简易计算器

马上注册，结交更多好友，享用更多功能^_^

浏览过的版块