<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. CryptoJS简单使用（request.js) 拦截器的使用

    首先准备一份明文和秘钥: var plaintText = 'aaaaaaaaaaaaaaaa'; // 明文var keyStr = 'bbbbbbbbbbbbbbbb'; // 一般key为一个字 ...

  2. 【转】虚拟化（四）：vsphere高可用功能前提-共享存储搭建

    vsphere高级功能HA.DRS.FT等,都需要有共享存储环境,即多台esxi主机同时连接一个共享存储,这样在新建虚拟机时,可以指定把虚拟磁盘保存在共享存储上,便于虚拟机在各个主机之间“飘移”. 常 ...

  3. Hadoop 使用小命令（2）

    一.查看一堆文件共有多少行 查看file1/file2目录下所有文件总共多少行 hadoop fs -text file1/file2/* | wc -l 二.正则表达式 hadoop fs -tex ...

  4. Clocksource tsc unstable

    内核在启动过程中会根据既定的优先级选择时钟源.优先级的排序根据时钟的精度与访问速度. 其中CPU中的TSC寄存器是精度最高(与CPU最高主频等同),访问速度最快(只需一条指令,一个时钟周期)的时钟源, ...

  5. 记一次获得 3 倍性能的 go 程序优化实践，及 on-cpu / off-cpu 火焰图的使用

    转自:https://mp.weixin.qq.com/s/9IKaXeWTiiQTFlvZzxgsEA 记一次获得 3 倍性能的 go 程序优化实践,及 on-cpu / off-cpu 火焰图的使 ...

  6. [luogu4158 SCOI2009] 粉刷匠(dp)

    传送门 Solution 把状态都记上暴力转移即可 Code //By Menteur_Hxy #include <queue> #include <cmath> #inclu ...

  7. 使用for或while循环来处理处理不确定页数的网页数据爬取

    本文转载自以下网站: Python For 和 While 循环爬取不确定页数的网页  https://www.makcyun.top/web_scraping_withpython16.html 需 ...

  8. Linux思维导图之rpm、yum、编译

    yum安装失败: 1.yum client 路径指向不正确:2.yum server 缓存未清理(yum clean all;yum makecache):3.网络不连通

  9. CentOS 7 x64下Apache+MySQL(Mariadb)+PHP5.6的安装

    每次搭建新服务器,都要来来回回把这些包再装一下,来来回回搞了不下20遍了吧,原来都是凭经验,配置过程中重复入坑是难免的,故写此文做个备忘.虽然有像xampp这样的集成包,但是在生产环境的Linux发行 ...

  10. windows 2003一个网卡绑定多个IP地址

    1.打开“网络连接”,选中需要添加多个IP的“本地连接”-->右键-->“属性”: 2.从“常规”中找到“Internet 协议(TCP/IP)属性”: 3.选择手动设置IP地址.网关.掩 ...