您的位置:68399皇家赌场 > 服务器租用 > javascript-轻巧的总计器完成步骤分解(附图)

javascript-轻巧的总计器完成步骤分解(附图)

发布时间:2019-08-03 00:23编辑:服务器租用浏览(87)

        /*输入操作符*/
        function inputOper(e){

    复制代码 代码如下:

     

            }else if(e.value=="POWER"){
                //计算平方
                xsval.value=Math.pow(xsval.value,2);           
            }
        }

    //设置显示器的值
    function setScreen(num){
    calculate_outPut.value=num;
    }
    //获取荧屏的值
    function getScreen(){
    return calculate_outPut.value;
    }

    1.js的概述

    1. js是一种脚本语言
    2. js是可插入html页面包车型大巴编制程序代码
    3. js插入html页面后,可由具备的浏览器执

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

    第五:过滤操作数,达成总计。

    11.Location目的属性

    www.68399.com 1

    PS:这里再为大家推荐三款本站的在线总括器,都以运用js达成,且作用庞大,相信对于豪门深入精通JavaScript数学生运动算及web设计会有着扶助:

    var result=0;//总计结果
    var isReset=false;//是或不是再次安装
    var operation;//操作符

    6.html的window对象

      *setInterval();每隔多少纳秒施行有些表明式(重复试行)

      *setTimeout();隔 多少纳秒奉行多少个表达式(不另行实施,只进行一遍)

      *clearInterval();取消由setInterval()设置的timeout;

      *clearTimeout();打消由setTimeout方法设置的timeout;

    www.68399.com 2

    您大概感兴趣的稿子:

    • JavaScript数据结构中栈的施用之表达式求值难点详解
    • js表达式计算器代码
    • 简易js代码达成总计器操作
    • js达成轻巧统计器
    • js网页版总计器的简要达成
    • 纯javascript代码完成总计器功效(二种形式)
    • html js完毕轻易的总计器代码(加减乘除)
    • 功能很全的精品JS总括器
    • js达成模拟总结器退格键删除文字效果的方法
    • 简言之完结JS总计器功用
    • JS完毕可针对算术表达式求值的计算器功用示例

    9.Screen对象属性

    www.68399.com 3

        /* 定义一个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();

    知识点:
      1、数学生运动算“ ,-,*,/”的使用
      2、输入内容的推断,对于事件指标的起点的判别
    效果:
    www.68399.com 4 
    代码:

    13.js的放到对象

    www.68399.com 5

        /*获得输入数字*/
        function inputEvent(e){
       
            val=e.value
            var xsval=document.getElementById("inp1");       
            xsval.value =val; //连续失败入数字(String类型)
            //转换Number类型
            xval=parseFloat(xsval.value);
           
        }

    //总括对象
    var operateExp={
    ' ':function(num1,num2){return num1 num2;},
    '-':function(num1,num2){return num1-num2;},
    '*':function(num1,num2){return num1*num2;},
    '/':function(num1,num2){return num2===0?0:num1/num2;}
    }

     19.上边是七个js css实现的一个计算器的效应图和代码

    www.68399.com 6

    代码

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>总计器革新</title>
            <style>
                table{
                    border-collapse: collapse;
                    margin: auto auto;
                }
                td{
                    width: 150px;
                    line-height: 70px;
                }
                #view{
                    width: 600px;
                    line-height: 100px;
                    text-align: right;
                }
                .clearbutton{
                    width: 300px;
                    line-height: 70px;
                }
                .numbutton{
                    width: 150px;
                    line-height: 70px;
                }
            </style>
        </head>
        <script>
                function jsq(num) {
                    //获取当前输入的多寡
                    document.getElementById("view").value = document.getElementById(num).value;
                }
                //计算输入的结果
                function eva() {
                    document.getElementById("view").value = eval(document.getElementById("view").value);
                }
                //AC键
                function clearNum() {
                    document.getElementById("view").value = null;
                }
                //DEL键
                function tuiGe() {
                    var arr = document.getElementById("view");
                    arr.value = arr.value.substr(0,arr.value.length-1);
                }
            </script>
        <body>
            <table>
                <tr>
                    <td colspan="4">
                        <input id="view"  type="text" name="view" class="screen"/>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="button" id="AC" onclick="clearNum()" value="AC" class="clearbutton"/>
                    </td>
                    <td colspan="2">
                        <input type="button" id="DEL" onclick="tuiGe()" value="DEL" class="clearbutton" />
                    </td>
                </tr>
                <tr>
    www.68399.com,                <td>
                        <input type="button" id="7" onclick="jsq(this.id)" value="7" class="numbutton" />
                    </td>
                    <td>
                        <input type="button" id="8" onclick="jsq(this.id)" value="8" class="numbutton" />
                    </td>
                    <td>
                        <input type="button" id="9" onclick="jsq(this.id)" value="9" class="numbutton" />
                    </td>
                    <td>
                        <input type="button" id="*" onclick="jsq(this.id)" value="*" class="numbutton" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" id="4" onclick="jsq(this.id)" value="4" class="numbutton" />
                    </td>
                    <td>
                        <input type="button" id="5" onclick="jsq(this.id)" value="5" class="numbutton" />
                    </td>
                    <td>
                        <input type="button" id="6" onclick="jsq(this.id)" value="6" class="numbutton" />
                    </td>
                    <td>
                        <input type="button" id="/" onclick="jsq(this.id)" value="/" class="numbutton" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" id="1" onclick="jsq(this.id)" value="1" class="numbutton" />
                    </td>
                    <td>
                        <input type="button" id="2" onclick="jsq(this.id)" value="2" class="numbutton" />
                    </td>
                    <td>
                        <input type="button" id="3" onclick="jsq(this.id)" value="3" class="numbutton" />
                    </td>
                    <td>
                        <input type="button" id="-" onclick="jsq(this.id)" value="-" class="numbutton" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" id="0" onclick="jsq(this.id)" value="0" class="numbutton" />
                    </td>
                    <td>
                        <input type="button" id="." onclick="jsq(this.id)" value="." class="numbutton" />
                    </td>
                    <td>
                        <input type="button" id=" " onclick="jsq(this.id)" value=" " class="numbutton" />
                    </td>
                    <td>
                        <input type="button" id="eva" onclick="eva()" value="=" class="numbutton" />
                    </td>
                </tr>
            </table>
        </body>
    </html>

     

            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>

    详尽分解:
    第一:支行总结部分从没行使switch 语句,使用了名值对的款型。

    7.window对象的秘诀

    www.68399.com 7

    本文由68399皇家赌场发布于服务器租用,转载请注明出处:javascript-轻巧的总计器完成步骤分解(附图)

    关键词: 前端 68399皇家赌场