基于JavaScript的簡(jiǎn)易計(jì)算器功能
更新時(shí)間：2022年08月26日 09:39:03 作者：磚廠打工仔
這篇文章主要為大家詳細(xì)介紹了基于JavaScript的簡(jiǎn)易計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)簡(jiǎn)易計(jì)算器功能的具體代碼，供大家參考，具體內(nèi)容如下
效果圖：
源代碼：
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ??? ?<style type="text/css">
?? ??? ??? ?* {
?? ??? ??? ??? ?margin: 0;
?? ??? ??? ??? ?padding: 0;
?? ??? ??? ?}
?? ??? ??? ?.dome {
?? ??? ??? ??? ?width: 400px;
?? ??? ??? ??? ?height: 430px;
?? ??? ??? ??? ?margin: 50px auto;
?? ??? ??? ??? ?background: #CCC;
?? ??? ??? ??? ?padding: 20px;
?? ??? ??? ?}
?? ??? ??? ?.dome>input {
?? ??? ??? ??? ?width: 100%;
?? ??? ??? ??? ?height: 50px;
?? ??? ??? ??? ?font-size: 24px;
?? ??? ??? ??? ?margin-bottom: 30px;
?? ??? ??? ?}
?? ??? ??? ?.dome>button {
?? ??? ??? ??? ?width: 90px;
?? ??? ??? ??? ?height: 60px;
?? ??? ??? ??? ?background-color: white;
?? ??? ??? ??? ?border: none;
?? ??? ??? ??? ?margin: 5px;
?? ??? ??? ??? ?float: left;
?? ??? ??? ??? ?font-size: 18px;
?? ??? ??? ?}
?? ??? ??? ?button:hover {
?? ??? ??? ??? ?cursor: pointer;
?? ??? ??? ?}
?? ??? ?</style>
?? ?</head>
?? ?<body>
?? ??? ?<div class="dome">
?? ??? ??? ?<!-- disabled="disabled" 禁用輸入框 -->
?? ??? ??? ?<input type="" name="" id="ipt" value="0" />
?? ??? ??? ?<button class="num">7</button>
?? ??? ??? ?<button class="num">8</button>
?? ??? ??? ?<button class="num">9</button>
?? ??? ??? ?<button id="del">←</button>
?? ??? ??? ?<button class="num">4</button>
?? ??? ??? ?<button class="num">5</button>
?? ??? ??? ?<button class="num">6</button>
?? ??? ??? ?<button class="ysf">+</button>
?? ??? ??? ?<button class="num">1</button>
?? ??? ??? ?<button class="num">2</button>
?? ??? ??? ?<button class="num">3</button>
?? ??? ??? ?<button class="ysf">-</button>
?? ??? ??? ?<button>%</button>
?? ??? ??? ?<button class="num">0</button>
?? ??? ??? ?<button class="num">.</button>
?? ??? ??? ?<button class="ysf">*</button>
?? ??? ??? ?<button id="clear">AC</button>
?? ??? ??? ?<button class="ysf">/</button>
?? ??? ??? ?<button id="result" style="width: 190px; background-color: #333; color: white;">=</button>
?? ??? ?</div>
?? ?</body>
</html>
<script type="text/javascript">
?? ?//1.把數(shù)字和小數(shù)點(diǎn)歸為一類(lèi)。class="num"
?? ?//2.把加減乘除運(yùn)算符歸為一類(lèi)。
?? ?//3.顯示框，退格鍵，歸零鍵，等號(hào) 單獨(dú)設(shè)置id。
?? ?//4.把顯示框，歸零鍵，等號(hào)，退格 標(biāo)簽對(duì)象獲取出來(lái)。
?? ?//5.點(diǎn)擊數(shù)字，在顯示框上顯示
?? ?//6.要做運(yùn)算，條件得兩個(gè)數(shù)和一個(gè)運(yùn)算符
?? ?//7.定義三個(gè)變量用來(lái)接收第一個(gè)數(shù)，第二個(gè)數(shù)和運(yùn)算符。
?? ?//8.四則運(yùn)算
?? ?var numValue1 = '';
?? ?var numValue2 = '';
?? ?var czf = '';
?? ?var ipt = document.getElementById("ipt");
?? ?var del = document.getElementById("del");
?? ?var clear = document.getElementById("clear");
?? ?var result = document.getElementById("result");
?? ?var numArr = document.getElementsByClassName("num");
?? ?for (var i = 0; i < numArr.length; i++) {
?? ??? ?//給每個(gè)數(shù)字綁定單擊事件
?? ??? ?numArr[i].onclick = function() {
?? ??? ??? ?//判斷用戶(hù)是否在輸入小數(shù)點(diǎn)
?? ??? ??? ?if(this.innerText=="."){
?? ??? ??? ??? ?//alert("點(diǎn)小數(shù)點(diǎn)了");
?? ??? ??? ??? ?if(numValue1.indexOf(".")==-1&&numValue1.length>=1){
?? ??? ??? ??? ??? ?// var num = this.innerText;
?? ??? ??? ??? ??? ?// alert(num);
?? ??? ??? ??? ??? ?numValue1 += this.innerText;
?? ??? ??? ??? ??? ?//乘1會(huì)去掉首尾無(wú)效的0
?? ??? ??? ??? ??? ?ipt.value = numValue1*1;
?? ??? ??? ??? ?}
?? ??? ??? ?}else{
?? ??? ??? ??? ?// var num = this.innerText;
?? ??? ??? ??? ?// alert(num);
?? ??? ??? ??? ?numValue1 += this.innerText*1;
?? ??? ??? ??? ?//乘1會(huì)去掉首尾無(wú)效的0
?? ??? ??? ??? ?ipt.value = numValue1;
?? ??? ??? ?}
?? ??? ?}
?? ?}
?? ?//給運(yùn)算符綁定單擊事件
?? ?var ysfArr = document.getElementsByClassName("ysf");
?? ?for (var i = 0; i < ysfArr.length; i++) {
?? ??? ?//給每個(gè)數(shù)字綁定單擊事件
?? ??? ?ysfArr[i].onclick = function() {
?? ??? ??? ?//當(dāng)用戶(hù)點(diǎn)擊了運(yùn)算符，把第一個(gè)數(shù)字給第二個(gè)數(shù)字，然后把第一個(gè)數(shù)字清空，用來(lái)接收用戶(hù)輸入的第二個(gè)數(shù)字
?? ??? ??? ?//alert(this.innerText);
?? ??? ??? ?if (numValue2 == '') {
?? ??? ??? ??? ?numValue2 = numValue1;
?? ??? ??? ??? ?numValue1 = '';
?? ??? ??? ??? ?czf = this.innerText;
?? ??? ??? ??? ?//alert("普通運(yùn)算");
?? ??? ??? ?} else {
?? ??? ??? ??? ?//有可能會(huì)進(jìn)行四則運(yùn)算
?? ??? ??? ??? ?//alert("有可能會(huì)進(jìn)行四則運(yùn)算");
?? ??? ??? ??? ?if(numValue1!=''){
?? ??? ??? ??? ??? ?resultFun();
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ??? ?//保存操作符
?? ??? ??? ?czf = this.innerText;
?? ??? ?}
?? ?}
?? ?//給等號(hào)綁定單擊事件，進(jìn)行運(yùn)算
?? ?result.onclick = function() {
?? ??? ?resultFun();
?? ?}
?? ?//運(yùn)算結(jié)果
?? ?function resultFun() {
?? ??? ?var one = Number(numValue2);
?? ??? ?var two = Number(numValue1);
?? ??? ?var r = null;
?? ??? ?switch (czf) {
?? ??? ??? ?case '+':
?? ??? ??? ??? ?r = one + two;
?? ??? ??? ??? ?break;
?? ??? ??? ?case '-':
?? ??? ??? ??? ?r = one - two;
?? ??? ??? ??? ?break;
?? ??? ??? ?case '*':
?? ??? ??? ??? ?r = one * two;
?? ??? ??? ??? ?break;
?? ??? ??? ?case '/':
?? ??? ??? ??? ?if (two == 0) {
?? ??? ??? ??? ??? ?alert("除數(shù)不能為0");
?? ??? ??? ??? ??? ?numValue1 = '';
?? ??? ??? ??? ??? ?numValue2 = '';
?? ??? ??? ??? ??? ?czf = '';
?? ??? ??? ??? ??? ?r = 0;
?? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ?r = one / two;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?break;
?? ??? ?}
?? ??? ?//四則運(yùn)算時(shí)，把上一次運(yùn)算的結(jié)果給numValue2，然后把numValue1 清空
?? ??? ?
?? ??? ?numValue2 = new Number(r).toFixed(4)*1;
?? ??? ?numValue1='';
?? ??? ?ipt.value = numValue2;
?? ?}
?? ?//歸零鍵
?? ?clear.onclick = function() {
?? ??? ?numValue1 = '';
?? ??? ?numValue2 = '';
?? ??? ?czf = '';
?? ??? ?ipt.value = '0';
?? ?}
?? ?//退格鍵
?? ?del.onclick = function() {
?? ??? ?if (numValue1.length >= 1) {
?? ??? ??? ?numValue1 = numValue1.substring(0, numValue1.length - 1);
?? ??? ??? ?ipt.value = numValue1;
?? ??? ?}else if(numValue2.length >= 1){
?? ??? ??? ?numValue2 = numValue2.substring(0, numValue2.length - 1);
?? ??? ??? ?ipt.value = numValue2;
?? ??? ?}else {
?? ??? ??? ?numValue1 = '';
?? ??? ??? ?numValue2 = '';
?? ??? ??? ?czf = '';
?? ??? ??? ?ipt.value = '0';
?? ??? ?}
?? ?}
</script>補(bǔ)充說(shuō)明：仍有部分bug尚未解決，因作者水平有限，代碼僅供參考。
以上就是本文的全部?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)文章
html中使用javascript調(diào)用本地程序(exe、doc等)實(shí)現(xiàn)代碼
調(diào)用本地程序(exe，doc等)使用html中的javascript實(shí)現(xiàn)，不可思議吧，接下來(lái)為大家詳細(xì)介紹下，感興趣的朋友可以參考下哈2013-04-04
javascript中如何快速獲取數(shù)組最后一個(gè)值
這篇文章主要介紹了javascript中如何快速獲取數(shù)組最后一個(gè)值問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
在JavaScript中實(shí)現(xiàn)命名空間...2006-11-11
JavaScript實(shí)現(xiàn)控制并發(fā)請(qǐng)求數(shù)量的方法詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript如何實(shí)現(xiàn)控制并發(fā)請(qǐng)求數(shù)量,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02
BootStrap智能表單實(shí)戰(zhàn)系列(七)驗(yàn)證的支持
這篇文章主要介紹了BootStrap智能表單實(shí)戰(zhàn)系列(七)驗(yàn)證的支持 ,凡是涉及到用戶(hù)編輯信息然后保存的頁(yè)面，都涉及到一個(gè)數(shù)據(jù)是否符合要求的檢查，需要客服端和服務(wù)器端的校驗(yàn)的問(wèn)題，本文介紹非常詳細(xì)，具有參考價(jià)值，需要的朋友可以參考下2016-06-06
作用域（scope）是javascript中一項(xiàng)令人棘手的的特性。所有面向?qū)ο缶幊陶Z(yǔ)言都有某種形式的作用域，不過(guò)和把這個(gè)概念放在什么上下文中有關(guān)。在javascript里，作用域是由函數(shù)劃分的。2009-06-06
簡(jiǎn)單實(shí)現(xiàn)js無(wú)縫滾動(dòng)效果
這篇文章主要教大家如何簡(jiǎn)單實(shí)現(xiàn)js無(wú)縫滾動(dòng)效果，js輪播圖實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要為大家詳細(xì)介紹了微信小程序左右滑動(dòng)刪除事件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
JS+CSS實(shí)現(xiàn)的簡(jiǎn)單折疊展開(kāi)多級(jí)菜單效果
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)的簡(jiǎn)單折疊展開(kāi)多級(jí)菜單效果,涉及JavaScript頁(yè)面元素的遍歷及動(dòng)態(tài)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
javascript生成img標(biāo)簽的3種實(shí)現(xiàn)方法(對(duì)象、方法、html)
這篇文章主要介紹了javascript生成img標(biāo)簽的3種實(shí)現(xiàn)方法,包括對(duì)象、方法、html三種實(shí)現(xiàn)方式,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12