提交 1882a365 编写于 作者: 黛琳ghz's avatar 黛琳ghz

提交

上级 1e701a7a
*{
margin: 0;
padding: 0;
}
.box1{
margin: 0 auto;
border: 0.1rem solid;
position: relative;
width: 36rem;
height: 50rem;
}
.box2{
/* border: 0.1rem solid; */
width: 36rem;
height: 20rem;
}
.Mbottom{
position: absolute;
bottom: 30rem;
width: 36rem;
height: 4rem;
display: flex;
justify-self: center;
}
.Mdata{
width: 6rem;
height: 4rem;
text-align: center;
line-height: 4rem;
}
.countview{
position: absolute;
width: 34rem;
height: 4rem;
/* border: 0.1rem solid; */
font-size: 3.2rem;
border: none;
bottom: 36rem;
outline: none;
font-size: 1.8rem;
color: rgb(136, 146, 146);
text-align: right;
}
.result{
position: absolute;
width: 34rem;
height: 4rem;
/* border: 0.1rem solid; */
font-size: 3.2rem;
border: none;
bottom: 32rem;
outline: none;
/* right: 2rem; */
text-align: right;
}
.box3{
/* border: 0.1rem solid; */
width: 36rem;
height: 30rem;
}
/* .box3 .numbox:nth-child(3){
background-color: red;
} */
.numbox,.coutnbox{
font-size: 1.5rem;
width: 9rem;
height: 5rem;
}
.coutnbox{
background-color:rgb(138, 186, 224);
}
\ No newline at end of file
// numdata:[
// {id:'0',value:"7"},
// {id:'1',value:"8"},
// {id:'2',value:"9"},
// {id:'3',value:"4"},
// {id:'4',value:"5"},
// {id:'5',value:"6"},
// {id:'6',value:"1"},
// {id:'7',value:"2"},
// {id:'8',value:"3"},
// {id:'9',value:"0"},
// ]
\ No newline at end of file
此差异已折叠。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../utils/main.css">
<script src="../utils/vue3.0.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<div class="box1">
<div class="box2">
<input class="countview" :value="countView1+countView2+countView3">
<input class="result" disabled v-model="result">
</div>
<div class="box3">
<button class="numbox" v-for="num in numData" :key="num.id" @click="choose_count(num.value)"
:disabled="num.disabled&&needDisabled">
{{num.value}}
</button>
<button class="coutnbox" v-for="count in countData" :key="count.id" @click="choose_count('=')">
{{count.value}}
</button>
</div>
</div>
</div>
</body>
<script>
// var stack = []
const operateMap = {
'C': function () {
this.result = 0
this.countView1 = ""
this.countView2 = ""
this.countView3 = ""
this.needDisabled = false
},
'CE': function () {
this.result = 0
this.countView1 = ""
this.countView2 = ""
this.countView3 = ""
this.needDisabled = false
},
'Del': function () {
// if (this.needClear) return;
if (this.result == '除数不能为零' || this.result == '结果未定义') {
this.countView1 = ""
this.countView2 = ""
this.countView3 = ""
this.result = 0
this.needDisabled = false
}
if (this.result !== 0) {
// var str = this.result + ""
if (this.countView1 == "" && this.countView2 == "" && this.countView3 == "") {
this.result += ''
this.result = this.result.substring(0, this.result.length - 1)
}
if (this.result === '') {
this.result = 0
}
this.countView1 = ""
this.countView2 = ""
this.countView3 = ""
}
},
'+/-': function () {
if (this.result == 0 || isNaN(Number(this.result))) {
return;
}
this.result += ''
this.result = this.result.charAt(0) === '-' ? this.result.slice(1) : `-${this.result}`
},
'0': function (numData) {
if (this.result == '除数不能为零' || this.result == '结果未定义') {
this.result = 0
this.countView1 = ''
this.countView2 = ''
this.countView3 = ''
this.needClear = false
this.needDisabled = false
}
if (this.needClear && !isNaN(Number(numData))) {
this.result = 0
this.needClear = false
}
if (this.result === 0) {
this.result = 0
} else {
this.result += numData
}
},
'.': function () {
this.result += ''
if (this.result.indexOf('.') != -1) {
return;
}
this.result = this.result + '.'
},
'1/x': function () {
if (this.result == 0) {
this.countView3 = parseInt(1) + '/' + '(' + this.result + ')'
this.result = '除数不能为零'
this.needDisabled = true
} else {
this.countView3 = parseInt(1) + '/' + '(' + parseFloat((this.result)) + ')'
this.result = `${parseInt(1) / parseFloat((this.result))}`
}
},
'%': function (numData) {
this.result = `${parseFloat(this.result) / 100}`
this.countView3 = this.result
if (this.result == '0') {
this.result = 0
}
console.log(typeof (this.result));
},
'x*x': function () {
this.countView3 = 'sqr(' + parseFloat(this.result) + ')'
this.result = `${parseFloat(this.result) * parseFloat(this.result)}`
},
'sqrt(x)': function () {
this.countView3 = 'sqrt(' + parseFloat(this.result) + ')'
this.result = `${Math.sqrt(parseFloat(this.result))}`
},
'=': function () {
// if(this.result.charAt(this.result.length - 1) == '.') {
// this.result=this.result.substring(0, this.result.length - 1)
// }
if (this.result == '除数不能为零' || this.result == '结果未定义') {
this.result = 0
this.countView1 = ''
this.countView2 = ''
this.countView3 = ''
this.needClear = false
this.needDisabled = false
} else {
this.result = Number(this.result)
this.countView3 = this.result + '='
// if (this.result=='0.'){
// this.countView3 ='0'+'='
// }
this.needClear = true
this.result = eval(this.countView1 + this.countView2 + this.result)
}
},
'defalut': function (numData) {
if (this.result == '除数不能为零' || this.result == '结果未定义') {
this.result = ''
this.countView1 = ''
this.countView2 = ''
this.countView3 = ''
this.needClear = false
this.needDisabled = false
}
if (this.result === 0 && !isNaN(Number(numData))) {
this.result = ''
}
if (this.needClear && !isNaN(Number(numData))) {
this.result = ''
this.needClear = false
}
this.result += numData
}
}
operateMap['+'] = operateMap['-'] = operateMap['*'] = operateMap['/'] = function (numData) {
this.result = Number(this.result)
this.countView3 = ''
if (this.needClear) {
this.countView2 = numData;
this.countView1 = this.result
return;
}
if (this.countView1 && this.countView2) {
this.result = eval(this.countView1 + this.countView2 + this.result)
console.log(this.countView1 + this.countView2 + this.result);
}
this.countView1 = this.result
if (!this.result) {
this.result = 0
}
this.countView2 = numData
this.needClear = true
// if (this.result == '除数不能为0') {
// const getNum = document.querySelector('numbox')
// // getNum.disabled=true
// console.log(getNum);
// // document.querySelector('numbox').disabled=true
// }
}
const vm = Vue.createApp({
data() {
return {
needDisabled: false,
numData: [{
id: '0',
value: "%",
disabled: true
},
{
id: '1',
value: "CE"
},
{
id: '2',
value: "C"
},
{
id: '3',
value: "Del"
},
{
id: '4',
value: "1/x",
disabled: true
},
{
id: '5',
value: "x*x",
disabled: true
},
{
id: '6',
value: "sqrt(x)",
disabled: true
},
{
id: '7',
value: "/",
disabled: true
},
{
id: '8',
value: "7"
},
{
id: '9',
value: "8"
},
{
id: '10',
value: "9"
},
{
id: '11',
value: "*",
disabled: true
},
{
id: '12',
value: "4"
},
{
id: '13',
value: "5"
},
{
id: '14',
value: "6"
},
{
id: '15',
value: "-",
disabled: true
},
{
id: '16',
value: "1"
},
{
id: '17',
value: "2"
},
{
id: '18',
value: "3"
},
{
id: '19',
value: "+",
disabled: true
},
{
id: '20',
value: "+/-",
disabled: true
},
{
id: '21',
value: "0"
},
{
id: '22',
value: ".",
disabled: true
}
],
countData: [{
id: '0',
value: "="
}],
result: 0,
countView1: '',
countView2: '',
countView3: '',
needClear: false
}
},
watch: {
result(newV, oldV) {
// console.log(newV);
// console.log(newV == Infinity);
if (newV == Infinity || newV == -Infinity) {
this.result = '除数不能为零'
this.needDisabled = true
} else if (newV !== newV) {
this.result = '结果未定义'
this.needDisabled = true
}
}
},
mounted() {
const getNum = document.querySelector('numbox')
const countView = document.querySelector('countview')
},
methods: {
// //该方法返回当前是否输入的是运算符(加减乘除),是则返回真,反之
// operator(numData) {
// //indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现,则该方法返回 -1。
// return ['+', '-', '*', '/', '.', '%', '1/x', 'x*x', 'sqrt(x)', '+/-'].indexOf(numData) > -1;
// },
choose_count: function (numData) {
let operation = operateMap[numData] || operateMap.defalut
operation.call(this, numData)
// if (numData == 'C') {
// this.result = ""
// this.countView = ""
// } else if (numData == 'CE') {
// this.result = 0
// this.countView = ""
// } else if (numData == 'Del') {
// var str = this.result + ""
// this.result = str.substring(0, str.length - 1)
// }
// // else if (this.result == 0) {
// // this.result = numData
// // }
// else if (numData == '+/-') {
// this.result = this.result.charAt(0) === '-' ? this.result.slice(1) : `-${this.result}`
// } else if (numData == '%') {
// this.result = `${parseFloat(this.result) / 100}`
// } else if (numData == '1/x') {
// if (this.result == 0) {
// this.countView = parseInt(1) + '/' + '(' + parseFloat((this.result)) + ')'
// this.result = '除数不能为0'
// } else {
// this.countView = parseInt(1) + '/' + '(' + parseFloat((this.result)) + ')'
// this.result = `${parseInt(1) / parseFloat((this.result))}`
// }
// } else if (numData == 'x*x') {
// this.countView = 'sqr(' + parseFloat(this.result) + ')'
// this.result = `${parseFloat(this.result) * parseFloat(this.result)}`
// } else if (numData == 'sqrt(x)') {
// this.countView = 'sqrt(' + parseFloat(this.result) + ')'
// this.result = Math.sqrt(parseFloat(this.result))
// } else {
// this.result += numData
// }
// },
// countnum: function () {
// this.countView = this.result
// this.result = eval(this.result)
}
},
}).mount("#app");
</script>
</html>
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册