简易js代码实现计算器操作


Posted in Javascript onApril 15, 2013
<html>

<head>

<title>JS版计算器</title>

<link rel="stylesheet" type="text/css" href="">

<meta http-equiv="content-type" content="text/html;charset=utf-8">

<!--js代码可以放置在任意位置,按照先后顺序依次执行 一般放在head标签之间-->

<script type="text/javascript">
    /* 定义一个Calculator类*/

    function Calculator(){

        

        this.jisuan=function(num1,num2,oper){

            var res=0;

            switch(oper){

                case "+":

                    res=num1+num2;

                    break;

                case "-":

                    res=num1-num2;

                    break;

                case "*":

                    res=num1*num2;

                    break;

                case "/":

                    res=num1/num2;

                    break;

            }

            return res;

        }

    }

    //创建对象

    var calculator=new Calculator();
    /*定义全局变量*/

    var val=0; //放置输入的值

    var xval=0;//保存转换Number类型的值

    var temp=0; //保存第一次输入的值    

    var oper="";//保存输入的操作符
    /*获取输入数字*/

    function inputEvent(e){

    

        val=e.value

        var xsval=document.getElementById("inp1");        

        xsval.value+=val; //连续输入数字(String类型)

        //转换Number类型

        xval=parseFloat(xsval.value);

        

    }
    /*获取第一行的数据*/

    function inputPCB(e){

        //window.alert(e.value);

        var xsval=document.getElementById("inp1");

        if(e.value=="Clear"){

            xsval.value="";

        }else if(e.value=="Back"){

            /*这个功能还没有实现,有兴趣的朋友可以自己做一做*/
        }else if(e.value=="POWER"){

            //计算平方

            xsval.value=Math.pow(xsval.value,2);            

        }

    }
    /*输入操作符*/

    function inputOper(e){
        oper=e.value;

        //window.alert(typeof oper);

        //oper=oper.substr(0);

        if (e.value=="+"){

            var xsval=document.getElementById("inp1");

            //保存上次计算结果,并对字符串进行转换Number类型

            temp=parseFloat(xsval.value);

            //第一次输入的值设置为空

            xsval.value="";                        

        }else if(e.value=="-"){

            var xsval=document.getElementById("inp1");

            temp=parseFloat(xsval.value);

            xsval.value="";

        }else if(e.value=="*"){

            var xsval=document.getElementById("inp1");

            temp=parseFloat(xsval.value);

            xsval.value="";

        }else if(e.value=="/"){

            var xsval=document.getElementById("inp1");

            temp=parseFloat(xsval.value);

            xsval.value="";

        }

    }
    /*计算结果*/

    function inputEquel(e){
        var xsval=document.getElementById("inp1");        

        if(e.value=="="){

            //window.alert(xval);

            //调用对象方法

            xsval.value=calculator.jisuan(temp,xval,oper);

        }

    }

</script>

<!--css 样式-->

<style>

    input{

        width:60px;

    }

    #inp1{

        width:280px;

        text-align:right;

    }

</style>

</head>

<body>

    <table border="1">

        <!--显示结果行-->

        <tr><td colspan="4"><input id="inp1" type="text" value="" name="xianshi"/></td></tr>

        

        <!--第一行-->

        <tr><td><input type="button" value="POWER" onclick="inputPCB(this)"/></td><td><input type="button" value="Clear" onclick="inputPCB(this)"/></td><td><input type="button" value="Back"onclick="inputPCB(this)"/></td><td></td></tr>

        <!--第二行-->

        <tr><td><input type="button" value="1" onclick="inputEvent(this)"/></td><td><input type="button" value="2" onclick="inputEvent(this)"/></td><td><input type="button"value="3" onclick="inputEvent(this)"/></td><td><input type="button" value="4" onclick="inputEvent(this)"/></td></tr>

        <!--第三行-->

        <tr><td><input type="button" value="5" onclick="inputEvent(this)"/></td><td><input type="button" value="6" onclick="inputEvent(this)"/></td><td><input type="button"value="7" onclick="inputEvent(this)"/></td><td><input type="button" value="8" onclick="inputEvent(this)"/></td></tr>    

        <!--第四行-->

        <tr><td><input type="button" value="9" onclick="inputEvent(this)"/></td><td><input type="button" value="0" onclick="inputEvent(this)"/></td><td><input type="button"value="." onclick="inputEvent(this)"/></td><td><input type="button" value="=" onclick="inputEquel(this)"/></td></tr>

        <!--第五行-->

        <tr><td><input type="button" value="+" onclick="inputOper(this)"/></td><td><input type="button" value="-" onclick="inputOper(this)"/></td><td><input type="button"value="*" onclick="inputOper(this)"/></td><td><input type="button" value="/" onclick="inputOper(this)"/></td></tr>    

    

    </table>

