<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. 构造函数+原型的js混合模式

    function Parent(){ this.name = "李小龙"; this.age = "30"; };Parent.prototype.lev=fu ...

  2. [NOI2015]软件包管理器 树链剖分_线段树

    没有太大难度,刷水有益健康 Code: // luogu-judger-enable-o2 #include <bits/stdc++.h> #define setIO(s) freope ...

  3. eas之视图冻结与解冻

    // 冻结视图 table.getViewManager().freeze(verticalIndex, horizonIndex); //冻结视图:该方法在table还没显示的时候使用,也就是该方法 ...

  4. bpm被攻击事件

    bpm登录不上,服务器是windows2008,从深信服上面设置了ddos每秒钟连接超5000次封锁,阻断后面的IP连接,,深信服DDOS日志没有记录 在bpm服务器上面通过netstat -a查看发 ...

  5. Linux启用ftp服务及连接

    虚拟机的系统是centos6.3 第一步.启动ftp service vsftpd restart 提示 vsftpd: 未被识别的服务 解决方法是升级vsftpd服务 yum install vsf ...

  6. 23.partial update

    主要知识点 1.什么是partial update(部分修改) 2.partial update的语法 3.在es内部partial update的实现过程 4.partial update优点 一. ...

  7. tween.js缓动（补间动画）

    一.理解tween.js 如果看到上面的已经理解了,可以跳过下面的部分.下面为对Tween.js的解释 下面就介绍如何使用这个Tween了,首先b.c.d三个参数(即初始值,变化量,持续时间)在缓动开 ...

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

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

  9. Beautifulsoup提取特定丁香园帖子回复

    DataWhale-Task3(Beautifulsoup爬取丁香园) 简要分析 完整代码 结果图 参考资料 简要分析 任务3:爬取丁香园论坛特定帖子,包括帖子主题,帖子介绍,回贴内容(用户名,用户头 ...

  10. Java并发之CAS与AQS简介

    1,什么是CAS CAS(Compare And Swap),即比较并交换.是解决多线程并行情况下使用锁造成性能损耗的一种机制,CAS操作包含三个操作数——内存位置(V).预期原值(A)和新值(B). ...