javascript編寫簡易計算器

更新時間：2017年05月06日 09:10:32 作者：粥要熬

這篇文章主要為大家詳細介紹了javascript編寫簡易計算器的相關代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js簡易計算器的具體代碼，供大家參考，具體內(nèi)容如下

代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>簡易計算器</title>
 <style type="text/css">
  *{
   margin:0;
   padding: 0;
  }
  .content{
   width: 300px;
   height: 400px;
   margin: 50px auto;
   background: #CBC6C6;
   border:1px solid #139EB7;
   box-shadow: -5px -5px 5px #565454;
   border-radius: 15px;
  }
  #toptext{
   width: 280px;
   height: 50px;
   margin: 10px auto;
   margin-left: 9px;
   line-height: 50px;
   border-radius: 15px;
   text-align: right;
   font-size: 24px;
   border: 1px #F0D711 solid;
  }
  .btns{
   width: 280px;
   height: 300px;
   margin: 10px auto;
  }
  .btns input{
   width: 50px;
   margin: 10px;
   height: 60px;
   float: left;
   font-size: 24px;
   line-height: 60px;
   border-radius: 10px;
   transform-origin: left top;
   background: linear-gradient(to right,#0df60d,red);
  }
  .btns input:hover{
   background: linear-gradient(to left,#0df60d,red);
   transform: rotate(15deg);
  }
 </style>
</head>
<body>
 <div class="content">
  <input type="text" id="toptext">
  <div class="btns">
   <input type="button" value="1" class="num">
   <input type="button" value="2" class="num">
   <input type="button" value="3" class="num">
   <input type="button" value="+" class="jisuan">
   <input type="button" value="4" class="num">
   <input type="button" value="5" class="num">
   <input type="button" value="6" class="num">
   <input type="button" value="-" class="jisuan">
   <input type="button" value="7" class="num">
   <input type="button" value="8" class="num">
   <input type="button" value="9" class="num">
   <input type="button" value="*" class="jisuan">
   <input type="button" value="0" class="num">
   <input type="button" value="C" id="clear">
   <input type="button" value="=" id="equals">
   <input type="button" value="/" class="jisuan">
  </div>
 </div>
 <script type="text/javascript">
  var text = document.getElementsByTagName('input')[0];
  var clear = document.getElementById('clear');
  var equals = document.getElementById('equals');
  var js = document.getElementsByClassName('jisuan');
  var num = document.getElementsByClassName('num');

  text.value = 0;
  var tex = "";
  var fuhao = "";
  var firstNum = "";
  var secondNum = "";

  for(var i=0 ; i<num.length; i++){
   num[i].onclick = function (){
    if(fuhao){
     text.value += this.value;
     secondNum = this.value;
    }else{
     tex = tex+this.value;
     firstNum = tex;
     text.value = tex;
    }
   };
  }
  for(var j=0; j<js.length; j++){
   js[j].onclick = function(){
    fuhao = this.value;
    text.value += this.value; 
   };  
  }

  equals.onclick=function(){
   switch (fuhao) {
    case '+':
     var res = firstNum*1 + secondNum*1;
     break;
    case '-':
     var res = firstNum - secondNum;
     break;
    case '*':
     var res = firstNum * secondNum;
     break;
    case '/':
     var res = firstNum / secondNum;
     break;   
    default:
     break;
   }
   text.value = res;
   tex = "";
   fuhao = "";
   firstNum = "";
   secondNum = "";
  }
  clear.onclick = function(){
   text.value = "";
  }
 </script>
</body>
</html>

界面：

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
計算器

js判斷所有表單項不為空則提交表單的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨s判斷所有表單項不為空則提交表單的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-09-09
javascript中獲取class的簡單實現(xiàn)
下面小編就為大家?guī)硪黄猨avascript中獲取class的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-07-07
ES6中l(wèi)et 和 const 的新特性
這篇文章主要介紹了ES6中l(wèi)et 和 const 的新特性，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-09-09
50行代碼實現(xiàn)Webpack組件使用次數(shù)統(tǒng)計
這篇文章主要介紹了50行代碼實現(xiàn)Webpack組件使用次數(shù)統(tǒng)計,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-03-03
echarts多條折線圖動態(tài)分層的實現(xiàn)方法
這篇文章主要介紹了echarts多條折線圖動態(tài)分層的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-05-05
信息頁文內(nèi)畫中畫廣告js實現(xiàn)代碼(文中加載廣告方式)
一般來說文章內(nèi)容中的廣告點擊率更好，也更容易被訪客看到，如果直接將廣告放到頁面頭部會影響網(wǎng)站的速度，所以一般都比較喜歡這種方法，這里分享下實現(xiàn)方法
2016-01-01
el-form實現(xiàn)表單和圖片手動上傳和校驗功能
在寫項目時,難免遇到需要上傳表單,圖片等文件,且表單內(nèi)容需進行驗證及必填項提示,圖片需要和信息一起傳遞且圖片載入后需可預覽,這篇文章給大家介紹el-form實現(xiàn)表單和圖片手動上傳和校驗功能,感興趣的朋友一起看看吧
2024-01-01
JS實現(xiàn)圖片垂直居中顯示小結
本文給大家分享了4中圖片垂直居中顯示的效果，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧
2016-12-12
不同瀏覽器javascript變量作用域的處理方法
javascript變量作用域在不同瀏覽器的實現(xiàn)處理代碼
2008-09-09
基于JavaScript實現(xiàn)全屏透明遮罩div層鎖屏效果
這篇文章主要介紹了基于JavaScript實現(xiàn)全屏透明遮罩div層鎖屏效果的相關資料,需要的朋友可以參考下
2016-01-01