Fe-interview: [js] 第240天 请实现一个计算器的功能
All 3 comments
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>计算器</title>
<style>
.box {
width: 400px;
display: flex;
margin: 0 auto;
flex-flow: column nowrap;
align-items: center;
}
.row {
display: flex;
flex-flow: row wrap;
}
.column {
display: flex;
flex-flow: column nowrap;
}
.row-1 {
justify-content: flex-end;
}
.row-2>div {
width: 300px;
}
.row-3>div {
width: 300px;
}
.show {
width: 400px;
height: 100px;
border: 1px solid;
margin-bottom: 10px;
margin-top: 10px;
text-align: right;
}
.show-1 {
font-size: 30px;
line-height: 35px;
}
.show-2 {
font-size: 40px;
line-height: 45px;
}
button {
width: 100px;
height: 100px;
font-size: 30px;
}
.width-2 {
width: 200px;
}
.height-2 {
height: 200px;
}
</style>
</head>
<body>
<div class='box'>
<div class="show">
<div class="show-1">0</div>
<div class="show-2">0</div>
</div>
<div class="num-button">
<div class="row row-1">
<button>/</button>
<button>*</button>
<button>-</button>
</div>
<div class="row row-2">
<div class="row">
<button>7</button>
<button>8</button>
<button>9</button>
<button>4</button>
<button>5</button>
<button>6</button>
</div>
<button class="height-2">+</button>
</div>
<div class="row row-3">
<div class="row">
<button>1</button>
<button>2</button>
<button>3</button>
<button class="width-2">0</button>
<button>.</button>
</div>
<button class="height-2">Enter</button>
</div>
</div>
</div>
<script>
let elementHeight = function (e) {
return `height: ${e.offsetHeight}, width: ${e.offsetWidth}`
}
let show1 = document.getElementsByClassName('show-1')[0]
let show2 = document.getElementsByClassName('show-2')[0]
let oc = 1
let button = document.getElementsByClassName('box')[0].addEventListener('click', function (e) {
if (!oc) {
show1.innerHTML = 0
oc = 1
}
if (e.target.innerText == 'Enter') {
show2.innerHTML = eval(show1.innerHTML)
oc = 0
} else {
if (show1.innerHTML == 0 && isNaN(e.target.innerText)) return
show1.innerHTML = show1.innerHTML == 0 ? e.target.innerText : (show1.innerHTML + e.target.innerText)
}
})
</script>
</body>
</html>
NicholasBaiYa
on 12 Dec 2019
👍1
那我就来个vue版本的吧，无限接近原生苹果计算器APP哦。
<template>
<div id="test-wrap">
<div class="calculator">
<div class="result-area">
<span class="show-number">
{{ number }}
</span>
</div>
<div class="btn-area">
<div class="computed-box">
<div v-for="(item, index) in computedList" :key="index" class="computed-btn" @click="handleClickComputed(item.type)">
{{ item.text }}
</div>
</div>
<div class="number-box">
<div v-for="(item, index) in numberList" :key="index" class="number-btn" @click="handleClickNumber(item.text)">{{ item.text }}</div>
<div class="number-btn" @click="handleClear">AC</div>
<div class="result-btn" @click="handleComputedResult">＝</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
number: '0',
calculation: '',
calculationNumber: 0,
computedRule: '',
hasCalculation: false,
awaitNumber: '',
lastCalculation: '',
computedList: [
{
text: '+',
type: '+'
},
{
text: '-',
type: '-'
},
{
text: '×',
type: '*'
},
{
text: '÷',
type: '/'
}
],
numberList: [
{
text: '0'
},
{
text: '1'
},
{
text: '2'
},
{
text: '3'
},
{
text: '4'
},
{
text: '5'
},
{
text: '6'
},
{
text: '7'
},
{
text: '8'
},
{
text: '9'
}
]
}
},
watch: {
'computedRule'(newVal) {
console.log(newVal)
}
},
methods: {
handleClickNumber(number) {
if (this.number === '0') {
this.number = number
} else {
if (this.hasCalculation) {
this.number = number
this.hasCalculation = false
} else {
this.number = `${this.number}` + number
}
}
this.computedRule = `${this.computedRule}${number}`
},
handleClickComputed(type) {
this.hasCalculation = true
if (!this.lastCalculation) {
this.lastCalculation = type
} else {
this.getComputedResult()
}
this.computedRule = `${this.computedRule}${type}`
},
getComputedResult() {
try {
// eslint-disable-next-line no-eval
this.number = eval(this.computedRule)
} catch (e) {
this.computedRule = this.computedRule.substr(0, this.computedRule.length - 1)
console.warn(e)
}
},
handleComputedResult() {
this.getComputedResult()
},
handleClear() {
this.computedRule = ''
this.number = '0'
this.hasCalculation = false
}
}
}
</script>
<style lang="scss">
#test-wrap {
.calculator {
width: 312px;
padding: 20px;
border-radius: 16px;
background-color: #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.result-area {
height: 100px;
width: 100%;
padding: 10px;
margin-bottom: 20px;
position: relative;
.show-number {
word-break: break-all;
position: absolute;
text-align: right;
bottom: 0;
right: 10px;
width: 100%;
color: white;
font-size: 40px;
}
}
.btn-area {
.computed-box {
display: flex;
align-items: center;
.computed-btn {
width: 48px;
height: 48px;
border-radius: 100%;
background-color: orange;
text-align: center;
color: white;
line-height: 48px;
font-size: 36px;
margin: 0 10px;
cursor: pointer;
transition: .2s linear background-color;
&:active {
background-color: #FFD689;
}
}
}
.number-box {
display: flex;
flex-wrap: wrap;
.number-btn {
width: 48px;
height: 48px;
border-radius: 100%;
background-color: #333333;
text-align: center;
color: white;
line-height: 48px;
font-size: 36px;
margin: 10px 10px 0 10px;
cursor: pointer;
transition: .2s linear background-color;
&:active {
background-color: #909399;
}
&:nth-child(11) {
font-size: 20px;
background-color: #909399;
&:active {
background-color: #C4C9CE;
}
}
}
.result-btn {
@extend .number-btn;
background-color: orange;
}
}
}
}
}
</style>
SXX19950910
on 12 Dec 2019
👍3
一种是 a+b 直接运行结果的，前次算术的结果为下一个算术的 a，直到清零或按等于。
一种是在按清零或等于之前可以尽情输入，最后再进行计算，先括号再乘除再加减。
如果还要带上 sin 或 sqrt 之类的，应该也问题不大。
forever-z-133
on 14 Dec 2019
Was this page helpful?
0 / 5 - 0 ratings
Related issues
haizhilin2013
·
3Comments
haizhilin2013
·
3Comments
haizhilin2013
·
3Comments
haizhilin2013
·
3Comments
undefinedYu
·
3Comments
Most helpful comment
那我就来个vue版本的吧，无限接近原生苹果计算器APP哦。