.BigTd {
height: 70px;
width: 100%;
font-size: 35px
}
.Table {
height: 350px;
margin-left: 50px;
}
.Input {
height: 90px; width: 395px; font-size: 50px;text-align: right;padding-right: 10px;
}
</style>
<script type="text/javascript">
var numresult,
str,
isNotCal = false // 是否已经进行过计算
function onclicknum(nums) {
//console.log(nums)
str = document.getElementById("nummessege")
if(isNotCal == true) {
str.value = ""
}
str.value = str.value + nums
isNotCal = false
}
function onclickclear() {
str = document.getElementById("nummessege")
str.value = ""
}
function onclickresult() {
isNotCal = true
str = document.getElementById("nummessege")
str.value = str.value.replace(/×/g, '*')
str.value = str.value.replace(/÷/g, '/')
numresult = eval(str.value)
str.value = numresult
}
function onclickDelete() {
if(isNotCal == false) {
str = document.getElementById("nummessege")
str.value = str.value.substr(0, str.value.length - 1)
} else {
onclickclear()
}// console.log("清除最后一位")
}// 监听键盘事件
document.onkeydown = function(e) {// console.log(e)
switch(e.key) {
case '1':
onclicknum(1)
break
case '2':
onclicknum(2)
break
case '3':
onclicknum(3)
break
case '4':
onclicknum(4)
break
case '5':
onclicknum(5)
break
case '6':
onclicknum(6)
break
case '7':
onclicknum(7)
break
case '8':
onclicknum(8)
break
case '9':
onclicknum(9)
break
case '0':
onclicknum(0)
break
case '.':
onclicknum('.')
break
case '+':
onclicknum('+')
break
case '-':
onclicknum('-')
break
case '*':
onclicknum('×')
break
case '/':
onclicknum('÷')
break
case 'Backspace':
e.preventDefault()
onclickDelete()
break
case 'Enter':
e.preventDefault()
onclickresult()
break
default:
breakreact和vue的比较
相同
1）vitual dom
2）组件化
3）props，单一数据流
不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）
原创文章，作者：3628473679，如若转载，请注明出处：https://blog.ytso.com/163638.html