溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了JavaScript實現計算器功能的方法是什么，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
具體內容如下
效果圖：
邏輯：
1、首先通過遍歷，為所有元素添加事件； 2、各個按鈕功能分別實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.one {
width: 50px;
height: 50px;
background: #f60;
display: inline-block;
line-height: 50px;
color: #fff;
margin: 5px 5px 5px 0;
font-size: 23px;
text-align: center;
cursor: pointer;
}
.two {
width: 112px;
height: 50px;
background: #f60;
color: #fff;
font-size: 23px;
display: inline-block;
margin-top: 5px;
text-align: center;
line-height: 50px;
cursor: pointer;
}
.tools {
background: blue;
cursor: pointer;
}
.cal {
height: 100px;
position: relative;
background: #999;
width: 228px;
color: #fff;
font-size: 23px;
cursor: pointer;
}
.cal_content {
position: absolute;
bottom: 10px;
right: 10px;
word-break: normal;
cursor: pointer;
}
</style>
<body>
<div>
<div class="cal">
<span class="cal_content" id="cal_content">0</span>
</div>
<div>
<span class="one tools calbtn">*</span>
<span class="one tools calbtn">/</span>
<span class="one tools" id="del">CE</span>
<span class="one tools" id="resset">AC</span>
</div>
<div>
<span class="one calbtn">7</span>
<span class="one calbtn">8</span>
<span class="one calbtn">9</span>
<span class="one tools calbtn">+</span>
</div>
<div>
<span class="one calbtn"> 4</span>
<span class="one calbtn">5</span>
<span class="one calbtn">6</span>
<span class="one tools calbtn">-</span>
<!-- <span clas>-</span> -->
</div>
<div>
<span class="one calbtn">1</span>
<span class="one calbtn">2</span>
<span class="one calbtn">3</span>
<span class="one tools calbtn">.</span>
</div>
<div>
<span class="two calbtn">0</span>
<span class="two tools " id="fin">=</span>
</div>
</div>
</body>
<script>
// 獲取標簽
var cal_content = document.getElementById('cal_content');
var btn = document.getElementsByClassName('calbtn');
var caltext = ''; //
// 遍歷，添加事件
for (var i = 0; i < btn.length; i++) {
btn[i].addEventListener('click', function () {
// this指代 當前對象
caltext += this.innerHTML;
cal_content.innerHTML = caltext
})
}
// 清空
var resset = document.getElementById('resset');
resset.addEventListener('click', function () {
cal_content.innerHTML = '0';
caltext = ''; //
})
// 刪除鍵
var del = document.getElementById('del');
del.addEventListener('click', function () {
caltext = caltext.substring(0, caltext.length - 1);
cal_content.innerHTML = caltext
if (cal_content.innerHTML.length == 0) {
cal_content.innerHTML = '0';
}
})
//等號鍵
var fin = document.getElementById('fin');
fin.addEventListener('click', function () {
// console.log(caltext)
cal_content.innerHTML = eval(caltext);
caltext = eval(caltext);
// console.log(caltext)
})
// 鍵盤事件
document.onkeyup = function (event) {
var event = event || window.event;
console.log(event.key)
// 判斷F5和CTRl鍵
if(event.keyCode==116 || event.keyCode == 17){
return;
}
// 判斷是否是 回車鍵
if (event.keyCode == 13) {
cal_content.innerHTML = eval(caltext);
caltext = eval(caltext);
return;
}
caltext += event.key
cal_content.innerHTML = caltext;
}
</script>
</html>總計：
1、通過對象點擊將元素的值鏈接在一起，最后通過**eval()函數**進行計算，將最終結果反饋到顯示區域
2、設置一個全局表變量 *var caltext = ‘'; * 存放計算字符串
3、ondoucument.onkeyup = function(){ //代碼 } 鍵盤事件
感謝你能夠認真閱讀完這篇文章，希望小編分享JavaScript實現計算器功能的方法是什么內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
