利用JavaScript製作計算器_ZenDei技術網路在線

利用JavaScript製作計算器

-Advertisement-

查看原文 ...

<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style type="text/css">
    * {
        margin: 0;
        padding:10px;
        border: 0;
    }
    #text1,#text2 {
        width:150px;
        height: 40px;
        border: 1px solid #AFAEAE;
    } 
    #div1 {
        width:400px;
        height: 80px;
        border: 1px solid #AFAEAE;
    }
    #btn1,#btn5,#btn3,#btn4 {
        height: 50px;
        width: 40px;
        background: #E39E2D;
    }
</style>
</head>

<body>
<input type="text" id="text1" />
<input type="text" id="text2" />
<input type="button" id="btn1" value="加" />
<input type="button" id="btn5" value="減" />
<input type="button" id="btn3" value="乘" />
<input type="button" id="btn4" value="除" />
<br>
<br>
<div id="div1"></div>

<script type="text/javascript">
    var txt1=document.getElementById('text1');
    var txt2=document.getElementById('text2');
    var btn1=document.getElementById('btn1');
    var btn5=document.getElementById('btn5');
    var btn2=document.getElementById('btn3');
    var btn2=document.getElementById('btn4');
    var div=document.getElementById('div1');
    
    btn1.onclick=function()//加法
    {
        var n1=parseInt(txt1.value);
        var n2=parseInt(txt2.value);
        
        if(isNaN(n1))
            {
                div.innerHTML='您輸入的第一個數字有誤！';
                
            }
        else if(isNaN(n2))
            {
                div.innerHTML='您輸入的第一個數字有誤！';
            }
        else{
            div.innerHTML=(n1+n2);
        }  
    }
    
        btn5.onclick=function()//加法
    {
        var n1=parseInt(txt1.value);
        var n2=parseInt(txt2.value);
        
        if(isNaN(n1))
            {
                div.innerHTML='您輸入的第一個數字有誤！';
                
            }
        else if(isNaN(n2))
            {
                div.innerHTML='您輸入的第一個數字有誤！';
            }
        else{
            div.innerHTML=(n1-n2);
        }  
    }
    
        btn3.onclick=function()//乘法
    {
        var n1=parseInt(txt1.value);
        var n2=parseInt(txt2.value);
        
        if(isNaN(n1))
            {
                div.innerHTML='您輸入的第一個數字有誤！';
                
            }
        else if(isNaN(n2))
            {
                div.innerHTML='您輸入的第一個數字有誤！';
            }
        else{
            div.innerHTML=(n1*n2);
        }  
    }
        
            btn4.onclick=function()//除法
    {
        var n1=parseInt(txt1.value);
        var n2=parseInt(txt2.value);
        
        if(isNaN(n1))
            {
                div.innerHTML='您輸入的第一個數字有誤！';
                
            }
        else if(isNaN(n2))
            {
                div.innerHTML='您輸入的第一個數字有誤！';
            }
        else{
            div.innerHTML=(n1/n2);
        }  
    }
</script>
</body>
</html>

查看原文

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

-Advertisement-

更多相關文章

js 複製粘貼功能記錄

最近工作中需要在前端頁面中使用代碼完成剪貼板的讀寫，網上搜索了下相應的資料，記錄下... 這個功能有兩個辦法一個是js方式，一個是使用flash 一、JS方法 1、複製首先複製的過程分為兩步曲，無論是使用手工還是代碼，先來看看手工的 a、使用游標選中內容 b、通過ctrl + c 進行複製其實在 ...
Angular2快速入門-3.多個組件（分離新聞列表頁和詳細頁）

上篇（Angular2快速入門-2.創建一個新聞列表）已經完成新聞列表的展示，並且點擊新聞列表的時候，下麵可以展示出新聞的詳細信息，這節我們把新聞詳細和新聞列表頁面分離出來新聞詳細單獨一個component 第一、創建news-detail.component 1）創建news-detail.co ...
說說css中pt、px、em、rem都扮演了什麼角色

前段時間，終於仔仔細細的把pt、px、em、rem瞭解了一遍，簡單整理了一下做個記錄。 pt、px、em、rem都是什麼 pt單位名稱為點（Point），絕對長度單位。現在網頁中出現得很少甚至不出現，常用於印刷行業。單位換算：1in = 2.54cm = 25.4 mm = 101.6q = 72 ...
深入學習JS執行--創建執行上下文（變數對象，作用域鏈，this）

一、介紹本篇繼上一篇 "深入理解js執行單線程的JS" ，這次我們來深入瞭解js執行過程中的執行上下文。本篇涉及到的名詞：預執行，執行上下文，變數對象，活動對象，作用域鏈，this等二、預執行在上一篇說到，在js代碼被執行，執行上下文會被壓進執行棧中，但是在此之前還有一步工作要做，就是創建 ...
初探js和簡單隱藏效果

js:在頁面中用戶操作頁面時發生的效果都是Js功勞。操作有點擊，移入，和移出等。。。例1：通過display隱藏盒子當通過變數名var可以繼續實現：也可以通過透明的opacity,和高度來控制隱藏和顯示。製作百度登錄效果，點擊登錄，彈出登錄視窗，及退出（即使簡單也不可餓大意，以上便是di ...
sublime text配置node.js調試

1.安裝node-inspector npm install -g node-inspector 2.安裝完成之後啟動 inspector 服務： node-inspector & 3.在chrome瀏覽器中打開：http://127.0.0.1:8080/?port=5858 4.打開想要debu ...
github相關問題

一、項目編譯打包後生成的dist文件夾後；項目提交到github上dist文件提交不上去。在.gitignore文件，刪除一行二、更改github的語言屬性 .gitattributes文件：若項目是Vue屬性 ...
Date方法整理

作用：處理時間和日期一、創建方式 1.var mydate = new Date() —— 當前電腦時間 2.var mydate = new Date("2015-1-1") —— 創建時間二、Date內置方法 var myDate = new Date(); console.log(myD ...