JavaScript實現(xiàn)簡易計算器功能的兩種方法
更新時間:2022年07月29日 11:04:35 作者:是木木呀22
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡易計算器功能的兩種方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了兩種JavaScript實現(xiàn)簡易計算器功能的具體代碼,供大家參考,具體內(nèi)容如下
1. 使用基本數(shù)據(jù)類型
注意點: prompt 用戶從瀏覽器輸入的任何數(shù)據(jù)都是字符串型的,使用數(shù)字需要強制轉換
// 簡易對象器 function input1(){ ? ? var num1 = prompt('請輸入第一個數(shù):'); ? ? return parseFloat(num1); } function input2(){ ? ? var num2 = prompt('請輸入第二個數(shù):'); ? ? return parseFloat(num2); } // 1. 加法運算 function add(num1, num2){ ? ? return num1 + num2; } // 2. 減法運算 function sub(num1, num2){ ? ? return num1 - num2; } // 3. 乘法運算 function multiply(num1, num2){ ? ? return num1 * num2; } // 4. 除法運算 function divition(num1, num2){ ? ? return num1 / num2; } var str = '歡迎使用簡易計算器:\n1. 加法運算;\n2. 減法運算;\n3. 乘法運算;\n4. 除法運算;\n5. 退出:\n請輸入您的選項'; var option; var result; do{ ? ? option = parseFloat(prompt(str)); ? ? switch (option){ ? ? case 1: ? ? ? ? result = add(input1(), input2()); ? ? ? ? alert('結果是 ' + result); ? ? ? ? break; ? ? case 2: ? ? ? ? result = sub(input1(), input2()); ? ? ? ? alert('結果是 ' + result); ? ? ? ? break; ? ? case 3: ? ? ? ? result = multiply(input1(), input2()); ? ? ? ? alert('結果是 ' + result); ? ? ? ? break; ? ? case 4: ? ? ? ? result = divition(input1(), input2()); ? ? ? ? alert('結果是 ' + result); ? ? ? ? break; ? ? case 5: ? ? ? ? alert('已退出程序'); ? ? ? ? break; ? ? default: ? ? ? ? alert('輸入錯誤,請重新輸入'); ? ? ? ? break; ? ? } } while(option != 5);
效果展示:
2.使用對象,將簡易計算器作為一個對象創(chuàng)建
注意點:構造函數(shù)命名首字母大寫
?// 創(chuàng)建簡易計算器, 一個運算類 注意構造函數(shù)命名 首字母大寫 function Counter(num1, num2){ ? ? //輸入 數(shù)據(jù) 這里感覺好像有點多于,但是沒有的話,又有點奇怪 可以把下面num1num2全部加上this ? ? this.num1 = num1; ? ? this.num2 = num2; ? ? // 加 ? ? this.add = function(){ ? ? ? ? return num1 + num2; ? ? } ? ? // 減 ? ? this.sub = function(){ ? ? ? ? return num1 - num2; ? ? } ? ? // 乘 ? ? this.multiply = function(){ ? ? ? ? return num1 * num2; ? ? } ? ? // 除 ? ? this.divition = function(){ ? ? ? ? return num1 / num2; ? ? } } function input1(){ ? ? var num1 = prompt('請輸入第一個數(shù):'); ? ? return parseFloat(num1); } function input2(){ ? ? var num2 = prompt('請輸入第二個數(shù):'); ? ? return parseFloat(num2); } var str = '歡迎使用簡易計算器:\n1. 加法運算;\n2. 減法運算;\n3. 乘法運算;\n4. 除法運算;\n5. 退出:\n請輸入您的選項'; var option = 0; var result; while(option != 5){ ? ? option = parseFloat(prompt(str)); ? ? if(option != 5){ //防止輸入5后下一步還運行創(chuàng)建新運算對象,所以直接跳過去選擇case5然后跳出循環(huán) ? ? ? ? var counter_new = new Counter(input1(), input2()); // 新的運算對象 ? ? } ? ? switch (option){ ? ? case 1: ? ? ? ? result = counter_new.add(); ? ? ? ? alert('結果是 ' + result); ? ? ? ? break; ? ? case 2: ? ? ? ? result = counter_new.sub(); ? ? ? ? alert('結果是 ' + result); ? ? ? ? break; ? ? case 3: ? ? ? ? result = counter_new.multiply(); ? ? ? ? alert('結果是 ' + result); ? ? ? ? break; ? ? case 4: ? ? ? ? result = counter_new.divition(); ? ? ? ? alert('結果是 ' + result); ? ? ? ? break; ? ? case 5: ? ? ? ? alert('已退出程序'); ? ? ? ? break; ? ? default: ? ? ? ? alert('輸入錯誤,請重新輸入'); ? ? ? ? break; ? ? } }?
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
使用Javascript和DOM Interfaces來處理HTML
使用Javascript和DOM Interfaces來處理HTML...2006-10-10解決bootstrap中使用modal加載kindeditor時彈出層文本框不能輸入的問題
這篇文章主要介紹了解決bootstrap中使用modal加載kindeditor時彈出層文本框不能輸入的問題,需要的朋友可以參考下2017-06-06