<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. for练习--凑法

    static void Main14购物卡(string[] args) { //小明单位发了50元的购物卡,他到超市买洗化用品,一是牙刷(5元),二是香皂(2元),三是牙膏(10元)怎么可以正好把五 ...

  2. ajax接收遍历处理json格式数据

    ajax在前后端的交互中应用非常广泛,通过请求后台接口接收处理json格式数据展现在前端页面. 下面我们来简单用 ajax在本地做一个接收并处理json的小例子 首先我们要新建一个叫做data的jso ...

  3. js第四章作用域

    一.动态的属性 //创建了一个变量并且保存在了变量person中 var person = new Object(); //为该对象添加了一个名为name的属性,将字符串值‘NiCholas’赋值给n ...

  4. linux初学(CentOS)之注意事项(一)

    linux严格区分大小写(命令,文件名,用户名等) linux所有内容以文件形式保存,包括硬件 硬盘文件是/dev/sd[a-p](a,p为盘符名) 光盘文件是/dev/sr0等 linux不靠扩展名 ...

  5. listview优化

    http://www.2cto.com/kf/201108/99928.html 项目用到ListView,由于要用到ImageView,图片源不是在资源里面的,没法使用资源ID,因此无法直接使用Si ...

  6. 中国25位最具影响力的IC人物

    当今许多企业的领导者几乎已经成为其企业的代名词,而在芯片业,我们听说的更多的是“龙芯”.“国芯”,他们的领导者的声音却鲜有传出.芯片业透出的强烈的民族色彩,也使这些隐身的企业家们的注意力更聚集在研发上 ...

  7. LINQpad 用法汇总

    // C# Expression //Courses // .Join ( // CourseSections, // course => course.CourseId, // section ...

  8. 【Python】iiblogs ——命令行下的网页收藏夹

    昨天和集训队的几位大大聊天,聊着聊着就聊到了博客的问题,发现几个人要么在CSDN 要么在博客园上, 要记住他们的所有的地址还真是不便,于是灵机一动,何不自己写一款小工具来存储打开他们的博客呢?于是将这 ...

  9. ssh 应用

    SSH反向连接及Autossh ssh 隧道: http://www.cnblogs.com/robinyjj/archive/2008/11/02/1325018.html This guy wri ...

  10. ceph for openstack快速部署实施

    for el6 即centos6 1,添加ceph 官方yum源 [root@ruiy ~]# cat /etc/yum.repos.d/ceph.repo[ceph-noarch]name=Ceph ...