提交 9ccd2db7 编写于 作者: 黛琳ghz's avatar 黛琳ghz
<!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)
}
},
}).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.
先完成此消息的编辑!
想要评论请 注册