JavaScript實現(xiàn)簡易計算器小功能

更新時間：2020年10月22日 11:32:33 作者：jiangrunkang.

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡易計算器小功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>計算器</title>
</head>
<body>
<!--頁面布局-->
<input type="text" id="num1" placeholder="請輸入第一個數(shù)字"/>
<input type="text" id="operator" placeholder="請輸入運算符">
<input type="text" id="num2" placeholder="請輸入第二個數(shù)字"/>
<input type="button" onclick="count()" value="計算"/><br/>
<span>計算結(jié)果：</span><span id="result"></span>
 
<!--JavaScript-->
<script>
  function count() {
    var num1 = document.getElementById("num1").value;
    var num2 = document.getElementById("num2").value;
    var operator = document.getElementById("operator").value;
    var num = "";
    //判斷輸入的兩個數(shù)字是否為數(shù)字,如果為數(shù)字，返回結(jié)果為false
    var num1 = parseFloat(num1);
    var num2 = parseFloat(num2);
    var isNotNumber = isNaN(num1) || isNaN(num2);
    if (!isNotNumber) {
      switch (operator) {
        case "+":
          num = num1 + num2;
          break;
        case "-":
          num = num1 - num2;
          break;
        case "*":
          num = num1 * num2;
          break;
        case "/":
          if (num2 == 0) {
            // 除數(shù)不能為0
            alert("除數(shù)不能為0");
          } else {
            num = num1 / num2;
            break;
          }
        default:
          alert("請輸入正確的運算符?。?！");
      }
      num = num.toFixed(2);
      document.getElementById("result").innerText = num;
    } else {
      alert("請輸入數(shù)字！?。?)
    }
  }
</script>
</body>
</html>

運行效果：

測試結(jié)果：

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

您可能感興趣的文章:

js
計算器

使用Three.js?實現(xiàn)虎年春節(jié)3D創(chuàng)意頁面
虎年春節(jié)將至，本文使用?React?+?Three.js技術(shù)棧，實現(xiàn)趣味?3D創(chuàng)意頁面，主要包括：ShadowMaterial、?MeshPhongMaterial等基本材質(zhì)的使用、使用?LoadingManager展示模型加載進度、OrbitControls`的緩動動畫、TWEEN簡單補間動畫效果等，感興趣的朋友一起看看吧
2022-01-01
詳解ES6 擴展運算符的使用與注意事項
擴展運算符 (spread syntax) 是 ES6 提供的一種非常便捷的新語法，給我們操作數(shù)組和對象帶來了非常大的便利，我在很多文章中也提到了這個語法。但是其實擴展運算符的用法還是比較多比較雜的，我用一篇文章來做一下總結(jié)，梳理一下擴展運算的語法和使用細節(jié)。
2020-11-11
javascript閉包(Closure)用法實例簡析
這篇文章主要介紹了javascript閉包(Closure)用法,結(jié)合實例形式較為詳細的分析了JavaScript閉包的概念、功能及使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-11-11
javascript實現(xiàn)checkbox復選框?qū)嵗a
這篇文章主要為大家介紹了javascript實現(xiàn)checkbox復選框?qū)嵗a，對checkbox復選框進行美化，感興趣的小伙伴們可以參考一下
2016-01-01
ES6 Symbol在對象中的作用實例分析
這篇文章主要介紹了ES6 Symbol在對象中的作用,結(jié)合實例形式分析了ES6 Symbol在對象中聲明、使用方法與相關注意事項,需要的朋友可以參考下
2020-06-06
JS實現(xiàn)鼠標移動拖尾
這篇文章主要為大家詳細介紹了JS實現(xiàn)鼠標移動拖尾效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-12-12
淺談webpack4 圖片處理匯總
這篇文章主要介紹了淺談webpack4 圖片處理匯總，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09
SOSO地圖API使用(一)在地圖上畫圓實現(xiàn)思路與代碼
最近在做SOSO地圖相關開發(fā)，遇到相關畫圓知識，特此簡單記錄下來,接下來講解如何在在地圖上畫圓，感興趣的朋友可以了解下
2013-01-01
微信小程序?qū)崿F(xiàn)動態(tài)渲染Markdown示例詳解
這篇文章主要為大家介紹了微信小程序?qū)崿F(xiàn)動態(tài)渲染Markdown示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-08-08
JavaScript async&await方法中的異常處理方案
在 async/await 方法中,可以使用 try-catch 塊來處理異常,通過使用 try-catch,可以捕獲異步操作中拋出的異常,并在 catch 塊中進行適當?shù)奶幚?本文給大家詳細介紹了async&await方法中異常如何處理,需要的朋友可以參考下
2023-08-08