快捷導(dǎo)航

JavaScript實(shí)現(xiàn)簡(jiǎn)易計(jì)算器小功能

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>計(jì)算器</title>
</head>
<body>
<!--頁(yè)面布局-->
<input type="text" id="num1" placeholder="請(qǐng)輸入第一個(gè)數(shù)字"/>
<input type="text" id="operator" placeholder="請(qǐng)輸入運(yùn)算符">
<input type="text" id="num2" placeholder="請(qǐng)輸入第二個(gè)數(shù)字"/>
<input type="button" onclick="count()" value="計(jì)算"/><br/>
<span>計(jì)算結(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 = "";
    //判斷輸入的兩個(gè)數(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("請(qǐng)輸入正確的運(yùn)算符?。。?);
      }
      num = num.toFixed(2);
      document.getElementById("result").innerText = num;
    } else {
      alert("請(qǐng)輸入數(shù)字?。?！")
    }
  }
</script>
</body>
</html>

運(yùn)行效果：

測(cè)試結(jié)果：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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