<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. monkey测试环境搭建 及 操作步骤

    1.环境搭建 a.下载安卓SDK 链接:https://pan.baidu.com/s/1-OB6UVPvl5-N-vFdykfMmA 提取码:3spx b.配置环境变量(配置完成,重启系统,配置生效 ...

  2. Android 性能测试初探（三）

    书接上文 Android 性能测试初探(二) 本文接着往下聊,今天主聊 CPU 及 内存 看到这两个名词,做过PC性能测试的就比较熟悉了,同样的性能测试关注点 :) 首先说说内存,移动端关注的是内存消 ...

  3. Python 集合 day3

    集合(set)是一个无序的不重复元素序列. 可以使用大括号 { } 或者 set() 函数创建集合,集合用{},里面是一个一个元素,不同于key-value形式的字典: 注意:创建一个空集合必须用 s ...

  4. 分治FFT模板

    题目链接:https://www.luogu.org/problemnew/show/P4721 总结了一下蒟蒻FFT/NTT容易写错的地方: ​ 1.rev数组求错. ​ 2.cdq注意顺序:先递归 ...

  5. php第四节课

    对象 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...

  6. 进程（day09）

    进程的管理 一.进程的基础 进程和程序的区别 每个进程有自己的pid.PCB 操作系统上运行的所有进程构成一颗树. 如何查看这颗树? pstree() 树根进程是init pid是 进程间的亲缘关系两 ...

  7. [luogu2624 HNOI2008]明明的烦恼 (prufer+高精)

    传送门 Solution 根据prufer序列做的题,具体可以看这里 还知道了一种避免高精除的方法quq Code #include <cmath> #include <cstdio ...

  8. python中的二进制、八进制、十六进制

    python中通常显示和运算的是十进制数字. 一.python中的二进制 bin()函数,将十进制转换为二进制,0b是二进制的前缀.如: >>> bin(10) '0b1010' 二 ...

  9. Docker学习总结（16）——当当网Docker应用实践

    随着Docker成为当下热门的容器技术,各大公司以及中小团队都开始选择Docker来进行应用部署,从原有部署方式迁移到Docker方式过程中难免会遇到各种问题,本次分享主要介绍当当网个性化推荐组应用D ...

  10. JVM常用参数(内存分配 内存回收日志)

    内存监控  -verbose:gc 测试代码 public static void main(String[] args){ List<Classes> classes=new Array ...