基于JavaScript的簡易計算器功能

更新時間：2022年08月26日 09:39:03 作者：磚廠打工仔

這篇文章主要為大家詳細介紹了基于JavaScript的簡易計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)簡易計算器功能的具體代碼，供大家參考，具體內容如下

效果圖：

源代碼：

<!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ù)點歸為一類。class="num"
?? ?//2.把加減乘除運算符歸為一類。
?? ?//3.顯示框，退格鍵，歸零鍵，等號 單獨設置id。
?? ?//4.把顯示框，歸零鍵，等號，退格 標簽對象獲取出來。
?? ?//5.點擊數(shù)字，在顯示框上顯示
?? ?//6.要做運算，條件得兩個數(shù)和一個運算符
?? ?//7.定義三個變量用來接收第一個數(shù)，第二個數(shù)和運算符。
?? ?//8.四則運算
?? ?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++) {
?? ??? ?//給每個數(shù)字綁定單擊事件
?? ??? ?numArr[i].onclick = function() {
?? ??? ??? ?//判斷用戶是否在輸入小數(shù)點
?? ??? ??? ?if(this.innerText=="."){
?? ??? ??? ??? ?//alert("點小數(shù)點了");
?? ??? ??? ??? ?if(numValue1.indexOf(".")==-1&&numValue1.length>=1){
?? ??? ??? ??? ??? ?// var num = this.innerText;
?? ??? ??? ??? ??? ?// alert(num);
?? ??? ??? ??? ??? ?numValue1 += this.innerText;
?? ??? ??? ??? ??? ?//乘1會去掉首尾無效的0
?? ??? ??? ??? ??? ?ipt.value = numValue1*1;
?? ??? ??? ??? ?}
?? ??? ??? ?}else{
?? ??? ??? ??? ?// var num = this.innerText;
?? ??? ??? ??? ?// alert(num);
?? ??? ??? ??? ?numValue1 += this.innerText*1;
?? ??? ??? ??? ?//乘1會去掉首尾無效的0
?? ??? ??? ??? ?ipt.value = numValue1;
?? ??? ??? ?}
?? ??? ?}
?? ?}

?? ?//給運算符綁定單擊事件
?? ?var ysfArr = document.getElementsByClassName("ysf");
?? ?for (var i = 0; i < ysfArr.length; i++) {
?? ??? ?//給每個數(shù)字綁定單擊事件
?? ??? ?ysfArr[i].onclick = function() {
?? ??? ??? ?//當用戶點擊了運算符，把第一個數(shù)字給第二個數(shù)字，然后把第一個數(shù)字清空，用來接收用戶輸入的第二個數(shù)字
?? ??? ??? ?//alert(this.innerText);
?? ??? ??? ?if (numValue2 == '') {
?? ??? ??? ??? ?numValue2 = numValue1;
?? ??? ??? ??? ?numValue1 = '';
?? ??? ??? ??? ?czf = this.innerText;
?? ??? ??? ??? ?//alert("普通運算");
?? ??? ??? ?} else {
?? ??? ??? ??? ?//有可能會進行四則運算
?? ??? ??? ??? ?//alert("有可能會進行四則運算");
?? ??? ??? ??? ?if(numValue1!=''){
?? ??? ??? ??? ??? ?resultFun();
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ??? ?//保存操作符
?? ??? ??? ?czf = this.innerText;
?? ??? ?}
?? ?}

?? ?//給等號綁定單擊事件，進行運算
?? ?result.onclick = function() {
?? ??? ?resultFun();
?? ?}

?? ?//運算結果
?? ?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;
?? ??? ?}
?? ??? ?//四則運算時，把上一次運算的結果給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>

補充說明：仍有部分bug尚未解決，因作者水平有限，代碼僅供參考。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: