JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)計(jì)算器
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)計(jì)算器的具體代碼,供大家參考,具體內(nèi)容如下
我們學(xué)完了函數(shù),做一個(gè)網(wǎng)頁(yè)計(jì)算器的小案例,鞏固一下。
共兩個(gè)案例:
案例一圖:
相加:
相減:
相乘:
相除:
代碼如下:
結(jié)構(gòu):
<p>整數(shù)1: <input type="text" name="" id="num1"> </p> <p>整數(shù)2: <input type="text" name="" id="num2"> </p> ? ? <p> ? ? ? ? <input type="button" value="相加" onclick="math(add)"> ? ? ? ? <input type="button" value="相減" onclick="math(fuck)"> ? ? ? ? <input type="button" value="相乘" onclick="math(doubles)"> ? ? ? ? <input type="button" value="相除" onclick="math(fucks)"> ? ? </p> ? ? <p>結(jié)果:<input type="text" name="" id="result"></p> ? ? ?? ? <script> ? ? ? ? function math(func) { ? ? ? ? ? ? var result = document.getElementById('result'); ? ? ? ? ? ? var num1 = parseInt(document.getElementById('num1').value); ? ? ? ? ? ? var num2 = parseInt(document.getElementById('num2').value); ? ? ? ? ? ? if (isNaN(num1) || isNaN(num2)) { ? ? ? ? ? ? ? ? alert('輸入數(shù)字,你個(gè)傻吊'); ? ? ? ? ? ? ? ? return false; ? ? ? ? ? ? } else { ? ? ? ? ? ? ? ? result.value = func(num1, num2); ? ? ? ? ? ? } ? ? ? ? } ? ? ? ? function add(num1, num2) { ? ? ? ? ? ? return num1 + num2; ? ? ? ? } ? ? ? ? function fuck(num1, num2) { ? ? ? ? ? ? return num1 - num2; ? ? ? ? } ? ? ? ? function doubles(num1, num2) { ? ? ? ? ? ? return num1 * num2; ? ? ? ? } ? ? ? ? function fucks(num1, num2) { ? ? ? ? ? ? return num1 / num2; ? ? ? ? } </script>
案例二:
案例圖:(實(shí)現(xiàn)案例圖上的功能)
<script> ? ? ? ? while (true) { ? ? ? ? ? ? var choose = parseInt(prompt('歡迎使用簡(jiǎn)易計(jì)算器:' + '\n' + '1.加法操作' + '\n' + '2.減法操作' + '\n' + '3.乘法操作' + '\n' + '4.除法操作' + '\n' + '5.退出')); ? ? ? ? ? ? if (choose > 5 || choose <= 0) { ? ? ? ? ? ? ? ? alert('請(qǐng)輸入1-5之間的選項(xiàng)...'); ? ? ? ? ? ? ? ? continue; ? ? ? ? ? ? } else { ? ? ? ? ? ? ? ? if (choose == 1) { ? ? ? ? ? ? ? ? ? ? alert('歡迎使用加法計(jì)算器,請(qǐng)輸入需要計(jì)算的兩個(gè)數(shù)值'); ? ? ? ? ? ? ? ? ? ? var num1 = parseFloat(prompt('第一個(gè)數(shù)值:')); ? ? ? ? ? ? ? ? ? ? var num2 = parseFloat(prompt('第二個(gè)數(shù)值:')); ? ? ? ? ? ? ? ? ? ? alert('結(jié)果為:' + (num1 + num2)); ? ? ? ? ? ? ? ? ? ? continue; ? ? ? ? ? ? ? ? } else if (choose == 2) { ? ? ? ? ? ? ? ? ? ? alert('歡迎使用減法計(jì)算器,請(qǐng)輸入需要計(jì)算的兩個(gè)數(shù)值'); ? ? ? ? ? ? ? ? ? ? var num1 = parseFloat(prompt('第一個(gè)數(shù)值:')); ? ? ? ? ? ? ? ? ? ? var num2 = parseFloat(prompt('第二個(gè)數(shù)值:')); ? ? ? ? ? ? ? ? ? ? alert('結(jié)果為:' + (num1 - num2)); ? ? ? ? ? ? ? ? ? ? continue; ? ? ? ? ? ? ? ? } else if (choose == 3) { ? ? ? ? ? ? ? ? ? ? alert('歡迎使用乘法計(jì)算器,請(qǐng)輸入需要計(jì)算的兩個(gè)數(shù)值'); ? ? ? ? ? ? ? ? ? ? var num1 = parseFloat(prompt('第一個(gè)數(shù)值:')); ? ? ? ? ? ? ? ? ? ? var num2 = parseFloat(prompt('第二個(gè)數(shù)值:')); ? ? ? ? ? ? ? ? ? ? alert('結(jié)果為:' + (num1 * num2)); ? ? ? ? ? ? ? ? ? ? continue; ? ? ? ? ? ? ? ? } else if (choose == 4) { ? ? ? ? ? ? ? ? ? ? alert('歡迎使用加法計(jì)算器,請(qǐng)輸入需要計(jì)算的兩個(gè)數(shù)值'); ? ? ? ? ? ? ? ? ? ? var num1 = parseFloat(prompt('第一個(gè)數(shù)值:')); ? ? ? ? ? ? ? ? ? ? var num2 = parseFloat(prompt('第二個(gè)數(shù)值:')); ? ? ? ? ? ? ? ? ? ? alert('結(jié)果為:' + (num1 / num2)); ? ? ? ? ? ? ? ? ? ? continue; ? ? ? ? ? ? ? ? } else { ? ? ? ? ? ? ? ? ? ? alert('歡迎再次使用'); ? ? ? ? ? ? ? ? ? ? alert('再見(jiàn)'); ? ? ? ? ? ? ? ? ? ? break; ? ? ? ? ? ? ? ? } ? ? ? ? ? ? } ? ? ? ? } </script>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- javascript寫(xiě)的簡(jiǎn)單的計(jì)算器,內(nèi)容很多,方法實(shí)用,推薦
- js實(shí)現(xiàn)簡(jiǎn)單計(jì)算器
- 簡(jiǎn)易js代碼實(shí)現(xiàn)計(jì)算器操作
- html+js實(shí)現(xiàn)簡(jiǎn)單的計(jì)算器代碼(加減乘除)
- js實(shí)現(xiàn)一個(gè)簡(jiǎn)易計(jì)算器
- 用JS寫(xiě)的簡(jiǎn)單的計(jì)算器實(shí)現(xiàn)代碼
- javascript-簡(jiǎn)單的計(jì)算器實(shí)現(xiàn)步驟分解(附圖)
- 純javascript代碼實(shí)現(xiàn)計(jì)算器功能(三種方法)
- Vue.js實(shí)現(xiàn)的計(jì)算器功能完整示例
- js網(wǎng)頁(yè)版計(jì)算器的簡(jiǎn)單實(shí)現(xiàn)
相關(guān)文章
Javascript控制div屬性動(dòng)態(tài)變化實(shí)例分析
這篇文章主要介紹了Javascript控制div屬性動(dòng)態(tài)變化,以實(shí)例形式較為詳細(xì)的分析了JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素屬性的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10如何利用JavaScript實(shí)現(xiàn)二叉搜索樹(shù)
這篇文章主要給大家介紹了關(guān)于如何利用JavaScript實(shí)現(xiàn)二叉搜索樹(shù)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04通過(guò)網(wǎng)頁(yè)查看JS源碼中漢字顯示亂碼的解決方法
這篇文章給大家主要介紹了通過(guò)網(wǎng)頁(yè)查看JS源碼的時(shí)候,發(fā)現(xiàn)漢字顯示是亂碼的解決方法,文中通過(guò)圖文詳解的介紹了解決的步驟,詳細(xì)會(huì)對(duì)大家很有幫助,有需要的朋友們下面來(lái)一起看看吧。2016-10-10輕松實(shí)現(xiàn)javascript圖片輪播特效
這篇文章主要幫助大家輕松實(shí)現(xiàn)javascript圖片輪播特效,點(diǎn)擊標(biāo)簽還可以實(shí)現(xiàn)圖片切換,感興趣的小伙伴們可以參考一下2016-01-01JS實(shí)現(xiàn)的簡(jiǎn)潔二級(jí)導(dǎo)航菜單雛形效果
這篇文章主要介紹了JS實(shí)現(xiàn)的簡(jiǎn)潔二級(jí)導(dǎo)航菜單雛形效果,通過(guò)簡(jiǎn)單的JavaScript響應(yīng)鼠標(biāo)事件遍歷頁(yè)面元素實(shí)現(xiàn)二級(jí)導(dǎo)航菜單切換的效果,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-10-10