生活随笔
收集整理的這篇文章主要介紹了
javascript实现计算器
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
???????首先說明一下為什么發(fā)這篇文章，因為今天早晨看到一篇類似的文章，我看了他的源碼，發(fā)現(xiàn)實在太啰嗦了，于是便準(zhǔn)備把這篇文章發(fā)出來！
???????其實使用javascript的函數(shù)來實現(xiàn)計算器可以說是練習(xí)javascript的一個好方法，雖然我的代碼可以使用eval函數(shù)進行簡化，但是我覺得沒有必要。如果我的文章對你有用就點個贊吧！
先看下布局
源碼放在這里
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.wrapper{width: 400px;border: 1px solid gray;box-sizing: border-box;}#content{width: 400px;height: 150px;border: 1px solid gray;box-sizing: border-box;text-align: right;line-height: 150px;font-size: 30px;}.box{width: 400px;}.div1{width: 100px;height: 100px;border: 1px solid gray;box-sizing: border-box;float: left;font-size: 25px;text-align: center;line-height: 100px;}.div1:hover{box-shadow: 2px 2px 2px gray;}.div1:active{background-color: skyblue;}</style>
</head>
<body><div class="wrapper"><div id="content"></div><div class="box"><div class="div1" id="1" onclick="getNum(this)">1</div><div class="div1" id="2" onclick="getNum(this)">2</div><div class="div1" id="3" onclick="getNum(this)">3</div><div class="div1" id="+" onclick="getOperator(this)">+</div></div><div class="box"><div class="div1" id="4" onclick="getNum(this)">4</div><div class="div1" id="5" onclick="getNum(this)">5</div><div class="div1" id="6" onclick="getNum(this)">6</div><div class="div1" id="-" onclick="getOperator(this)">-</div></div><div class="box"><div class="div1" id="7" onclick="getNum(this)">7</div><div class="div1" id="8" onclick="getNum(this)">8</div><div class="div1" id="9" onclick="getNum(this)">9</div><div class="div1" id="*" onclick="getOperator(this)">*</div></div><div class="box"><div class="div1" id="0" onclick="getNum(this)">0</div><div class="div1" id="C" onclick="clearClick(this)">C</div><div class="div1" id="=" onclick="opert(this)">=</div><div class="div1" id="/" onclick="getOperator(this)">/</div></div></div><script>var 數(shù)字1 = 0;var 按鈕標(biāo)識 = 0;var 運算符 = '+';var content = document.getElementById('content');function getNum(btn){if(按鈕標(biāo)識== 0){content.innerText += btn.innerText;}else{content.innerText = btn.innerText;}按鈕標(biāo)識 = 0;}function getOperator(btn){數(shù)字1 = content.innerText;運算符 = btn.innerText;按鈕標(biāo)識 = 1;}function opert(btn){var result = 0;switch(運算符){case '+':result = parseInt(數(shù)字1) + parseInt(content.innerText);break;case '-':result = parseInt(數(shù)字1) - parseInt(content.innerText);break;case '*':result = parseInt(數(shù)字1) * parseInt(content.innerText);break;case '/':result = parseInt(數(shù)字1) / parseInt(content.innerText);break;}content.innerText = result;}function clearClick(btn){content.innerText = '';數(shù)字1 = 0;按鈕標(biāo)識 = 0;運算符 = '+';}</script>
</body>
</html>
總結(jié)
以上是生活随笔為你收集整理的javascript实现计算器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
