<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. .NET Framework 3.5 安装

    今天vCenter服务器悲剧了,只好火速重新部署新vCenter服务器... Windows server 2016 中,安装VCenter 5.5 提示  未安装 .NET Framework 3. ...

  2. Idea中修改servlet模板

    1.点击左上角的File: Setting --> Editor --> File and Code Templates --> Other --> web -->Ser ...

  3. [kuangbin带你飞]专题1-23题目清单总结

    [kuangbin带你飞]专题1-23 专题一 简单搜索 POJ 1321 棋盘问题POJ 2251 Dungeon MasterPOJ 3278 Catch That CowPOJ 3279 Fli ...

  4. OBS直播和相关操作

    OBS Studio(Open Broadcaster Software)是一个免费的开源的视频录制和视频实时流软件.其有多种功能并广泛使用在视频采集,直播等领域. https://obsprojec ...

  5. SVN仓库导入文件

    分两种: 1.导入文件版本库从0开始 (适合新项目) 2.将其他SVN服务器中的版本库导入进来,版本库继承原SVN服务器的(适合SVN版本库迁移) 第一种: #mkdir –p /home/code/ ...

  6. python的多版本安装以及常见错误（长期更新）

    (此文长期更新)Python安装常见错误汇总 注:本教程以python3.6为基准 既然是总结安装过程中遇到的错误,就顺便记录一下我的安装过程好了. 先来列举一下安装python3.6过程中可能需要的 ...

  7. 56.doc values

    主要知识点 doc values     搜索的时候,要依靠倒排索引:在54小节中写到在聚合排序的时候如果仅仅依靠倒排索引的话是不能得出准确的结果的,需要依靠正排索引,所谓的正排索引,其实就是doc ...

  8. python爬虫09 | 上来，自己动 ！这就是 selenium 的牛逼之处

    作为一个男人 在最高光的时刻 就是说出那句 之后 还不会被人打 ... 虽然在现实生活中你无法这样 但是在这里 就让你体验一番 那种呼风唤雨的感觉 我们之前在爬取某些网站的时候 使用到了一些 pyth ...

  9. 0926mysql join的原理

    转自 http://www.cnblogs.com/shengdimaya/p/7123069.html MySQL JOIN原理   先看一下实验的两张表: 表comments,总行数28856 表 ...

  10. ExpressionTreeVisualizer

    看表达式的工具,这个工具后来微软不更新了,只支持到VS2013 表达式树的语法难度太大,语法和实现难度都大 相关文章 github地址