2. 程式人生 > >利用JavaScript制作計算器

利用JavaScript制作計算器

阿新 • • 發佈：2017-11-23
body htm 文檔 script func 第一個 back fun pan 

<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>

查看原文

利用JavaScript制作計算器

相關推薦

利用JavaScript制作計算器

body htm 文檔 script func 第一個 back fun pan <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> <sty

利用JavaScript制作簡易日歷

utf-8 ul li lock length content 十個 over www mouseover <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta

JavaScript制作簡單的計算器

row 位置 onclick ava 例如 click border js計算 display 使用js來實現一個簡單的計算器功能，包括加減乘除以及清空內容。 下面的HTML的代碼： <!DOCTYPE html> <html> <he

解析：用 CSS3 和 JavaScript 制作徑向動畫菜單

select webkit on() making 它的 text tran 表示 har 原作者的解析（英文）：http://creative-punch.net/2014/02/making-animated-radial-menu-css3-javascript

web中利用邊框制作三角形

otto order 技術 布局 utf-8 meta height ora charset <!DOCTYPE html><html> 　　<head> 　　<meta charset="UTF-8"> 　　　　<

利用setInterval制作網頁計時器

one log div -- har fin 內容 jquery put 在javascript中利用 setInterval clearInterval定時 方法去控制顯示時間的增加 1 <!DOCTYPE html> 2 <html>

利用Bootstrap制作一個流行的網頁

設置 lock fun 技術 absolute dev ucc col dsm 首先是html承載內容： <!DOCTYPE html> <html lang="zh_CN"> <head> &l

自定義下拉框樣式，利用prototype制作

制作 pointer code javascrip .text att .com 自定義 cti <script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>

利用python制作在Linux服務器後臺定時運行的任務-郵件提醒

後臺進程 user rep 重復 什麽 pri nlog .exe 服務器 1. 自動任務的功能為: 定時掃描數據庫中的記錄，然後發郵件 代碼如下 scheduleMail.py import pymysql import smtplib from

3分鐘利用TurnipBit制作電子時鐘

elf str scl size display col nbsp 線路 sleep 轉載請註明：@小五義 http://www.cnblogs.com/xiaowuyi 歡迎加入討論群 64770604 TurnipBit（www.turni

利用pygame制作魔方的平面展示

from pda port clas com code hit .com 創建 為了更方便地驗證我們魔方變換代碼的準確性，特地利用pyggame設置一個簡單的平面展示，初步展示我們的魔方操作 利用pygame模塊的函數制作界面 screen = pygame.display

javascript制作圖javascript制作圖片無限懶加載，輕松又實用片無限懶加載，輕松又實用

javascript 前端 程序員 懶加載 知識點：for循環語句，DOM概念，元素獲取，動態布局，基本算法，節點操作，JQ與JS的關系與區別，JS的重要性，如何學習JS。 html代碼： <div id="box"><!--id="自定義的名稱" 命名規範

利用Photoshop制作二寸照片

利用Photoshop制作二寸照片方法/步驟:1.制作二寸照片前，首先需要知道二寸照片的尺寸大小值。這個可以在網上百度搜索。通過搜索，我們按照35mm*49mm制作。 2.打開軟件，制作二寸照片大小底面。選擇“文件——新建文件”後，彈出新建文件對話框，在其中輸入寬度、高度以及分辨率值300像素/英寸，點擊確定

利用CSS3制作網頁動畫

tro col 關鍵幀 網頁 style 旋轉 tex str nbsp CSS3變形 　　 　translate()平移函數 　　 　scale()縮放函數 　　 　skew()傾斜函數 　　 　rotate()旋轉函數 　　 CSS3過渡 　　 　過渡屬性 　　 　過渡

第九章 利用CSS3制作網頁動畫

關鍵幀 屬性 平移 ID 位移 ide 效果 速度 style 一.CSS3變形 CSS3變形是一些效果的集合 如平移、旋轉、縮放、傾斜效果 每個效果都可以稱為變形（transform），它們可以分別操控元素發生平移、旋轉、縮放、傾斜等變化 二.CS

Kali 利用setoolkit制作釣魚網站

too ali -o size src 51cto 默認 ffffff ima 實驗環境：一臺kali（為×××機 NAT模式） 一臺物理機（靶機） 在kali的終端上打開setoolkit 選擇第一個社會工程×××，選擇社會工程×××之後接著有11個選項. 選

HTML編程之利用jquery制作長圖動畫的方法

mouse -- 實現 存在 動畫 編程開發 ++ 利用 都是 在網站前端編程開發中，我們經常會遇到需要將圖片設置為背景圖，當鼠標移入時利用setTimeout定時器去控制改變background-position使得圖片逐幀向上移動，鼠標移除則控制向下移動，但要註意在鼠標

第九章 利用CSS3制作網頁動畫

1.5 linear brush 利用 媒體 判斷 true 100% 不能 一.CSS3變形transform 1.平移：translate(x,y) translateX(x) translateY(y) 註意：如果想只向X軸平移那麽可以trans

結合js利用畫布制作一個時鐘

狀態 interval width 三角函數 ets i++ 分享 getc 小時 首先 搭建canvas畫布格式： 動態獲取畫布的寬和高方便變換，利用translate將圓中心坐標改為0 0； <canvas width="800px" heig

利用Python制作王者榮耀出裝小助手，引來了老板的註意！

流程 app抓包 地址 什麽 環境搭建 命令 app shadow alt 導語 T_T並不玩這些遊戲。。。 單純來蹭個熱點。。。 大概是因為蹭熱點需要的技術含量比較低？ 就這樣吧~~~ 利用Python制作命令行版的王者榮耀出裝小助手。 Let‘s Go！ 開發工具 P