原生JS實現(xiàn)簡單計算器功能

更新時間：2022年04月02日 18:10:47 作者：weixin_51276799

這篇文章主要為大家詳細介紹了原生JS實現(xiàn)簡單計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

使用html和css寫出計算器的基本結構和樣式，用原生JS實現(xiàn)計算器的加減乘除運算功能，只能計算簡單的兩位數(shù)的運算，不支持三個數(shù)連加或者連乘等等。一次計算完成之后再進行下一次運算不需要clear，可以直接進行下次運算。具體實現(xiàn)如下：

html結構：

<div id="box">
? ? ? ? <!-- 文本框要禁止用戶輸入，只能通過代碼中的input.value來修改 -->
? ? ? ? <input id="display" type="text" value="0" disabled> ? ?
? ? ? ? <div class="btn">1</div>
? ? ? ? <div class="btn">2</div>
? ? ? ? <div class="btn">3</div>
? ? ? ? <div class="btn">+</div>
? ? ? ? <div class="btn">4</div>
? ? ? ? <div class="btn">5</div>
? ? ? ? <div class="btn">6</div>
? ? ? ? <div class="btn">-</div>
? ? ? ? <div class="btn">7</div>
? ? ? ? <div class="btn">8</div>
? ? ? ? <div class="btn">9</div>
? ? ? ? <div class="btn">*</div>
? ? ? ? <div class="btn">C</div>
? ? ? ? <div class="btn">0</div>
? ? ? ? <div class="btn">=</div>
? ? ? ? <div class="btn">/</div>
</div>

css樣式：

#box {
? ? ? ? ? ? width: 500px;
? ? ? ? ? ? height: 600px;
? ? ? ? ? ? border: 1px solid #000000;
? ? ? ? }
?
? ? ? ? #display {
? ? ? ? ? ? width: 460px;
? ? ? ? ? ? height: 60px;
? ? ? ? ? ? margin: 15px;
? ? ? ? ? ? text-align: right;
? ? ? ? ? ? font-size: 60px;
? ? ? ? ? ? line-height: 60px;
? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? /* overflow: hidden; ?溢出隱藏 */
? ? ? ? ? ? /* text-overflow: ellipsis; ?文本溢出時顯示省略號 ?*/
? ? ? ? ? ? /* word-wrap: none; ? 強制不換行 */
? ? ? ? ? ? background: #ffffff;
? ? ? ? }
?
? ? ? ? .btn {
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 100px;
? ? ? ? ? ? border: 1px solid #000000;
? ? ? ? ? ? float: left;
? ? ? ? ? ? margin: 10px 11px;
? ? ? ? ? ? font-size: 40px;
? ? ? ? ? ? line-height: 100px;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? user-select: none;
?}

JS代碼：

firstValue這個全局變量存儲第一次輸入的數(shù)，input的input.value屬性也是一個變量，這個值既作為頁面上顯示的內容，也是輸入的數(shù)值。讓這兩個值進行運算，結果再顯示到輸入框中即可。bool變量作用：當一次運算完成之后所有數(shù)值清零。

如果要實現(xiàn)用上一次的結果繼續(xù)參與運算這個功能，可以再設置一個全局變量result來存儲每次運算后的結果，當下次輸入運算符號時，判斷firstValue和result，再決定用哪個值計算。當點擊C按鈕時，所有值清空，返回初始狀態(tài)。

var input = document.getElementById("display");
var btnCollection = document.getElementsByClassName("btn");
var type;
var firstValue = 0;
var bool = false;
?
? ?for (var i = 0; i < btnCollection.length; i++) {
? ?// 獲取到每個按鍵并添加點擊事件。點擊后會觸發(fā)function中代碼執(zhí)行。
? ? ? ? ? ? btnCollection[i].onclick = function () {
? ? ? ? ? ? ? ? if(bool){
? ? ? ? ? ? ? ? ? ? input.value = "0";
? ? ? ? ? ? ? ? ? ? firstValue = 0;
? ? ? ? ? ? ? ? ? ? type = undefined;
? ? ? ? ? ? ? ? ? ? bool = false;
? ? ? ? ? ? ? ? }
?
? ? ? ? ? ? ? ? // input.value = this.innerHTML; ? ? ?//顯示點擊的數(shù)字在文本框內
?
? ? ? ? ? ? ? ? if (!isNaN(Number(this.innerHTML))) {
? ? ? ? ? ? ? ? ? ? input.value = Number(input.value + this.innerHTML).toString();
? ? ? ? ? ? ? ? } else if (this.innerHTML !== "C" && this.innerHTML !== "=") {
? ? ? ? ? ? ? ? ? ? firstValue = Number(input.value);
? ? ? ? ? ? ? ? ? ? type = this.innerHTML;
? ? ? ? ? ? ? ? ? ? input.value = 0;
? ? ? ? ? ? ? ? } else if (this.innerHTML === "C") {
? ? ? ? ? ? ? ? ? ? firstValue = 0;
? ? ? ? ? ? ? ? ? ? type = undefined;
? ? ? ? ? ? ? ? ? ? input.value = "0";
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? switch (type) {
? ? ? ? ? ? ? ? ? ? ? ? case "+":
? ? ? ? ? ? ? ? ? ? ? ? ? ? input.value = (Number(input.value) + firstValue).toString();
? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? case "-":
? ? ? ? ? ? ? ? ? ? ? ? ? ? input.value = (firstValue - Number(input.value)).toString();
? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? case "*":
? ? ? ? ? ? ? ? ? ? ? ? ? ? input.value = (Number(input.value) * firstValue).toString();
? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? case "/":
? ? ? ? ? ? ? ? ? ? ? ? ? ? input.value = (firstValue / Number(input.value)).toString();
? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? bool = true;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }

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

您可能感興趣的文章: