<div class="main"><h1>HTML5-计算器</h1>    
        <input id="num1" class="num" type="number"/>
        <span id="operator">+</span>
        <input id="num2" class="num" type="number"/>
        <a>=</a>
        <input id="num3" class="num" type="number" disabled="disabled"/>
        <input id="add" class="operator" type="button" value="+">
        <input id="sub" class="operator" type="button" value="-">
        <input id="mul" class="operator" type="button" value="*">
        <input id="div"     class="operator" type="button" value="÷">    
        <input id="qc"     class="operator" type="button" value="清除">

</div>

<script>
        var num1=document.getElementById("num1");
        var num2=document.getElementById("num2");
        var num3=document.getElementById("num3");
        var num;

add.onclick=function(){
    
        operator.innerHTML="+";     
        num3.value=parseInt(num1.value)+parseInt(num2.value);  
        }

sub.onclick=function(){
        
        operator.innerHTML="-"; 
        num3.value=parseInt(num1.value)-parseInt(num2.value);  
        }

mul.onclick=function(){
        
        operator.innerHTML="*";
        num3.value=parseInt(num1.value)*parseInt(num2.value); 
        }

div.onclick=function(){
        
        operator.innerHTML="/";
        num3.value=parseInt(num1.value)/parseInt(num2.value)     
        }
       qc.onclick=function(){
        num1.value='';
        num2.value='';         
        num3.value='';

}
 </script>

js-计算器的更多相关文章

  1. 早期练手:功能相对比较完善的 js 计算器

    第一次发博客,就先发一个自己早期,刚开始学前端时,用js写的一个计算器吧,计算功能比较少,只有 + - * / ,不过其他功能还是比较完善的,比如: 输出结果后,连续按"=",可以 ...

  2. js计算器案例

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...

  3. js计算器---转

    至今见过的一个还没问题的计算器,收藏在此. 转自javascript写的简单的计算器原文链接,谢分享! js部分 ar num=0,result=0,numshow="0"; va ...

  4. 简易js计算器

    使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. <!DOCTYPE html> <html> <head> ...

  5. JS计算器(自制)

    <!doctype html><html><header><meta charset="utf-8"><script src= ...

  6. js计算器

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  7. js 计算器转摘

    转自:https://mp.weixin.qq.com/s/Jxe3V7D0PFLvIFNZPlSyNg <table> <tr> <td colspan="4 ...

  8. 基于js白色简洁样式计算器

    今天给大家分享一款白色简洁样式计算器JS代码是一款精美简洁计算器JS代码插件网页特效,软件应用,后台应用JS计算器插件代码免费下载.适用浏览器:360.FireFox.Chrome.Safari.Op ...

  9. 纯JS实现房贷利率报表对比

    最近朋友买房,想计算下自己的房贷的还款情况,自己正好周末没事,从网上找来点代码修改,也算是对自己技术的巩固吧. 目前这个还只是个初级版本,暂时可以在PC上正常访问,将来会一步一步的把相继功能都加上的, ...

  10. windows10风格 springboot vue.js html 跨域 前后分离 activiti 整合项目框架源码

    官网:www.fhadmin.org 此项目为Springboot工作流版本 windows 风格,浏览器访问操作使用,非桌面应用程序. 1.代码生成器: [正反双向](单表.主表.明细表.树形表,快 ...

随机推荐

  1. js(1)不太注意的一些小事件

    确认选择 除了向用户提供信息,我们还希望从用户那里获得信息.这里就用到了confirm 消息对话框. 语法:confirm(str); 参数说明: str: 在消息对话框中要显示的文本,返回的是布尔值 ...

  2. Android开发环境的搭建之(五)DDMS的测试

    启动DDMS(Dalvik Debug Monitor Service) 测试Voice通话功能 左图Device选择MyPhone[Emulator- 5554],右图选择Emulator Cont ...

  3. static 和 extern

    外部函数:定义的函数能被本文件和其他文件访问,默认所有的情况都是外部函数,不允许有同名的外部函数 >>extern定义和声明一个外部函数(可以省略) 内部函数:定义的函数只能被本文件访问, ...

  4. 持续更新visual studio 命令、快捷键(原创)

    “格式化代码” Ctrl + E + D “注释” Ctrl + E + C “取消注释” Ctrl + E + U “点代替空白”   编辑-高级-显示空白 快捷键 Ctrl + E + S

  5. HTML5之Viewport详解

    做移动Web开发也有一年多的时间了,虽然手机上浏览器对于PC上来说很友好了,但是手机各种设备的显示尺寸分辨率大小不一也要花大心思兼容它们. 关于HTML5中Viewport的文章Google,百度一搜 ...

  6. HTTP缓存缓存机制

    http协议无状态,所以缓存设定从两方面考虑.客户端浏览器和服务器端. 浏览器端实现过期机制. 服务器端实现验证机制. 缓存机制. 为了减轻服务器负担,也减少网络传输数量.http1.0定义了Expi ...

  7. jquery EsayUi 里一个小弹框

    网站后台大多的数据展示就都用和此插件有着密切的关系: 来用一下这个小弹框吧: 一个Html里面的代码 <link rel='stylesheet' type='text/css' href='c ...

  8. Cannot resolve the collation conflict between "SQL_Latin1_General_CP1_CI_AS" and "Chinese_PRC_CI_AS" in the equal to operation.

    Scenario : 这个问题是我的存储过程中用到临时表时发生的. 应该是sql server 服务器的排序规则 (SQL_Latin1_General_CP1_CI_AS ) 与数据库的排序规则(C ...

  9. php 汉字转换成拼音

    class PinYin { private static $__data = array(); private static $__init = false; private static func ...

  10. SPI模式下MCU对SD卡的控制及操作命令

    一.前言 SD 卡有两个可选的通讯协议:SD 模式和 SPI模式 SD 模式是SD 卡标准的读写方式,但是在选用SD 模式时,往往需要选择带有SD 卡控制器接口的 MCU,或者必须加入额外的SD卡控制 ...