</body>

</html>

简易js代码实现计算器操作

Javascript 相关文章推荐
JavaScript基本编码模式小结
May 23 Javascript
jquery删除提示框弹出是否删除对话框
Jan 07 Javascript
加随机数引入脚本不让浏览器读取缓存
Sep 04 Javascript
javascript检测flash插件是否被禁用的方法
Jan 14 Javascript
JQuery实现网页右侧随动广告特效
Jan 17 Javascript
javascript实现移动端上的触屏拖拽功能
Mar 04 Javascript
Bootstrap栅格系统的使用和理解2
Dec 14 Javascript
vue弹窗组件的实现示例代码
Sep 10 Javascript
javascript中toFixed()四舍五入使用方法详解
Sep 28 Javascript
浅析vue插槽和作用域插槽的理解
Apr 22 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 Javascript
jquery插件实现搜索历史
Apr 24 jQuery
JS中 用户登录系统的解决办法
Apr 15 #Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
Apr 15 #Javascript
JS 模态对话框和非模态对话框操作技巧汇总
Apr 15 #Javascript
jquery获得页面元素的坐标值实现思路及代码
Apr 15 #Javascript
Extjs优化(二)Form表单提交通用实现
Apr 15 #Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
Apr 15 #Javascript
Extjs优化(一)删除冗余代码提高运行速度
Apr 15 #Javascript
You might like
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
神盾加密解密教程(二)PHP 神盾解密
2014/06/08 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
拖动一个HTML元素
2006/12/22 Javascript
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
js前台分页显示后端JAVA数据响应
2013/03/18 Javascript
jquery实现智能感知连接外网搜索
2013/05/21 Javascript
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
javascript下拉列表中显示树形菜单的实现方法
2015/11/17 Javascript
Angular 2应用的8个主要构造块有哪些
2016/10/17 Javascript
jQuery+json实现动态创建复杂表格table的方法
2016/10/25 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
2017/02/17 Javascript
js正则表达式验证表单【完整版】
2017/03/06 Javascript
javascript中的面向对象
2017/03/30 Javascript
详解VUE调用本地json的使用方法
2019/05/15 Javascript
JS apply用法总结和使用场景实例分析
2020/03/14 Javascript
[03:58]2014DOTA2国际邀请赛 龙宝赛后解密DK获胜之道
2014/07/14 DOTA
python通过加号运算符操作列表的方法
2015/07/28 Python
详解Python requests 超时和重试的方法
2018/12/18 Python
使用matplotlib中scatter方法画散点图
2019/03/19 Python
PyQT实现菜单中的复制,全选和清空的功能的方法
2019/06/17 Python
python 实现提取log文件中的关键句子,并进行统计分析
2019/12/24 Python
python openpyxl模块的使用详解
2021/02/25 Python
CSS3 media queries + jQuery实现响应式导航
2016/09/30 HTML / CSS
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
介绍一下linux文件系统分配策略
2013/02/25 面试题
本科毕业生求职自荐信
2014/02/03 职场文书
致100米运动员广播稿
2014/02/14 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
教师岗位职责
2015/02/03 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书