JavaScript仿計算器案例源代碼

来源:https://www.cnblogs.com/chenyingying0/archive/2020/01/11/12179018.html
-Advertisement-
Play Games

效果圖 index.html <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="calc.css"> <script type="text/javascript" sr ...


效果圖

index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
  <link rel="stylesheet" type="text/css" href="calc.css">
  <script type="text/javascript" src="calc.js"></script>
</head>
<body onload="init()">
     <div id="div1">    
         <div id="div2">
             <input type="text" name="num" id="num" />
         </div>
         <div id="div3">
             <input type="button" value="c" name="" id=""/>
             <input type="button" value="←" name="" id=""/>
             <input type="button" value="+/-" name="" id=""/>
             <input type="button" value="/" name="" id=""/>
             <input type="button" value="1" name="" id="n1"/>
             <input type="button" value="2" name="" id=""/>
             <input type="button" value="3" name="" id=""/>
             <input type="button" value="*" name="" id=""/>    
             <input type="button" value="4" name="" id=""/>
             <input type="button" value="5" name="" id=""/>
             <input type="button" value="6" name="" id=""/>
             <input type="button" value="-" name="" id=""/>
             <input type="button" value="7" name="" id=""/>
             <input type="button" value="8" name="" id=""/>
             <input type="button" value="9" name="" id=""/>
             <input type="button" value="+" name="" id=""/>
             <input type="button" value="0" name="" id=""/>
             <input type="button" value="." name="" id=""/>
             <input type="button" value="=" name="" id=""/>
             <input type="button" value="m" name="" id="imooc"/>
         </div>
     </div>
</body>
</html>

calc.css

*{
    margin:0px;
    padding:0px;
}
div{
    width: 170px;
}
#div1{
    top:60px;
    left: 100px;
    position: absolute;
}
input[type="button"]{
    width: 30px;
    margin-right: 5px;

}
input[type="text"]{
    width: 152px;
    text-align: right;
    background-color: #fff;
    border: 1px solid;
    padding-right: 5px;
    box-sizing: border-box;
}

input[type="button"]:hover{
    background-color: yellow;
    border: 1px solid;
}

calc.js

function init(){
    var num=document.getElementById("num");
    num.value=0;
    num.disabled="disabled";

    var oButton=document.getElementsByTagName("input");
    var btn_num1;
    var fh;
    for(var i=0;i<oButton.length;i++){
        oButton[i].onclick=function(){
            if(isNumber(this.value)){
                if(isNull(num.value)){
                    num.value=this.value;
                }else{
                    num.value=num.value+this.value;
                }
            }else{
                var btn_num=this.value;
                
                switch(btn_num){
                    case "+":
                        btn_num1=Number(num.value);
                        num.value=0;
                        fh="+";
                        break;
                    case "-":
                        btn_num1=Number(num.value);
                        num.value=0;
                        fh="-";
                        break;
                    case "*":
                        btn_num1=Number(num.value);
                        num.value=0;
                        fh="*";
                        break;
                    case "/":
                        btn_num1=Number(num.value);
                        num.value=0;
                        fh="/";
                        break;
                    case ".":
                        num.value=dec_number(num.value);
                        break;
                    case "←":
                        num.value=back(num.value);
                        break;
                    case "c":
                        num.value="0";
                        break;
                    case "+/-":
                        num.value=sign(num.value);
                        break;
                    case "=":
                        switch(fh){
                            case "+":
                              num.value=btn_num1+Number(num.value);
                              break;
                            case "-":
                               num.value=btn_num1-Number(num.value);
                               break;
                            case "*":
                               num.value=btn_num1*Number(num.value);
                               break;
                            case "/":
                               if(Number(num.value)==0){
                                       alert("除數不能是0");
                                     num.value=0;
                               }else{
                                     num.value=btn_num1/Number(num.value);
                               }
                               
                               break;
                        }
                        break;
                }
            }
        }
    }
}
/*正負號*/
function sign(n){
   n=Number(n)*-1;
   return n;
}
/*退位鍵*/
function back(n){
   n=n.substr(0,n.length-1);
   if(isNull(n)){
         n="0";
   }
   return n;
}
/*小數點*/
function dec_number(n){
   if(n.indexOf(".")==-1){
      n=n+".";
   }
   return n;
}
/*驗證文本框是否為空或者0*/
function isNull(n){
   if(n=="0" || n.length==0){
       return true;
   }else{
          return false;
   }
}

function isNumber(n){
  return  !isNaN(n);
}

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • vue自定義日期選擇，類似美團日期選擇，日曆控制項，vue日曆區間選擇
    一個日曆的控制項，基於vue的，可以日曆區間選擇，可用於酒店日曆區間篩選，動手能力強，可以修改成小程式版本的，先上效果圖 裡面的顏色樣式都是可以修改的 選擇範圍效果 話不多說，直接上乾貨，代碼可以直接複製訪問 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> ...
  • 在用vue-cli4創建的vue2.x項目中通過vue-fontawesome使用fontawesome5
    前言 本文寫於2020年1月11日，僅提供最基本的引用方法，參考fontawesome5英文官方文檔和vue-fontawesome英文官方文檔。 正文 在vue項目中使用fontawesome5圖標，不需要引入fontawesome組件，直接引入vue-fontawesome和相關組件就可以了。 ...
  • JavaScript-EventLoop-事件迴圈
    2020-01-11 EventLoop-事件迴圈 一、學習事件迴圈之前，先學習幾個英語片語 EventLoop 事件迴圈 Event Queue 事件隊列 Event Table 事件表macro-task 巨集任務micro-task 微任務 二、再來一道事件機制的題 console.log(1) ...
  • 迷你PS小程式-集成的開放式畫報、油墨電子簽名、圖片拖拽可單獨食用
    米娜桑，哦哈喲~ 個人製作，該文章主要講解最近基於 "uni app" 框架編寫的集圖文拖拽等多方位編輯、油墨電子簽名、開放式海報於一體的小程式的製作思路和實現代碼。 目錄 1、完整源碼鏈接 2、實現思路 3、核心代碼 3 1、圖文多方位編輯 3 2、油墨電子簽名 3 3、開放式海報 3 4、小結 ...
  • css的三種導入方式
    內聯樣式表 內部樣式表 外部樣式表 創建一個cssTest.css的css文件 使用外部樣式表 完整測試代碼 css文件 css三種導入方式的優先順序 內聯樣式表 內部樣式表 外部樣式表 ...
  • es6種for迴圈中let和var區別
    let和var區別： 1 for(var i=0;i<5;i++){ 2 setTimeout(()=>{ 3 console.log(i);//5個5 4 },100) 5 } 6 console.log(i);//5 7 console.log(' ') 8 9 for(let j=0;j<5; ...
  • javascript當中靜態方法和prototype用法
    6）靜態方法和prototype（難）例 3.6.1<head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/></head><script> /*note that 馬克-to-win： static var ...
  • react-antd-input-onPressEnter
    2020-01-11 ant-Design ，Input ， onPressEnter 和 onChange 的區別 onChange 輸入內容的回調 onPressEnter 按下回車的回調 需求：看下圖，右邊欄配置開關組件的內容。輸入內容，不想要左邊實時更改 原來的代碼：<Input defau ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類