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