JavaScript實現(xiàn)計算器功能的方法是什么-創(chuàng)新互聯(lián)

這篇文章主要介紹了JavaScript實現(xiàn)計算器功能的方法是什么，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

專注于為中小企業(yè)提供成都做網(wǎng)站、網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)隴川免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了超過千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

具體內(nèi)容如下

效果圖：

JavaScript實現(xiàn)計算器功能的方法是什么

邏輯：

1、首先通過遍歷，為所有元素添加事件； 2、各個按鈕功能分別實現(xiàn)

<!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>
 // 獲取標(biāo)簽
 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指代 當(dāng)前對象
  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>

標(biāo)題名稱：JavaScript實現(xiàn)計算器功能的方法是什么-創(chuàng)新互聯(lián)
分享地址：http://jinyejixie.com/article26/dipojg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、外貿(mào)建站、搜索引擎優(yōu)化、品牌網(wǎng)站設(shè)計、關(guān)鍵詞優(yōu)化、云服務(wù)器

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

JavaScript實現(xiàn)計算器功能的方法是什么-創(chuàng)新互聯(lián)