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

代码如下:

<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>

PS：这里再为大家推荐两款本站的在线计算器，都是采用js实现，且功能强大，相信对于大家深入了解JavaScript数学运算及web设计会有所帮助：

在线标准计算器：http://tools.jb51.net/jisuanqi/jsq

在线科学计算器：http://tools.jb51.net/jisuanqi/jsqkexue

赞 (0)

相关推荐

  • javascript-简单的计算器实现步骤分解(附图)

    javascript-简单的计算器实现步骤分解(附图)

    知识点: 1.数学运算"+,-,*,/"的使用 2.输入内容的判断,对于事件对象的来源的判断 效果:   代码: 复制代码 代码如下: <style> #calculate { line-height: 60px; text-align: center; background: #ccc; font-size: 16px; font-weight: bold; } #calculate tbody input{ width: 100%; height: 60px; back

  • JS实现的简单四则运算计算器功能示例

    JS实现的简单四则运算计算器功能示例

    本文实例讲述了JS实现的简单四则运算计算器功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <meta name="content-type" content="text/html; charset=UTF-8"> <head> <title>www.jb51.net 计算器 Calculator</title> <!

  • JSP实现计算器功能（网页版）

    jsp实现网页计算器代码如下:只有两个jsp页面 myCal.jsp如下: <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getS

  • javascript白色简洁计算器

    javascript白色简洁计算器

    本文中计算器代码很简单,你可以很容易把该网页特效应用到你的项目中. HTML 首先我们在网页上放置一个输入框及多个计算器按钮. <div id="calcuator"> <input type="text" id="input-box" value="0" size="21" maxlength="21" readonly="readonly" /&

  • 基于JSP实现一个简单计算器的方法

    本文实例讲述了基于JSP实现一个简单计算器的方法.分享给大家供大家参考.具体实现方法如下: index.jsp 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>  <%  String path = request.getContextPath();  String basePath = request.getSch

  • 用js编写的简单的计算器代码程序

    用js编写的简单的计算器代码程序

    最近编写的一个简单的计算器代码程序,先给大家展示一下 分享代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta htt

  • javascript实现简易计算器的代码

    javascript实现简易计算器的代码

    今天闲来无聊,想写点什么,突然想到用javascript写一个计算器.程序还存在很多的Bug,先在这里记录一下,以后慢慢更正. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.or

  • javascript简单计算器 可美化

    JS计算器代码: javascript简单计算器 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 说明: JavaScript eval() 函数 定义和用法 eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码. 返回值 通过计算 string 得到的值(如果有的话). 说明 该方法只接受原始字符串作为参数,如果 string 参数不是原始字符串,那么该方法将不作任何改变地返回.因此请不要为 eval() 函数传递 String 对象来作为参数. 如果试图

  • js实现模拟计算器退格键删除文字效果的方法

    本文实例讲述了js实现模拟计算器退格键删除文字效果的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

  • 用JS写的简单的计算器实现代码

    用JS写的简单的计算器实现代码

      1.本页效果图片     2.美化后的效果 Array.prototype.remove=function(index) { if(isNaN(index)||index>this.length){return false;} for(var i=0,n=0;i 0){ del = 1; this.tmp = this.register[0]; } if(_sign == '-'){ this.tmp = -this.tmp; }else{ this.tmp = Math.abs(this.

  • js网页版计算器的简单实现

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head> <meta http-equiv=&

随机推荐