<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制作计算器的更多相关文章

  1. 利用Javascript制作网页特效（其他常见特效）

    设置为首页和加入收藏夹 ①:在body标签内输入以下代码: <a onclick="this.style.behavior='url(#default#homepage)'; this ...

  2. 利用Javascript制作网页特效（窗口特效）

    全屏显示窗口 利用fullscreen=yes可以制作全屏显示窗口. ①:在body标签内输入以下代码: <div align="center"> <input ...

  3. 利用Javascript制作网页特效（图像特效）

    图像是文本的解释和说明,在网页中的适当位置放置一些图像,不仅可以使文本更加容易阅读,而且可以使网页更加具有吸引力. 当鼠标指针经过图像时图像振动效果 ①:在head标签内输入以下代码: <sty ...

  4. 利用Javascript制作网页特效（时间特效）

    在网页中经常可以看到各种各样的动态时间显示,在网页中合理地使用时间可以增加网页的时效感. 显示当前时间 getHours().getMinutes().getSeconds()分别获得当前小时数.当前 ...

  5. 【我们开发有力量之二】利用javascript制作批量网络投票机器人（自动改IP）

    帮朋友忙网络投票,粗粗地看了下,投票没有什么限制,仅有一个ip校验:每天每个ip仅能投票一次. 也就是说,可以写一个程序,自动更换IP地址(伪造IP地址),实现批量刷票的目的.于是我写了一个投票机器人 ...

  6. 利用JavaScript制作简易日历

    <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <met ...

  7. 利用javascript:void(0)制作假的提交按钮替代button

    在写html页面,我们很自然的在表单提交的地方采用button来作为提交按钮,但是,用<button type=”button”>按钮</button>作为提交代码会有个问题, ...

  8. 利用Unity3D制作简易2D计算器

    利用Unity3D制作简易2D计算器 标签(空格分隔): uiniy3D 1. 操作流程 在unity3DD中创建一个新项目 注意选择是2D的(因为默认3D) 在Assets框右键新建C#脚本 在新建 ...

  9. 如何用iframe标签以及Javascript制作时钟？

    如何利用iframe标签以及Javascript制作时钟? 如何制作一个时钟呢?效果如下图所示: 这里的时钟会不停的走,但是下面的页面是不会变得,这样就实现了我们想要的效果了.下面我将分为以下几个方面 ...

随机推荐

  1. linux 下取进程占用 cpu/内存 最高的前10个进程

    linux下获取占用CPU资源最多的10个进程,可以使用如下命令组合: ;|head linux下获取占用内存资源最多的10个进程,可以使用如下命令组合: ;|head 命令组合解析(针对CPU的,M ...

  2. day001 Python 计算机基础（2019年5月16日）

    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp作为一名程序员或者即将踏入IT行业的准程序员,学习任何一门编程语言,都需要有基本的计算机基础 ...

  3. IDEA中使用Database管理工具

    以下内容来自我的知乎回答IntelliJ IDEA中有什么让你相见恨晚的技巧? 说个冷门的,用IDEA操作数据库. 可能大部分不知道,IDEA是自带数据库管理工具的,类似于一个小型Navicat. 具 ...

  4. PAT_A1154#Vertex Coloring

    Source: PAT A 1154 Vertex Coloring (25 分) Description: A proper vertex coloring is a labeling of the ...

  5. Vue学习之路第二十篇：Vue生命周期函数-组件创建期间的4个钩子函数

    1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数 ...

  6. Win32_Window（day02）

    --- 窗口创建函数 ---#include <Windows.h> //窗口处理函数 HINSTANCE g_hIns; LRESULT CALLBACK WndProc(HWND hW ...

  7. 网络安全web部分

    Web安全 一.    SQL注入 1)    原理 通过构建特殊的输入作为参数传入Web应用程序,而这些输入大都是SQL语法里的一些组合,通过执行SQL语句进而执行攻击者所要的操作,其主要原因是程序 ...

  8. linux文件的特殊权限及隐藏权限

    基础知识 相信大家应该都知道linux的文件基本权限,使用ls -l命令可以显示文件的基本权限,"-rwxrwxrwx.",第一位表示文件的属性(是文件-  ,目录d等),后面每隔 ...

  9. Git 基础教程 之 删除文件

    ① 手动或命令 rm删除工作区的问价:       git checkout -- readme.txt 可恢复       checkout 实际上是用版本库里的替换工作区的版本 ② 删除了工作区文 ...

  10. ASP.NET Core多平台部署 (Windows Server+IIS与CentOS 7+Nginx)

    一,Windows Server+IIS部署 1,安装配置IIS,这个应该都不用多说了,教程一堆 2,下载安装.NET Core Runtime 与 .NET Core SDK,下载请点击下载地址,如 ...