简易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 相关文章推荐
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
Oct 11 Javascript
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
js下通过prototype扩展实现indexOf的代码
Dec 08 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
Jun 25 Javascript
js读取被点击次数的简单实例(从数据库中读取)
Mar 07 Javascript
Javascript中的关键字和保留字整理
Oct 16 Javascript
JavaScript页面实时显示当前时间实例代码
Oct 23 Javascript
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
javascript匿名函数中的'return function()'作用
Oct 15 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
Nov 05 Javascript
小程序实现背景音乐播放和暂停
Jun 19 Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 Javascript
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
Destoon旺旺无法正常显示,点击提示“会员名不存在”的解决办法
2014/06/21 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
php抽象类用法实例分析
2015/07/07 PHP
yii添删改查实例
2015/11/16 PHP
PHP+JavaScript实现无刷新上传图片
2017/02/21 PHP
JavaScript URL参数读取改进版
2009/01/16 Javascript
JavaScript Memoization 让函数也有记忆功能
2011/10/27 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
详解Node.js项目APM监控之New Relic
2017/05/12 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
python使用7z解压apk包的方法
2015/04/18 Python
编写Python CGI脚本的教程
2015/06/29 Python
Python多进程机制实例详解
2015/07/02 Python
Python模块WSGI使用详解
2018/02/02 Python
Python图像处理之识别图像中的文字(实例讲解)
2018/05/10 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
Django学习笔记之为Model添加Action
2019/04/30 Python
详解Python二维数组与三维数组切片的方法
2019/07/18 Python
python安装本地whl的实例步骤
2019/10/12 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
python调用私有属性的方法总结
2020/07/24 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
python 装饰器的使用示例
2020/10/10 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
捷克时尚网上商店:OTTO
2018/03/15 全球购物
IWOOT美国:新奇的小玩意
2018/04/27 全球购物
sort命令的作用和用法
2012/11/04 面试题
医学专业五年以上个人求职信
2013/12/03 职场文书
初中化学教学反思
2014/01/23 职场文书
水电工岗位职责
2014/02/12 职场文书
2015年高中班主任工作总结
2015/04/30 职场文书
通用员工手册范本
2015/05/14 职场文书
观看《筑梦中国》纪录片心得体会
2016/01/18 职场文书