<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. 《JavaScript 闯关记》之简介

    简介 JavaScript 是面向 Web 的编程语言,绝大多数现代网站都使用了 JavaScript,并且所有的现代 Web 浏览器(电脑,手机,平板)均包含了 JavaScript 解释器. 这使 ...

  2. Android布局(一)layout_gravity 属性和 gravity属性的区别

    安卓中的 layout_gravity 属性和 gravity属性 有啥区别? LinearLayout有两个非常相似的属性: android:gravity与android:layout_gravi ...

  3. Oracle运维 专业的事情交给专业的人来做

    关于Oracle运维的重要性,随便写了几句,放在这儿和大家共勉. Oracle数据库在RDBMS中独占熬头,07年统计其市场份额占关系数据库市场的48.6%稳居首位,而且逐年增加,上升势头强劲.在使用 ...

  4. javascript 里找元素操作元素

      javascript  一.找到元素. var d = document.getElementById("") var d = document.getElementsByNa ...

  5. I/O重定向与管道

    1.输出重定向 (1)>  覆盖输出 (2)>>  追加输出 (3) set -C: 禁止对已经存在文件使用覆盖重定向: 强制覆盖输出,则使用 >| set +C: 关闭上述功 ...

  6. 【JQ成长笔记】关于$(this).index与$.each的使用

    本人菜鸟入门,小庙容不下大神的 O(∩_∩)O~~轻喷~ 工作当中响应某个需求,切换选项卡的一个效果,根据每个选项下的内容元素的总数不同而进行不同的html变化(如果选项卡下的内容为空就等于XXX,否 ...

  7. SQLServer 2008 R2 清空日志文件

    USE [master]GOALTER DATABASE FH2_SJH SET RECOVERY SIMPLE WITH NO_WAITGOALTER DATABASE FH2_SJH SET RE ...

  8. scrollTop,offset().top

    1.scrollTop是指滚动条滚动的距离 如果没有出现滚动条,则距离为0 css: <style type="text/css"> *{ margin: 0; pad ...

  9. paip.c++ qt 外部dll共享库的导入以及引用

    paip.c++ qt 外部dll共享库的导入以及引用 作者Attilax ,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http://blog.csdn. ...

  10. Struts2 二、为Action的参数注入值

    为Action参数注入值,主要使用在的场景为,Action的一个参数的值不是固定的是可以改变的,所以不能直接写在Action中,可以通过Struts配置的方式将值配置到Struts中,然后通过注入的方 ...