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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于layui flow loading占位圖的實現(xiàn)方法
今天小編就為大家分享一篇關(guān)于layui flow loading占位圖的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JavaScript高級程序設(shè)計閱讀筆記（六） ECMAScript中的運算符（二）
ECMAScript中的運算符，學(xué)習(xí)js的朋友可以參考下2012-02-02
淺析JavaScript Array和string的轉(zhuǎn)換(推薦)
下面小編就為大家?guī)硪黄獪\析JavaScript Array和string的轉(zhuǎn)換(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
JS實現(xiàn)聯(lián)想、自動補齊國家或地區(qū)名稱的功能
這篇文章主要介紹了JS實現(xiàn)聯(lián)想、自動補齊國家或地區(qū)名稱的功能，文中示例代碼非常詳細，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
這篇文章主要介紹了js屬性對象的hasOwnProperty方法的使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
無間斷滾動的新聞文章列表，兼容IE、Firefox和Opera，符合W3C標準?？勺鱉arquee
無間斷滾動的新聞文章列表，兼容IE、Firefox和Opera，符合W3C標準?？勺鱉arquee...2007-05-05
js實現(xiàn)一個可以兼容PC端和移動端的div拖動效果實例
這篇文章主要介紹了js實現(xiàn)一個可以兼容PC端和移動端的div拖動效果實例，具有一定的參考價值，有需要的可以了解一下。2016-12-12
這篇文章主要介紹了JS擴展類，克隆對象與混合類,通過自定義extend,clone與augment函數(shù)實例分析了類的擴展，對象的克隆與混合類相關(guān)實現(xiàn)與使用技巧,需要的朋友可以參考下2016-11-11
uniapp中uni.request(OBJECT)接口請求封裝實例代碼
在開發(fā)的時候經(jīng)常會用到前端請求后端接口,每次的請求都會出現(xiàn)地址不一樣,參數(shù)不一樣,方式不一樣等等情況,下面這篇文章主要給大家介紹了關(guān)于uniapp中uni.request(OBJECT)接口請求封裝的相關(guān)資料,需要的朋友可以參考下2022-12-12
JavaScript實現(xiàn)點擊自動選擇TextArea文本的方法
這篇文章主要介紹了JavaScript實現(xiàn)點擊自動選擇TextArea文本的方法,涉及javascript中focus()、select()方法的使用技巧,非常簡單實用,需要的朋友可以參考下2015-07-07