快捷導(dǎo)航

html+js實現(xiàn)簡單的計算器代碼(加減乘除)

更新時間：2016年07月12日 10:31:49 投稿：jingxian

下面小編就為大家?guī)硪黄猦tml+js實現(xiàn)簡單的計算器代碼(加減乘除)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

html+js實現(xiàn)簡單的計算器代碼(加減乘除)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<table>
  <tr>
   <td><input type="button" value="add"   onclick="setOp('+', 'add');"/></td>
   <td><input type="button" value="miner" onclick="setOp('-', 'miner');"/></td>
   <td><input type="button" value="times" onclick="setOp('*', 'times');"/></td>
   <td><input type="button" value="divide" onclick="setOp('/', 'divide');"/></td>
  </tr>
</table>
<table id="tb_calc" style="display:none;">
   <tr>
    <td> <input id="x" type="text" style="width:100px" value="" name="x" /></td>
    <td> <lable id="op" name="op"></lable> </td>
    <td> <input id="y" type="text" style="width:100px" value="" name="y" /> </td>
    <td> <input id="opTips" type="button" value="" onclick="calc();"/> </td>
    <td> <lable id="z" name="z"></lable> </td>
  </tr>
</table>
<script type="application/javascript">
  function setOp(op, opTips)
  {
    var tb=document.getElementById("tb_calc");
    tb.style.display = "none";
          
    document.getElementById("x").value = ""; 
    document.getElementById("y").value = ""; 
    document.getElementById("z").innerText = ""; 
    document.getElementById("op").innerText = op;
    document.getElementById("opTips").value = opTips;
    
    tb.style.display = "block";
  }
  function calc()
  {
    var x = parseInt(document.getElementById("x").value); 
    var y = parseInt(document.getElementById("y").value);
    var op = document.getElementById("op").innerText;
    
    var z = "";
    switch(op)
    {
      case '+':
        z = x + y;
        break;
      case '-':
        z = x - y;
        break;
      case '*': ;
        z = x * y;
        break;
      case '/': ;
        z = x / y;
        break;
      default:
        z = '';
    }
    console.log(x, op, y, '=', z);
    document.getElementById("z").innerText = z;
  }
</script>
</body>
</html>

截圖如下：

以上這篇html+js實現(xiàn)簡單的計算器代碼(加減乘除)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

小程序?qū)崿F(xiàn)左滑刪除效果
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)左滑刪除效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-07-07
js實現(xiàn)炫酷光感效果
這篇文章主要為大家詳細介紹了js實現(xiàn)炫酷光感效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-09-09
原生JS實現(xiàn)層疊輪播圖
這篇文章主要為大家詳細介紹了原生JS層疊輪播圖，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-05-05
KnockoutJS 3.X API 第四章之?dāng)?shù)據(jù)控制流foreach綁定
這篇文章主要介紹了KnockoutJS 3.X API 第四章之?dāng)?shù)據(jù)控制流foreach綁定的相關(guān)資料,需要的朋友可以參考下
2016-10-10
JavaScript隨機生成顏色的方法
這篇文章主要介紹了JavaScript隨機生成顏色的方法的相關(guān)資料,非常不錯，代碼簡單易懂，具有參考借鑒價值，需要的朋友可以參考下
2016-10-10
JS實現(xiàn)根據(jù)當(dāng)前文字選擇返回被選中的文字
這篇文章主要介紹JS如何實現(xiàn)根據(jù)當(dāng)前文字選擇返回被選中的文字,需要的朋友可以參考下
2014-05-05
JS簡單實現(xiàn)點擊按鈕或文字顯示遮罩層的方法
這篇文章主要介紹了JS簡單實現(xiàn)點擊按鈕或文字顯示遮罩層的方法,涉及javascript鼠標(biāo)事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
2017-04-04
JavaScript使用Proxy編寫一個取值限制器
最近一直在開發(fā)低代碼平臺的東西,由于項目里面東西有點多,取值或調(diào)用起來比較麻煩,使用本文就將使用Proxy編寫一個取值限制器,需要的小伙伴可以參考下
2023-12-12
8個開發(fā)者必須知道的JavaScript深層概念(推薦)
JavaScript有一個名為“調(diào)用堆?！保–all Stack）的簡單列表，它逐一管理任務(wù)（堆棧算法），但是當(dāng)異步任務(wù)被傳遞時，JavaScript會把它彈出到web API，瀏覽器就會處理它，這篇文章主要介紹了8個開發(fā)者必須知道的JavaScript深層概念，需要的朋友可以參考下
2022-10-10
JavaScript給事件委托批量添加事件監(jiān)聽詳細流程
事件委托，一般來講，會把一個或者一組元素的事件委托到它的父層或者更外層元素上，真正綁定事件的是外層元素，當(dāng)事件響應(yīng)到需要綁定的元素上時，會通過事件冒泡機制從而觸發(fā)它的外層元素的綁定事件上，然后在外層元素上去執(zhí)行函數(shù)
2021-10-10