跳至主要內容

JavaScritp achieve online calculator tool -toolfk online Programmer toolbox

      This paper to recommend [ToolFk] is a programmers often use a free online test kit, ToolFk feature is focused on everyday programmer development tools, without having to install any software, as long as the content execution affixed by a button, able to obtain the contents of the desired results.ToolFk also supports   BarCode Barcode generated online ,  QueryList collector ,  PHP code is run online ,  PHP confusion, encryption, decryption ,  Python code is run online , JavaScript online operation ,YAML formatting tools , HTTP simulation query tool , HTML online toolbox , JavaScript online Toolbox ,CSS online toolbox , JSON online toolbox , unixtime timestamp conversion , Base64 / the URL of / native2ascii conversion , CSV conversion kit , XML online toolbox , the WebSocket online tools , Markdown online toolbox , Htaccess2nginx conversion, Hex conversion online , online encryption toolkit ,online pseudo-original tools , online APK decompile , online web screenshot tool , online random password generation , online generate two-dimensional code qrcode , online Crontab Expression Builder ,the online short URL Generator , Online calculator tool . And more than 20 daily programmer development tools, can be considered a very comprehensive website programmer's toolbox.

Site name: ToolFk
website links: https://www.toolfk.com/
Tools link: https://www.toolfk.com/tool-game-calculator

? Teaching Code

This tool [online scientific calculator tool]?-Dependent code base is https://github.com/seaswalker/js_calculator
STEP 1

STEP 2
? THE CORE CODE IS AS FOLLOWS
// Global calculator objects
var Calculator = (function () {
    var cal = {
        Calculator keys // coding
        keyCodes: {
            0: '0',
            1: '1',
            twenty two',
            3: '3',
            4: '4',
            5: '5',
            6: '6',
            7: '7',
            8: '8',
            9: '9',
            10:, '.'
            11: '±',
            12: '=',
            13: '+'
            14: '-',
            15: '*',
            16: '/',
            17: '%',
            18: '√',
            19: 'x2',
            20: '1 / x',
            twenty one: '(',
            twenty two: ')',
            23: 'yroot',
            24: 'n!',
            25: 'Exp',
            26: '^',
            27: 'sin',
            28: 'cos',
            29: 'tan',
            30: 'powten',
            31: 'log',
            32: 'sinh',
            33: 'cosh',
            34: 'tanh',
            35: 'π',
            36: '↑',
            37: 'CE',
            38: 'C',
            39: 'Back',
            // The following is a programmer-type-specific keys
            40: 'A',
            41: 'B',
            42: 'C',
            43: 'D',
            44: 'E',
            45: 'F',
            46: '&',
            47: '|',
            48: '~'
        },
        // for displaying map operators, such as * when calculation, while x showed better
        operatorFacade: {
            13: '+'
            14: '-',
            15: '×',
            16: '÷',
            17: '%',
            23: 'yroot',
            26: '^',
            46: '&',
            47: '|'
        },
        // current calculator type 1 -> Standard 2 -> science-based, 3 -> programmer type, the default standard
        type: 1,
        // calculator type prefix, used to obtain elements from the page
        typePrefix: {
            1: "std-",
            2: "sci-",
            3: "pro-"
        },
        // record whether each type of calculator event listener is already bound, key: typpe value, value: The default standard is true (Loaded)
        hasInited: {
            1: true,
            2: false,
            3: false
        },
        //constant
        constants: {
            // color when the mouse hovers
            mouseHoverColor: "#CFCFCF",
            // color calculator below the first row and the other row is different, this is the background color of the first row
            firstMouseOutColor: "# F2F2F2",
            // remaining background color of each row
            mouseOutColor: "# E6E6E6"
        },
        cache: {
            // display the contents of the input element
            showInput: null,
            // Previous calculations show area
            preStep: null,
            // display span four kinds of binary values, only valid in the programmer type
            scaleSpans: null
        },
        / **
         * Get the content cache.showInput
         * @Return String
         * /
        getShowInput: function () {
            return cal.cache.showInput.innerHTML;
        },
        / **
         * Set showInput value
         * @Param value
         * /
        setShowInput: function (value) {
            cal.cache.showInput.innerHTML = value;
        },
        / **
         * Get the content cache.preStep
         * @Return String
         * /
        getPreStep: function () {
            return cal.cache.preStep.innerHTML;
        },
        setPreStep: function (value) {
            cal.cache.preStep.innerHTML = value;
        },
        // operand stack
        operandStack: [],
        // operator stack
        operatorStack: [],
        // once the input is a binary operator, if it is a binary operator and enter again, this input is ignored
        isPreInputBinaryOperator: false,
        // if the last key pressed a meta-operation
        isPreInputUnaryOperator: false,
        // equal sign can not double-click
        isPreInputEquals: false,
        // If true, then the next digital input on the need to cover showInput, rather than appending
        // the last calculated result (=)
        preResult: 0,
        // band currently used (only valid for programmers), the default decimal (DEC)
        currentScale: 10,
        isOverride: false,
        // int check
        intPattern:? / ^ - \ d + $ /,
        // decimal check
        floatPattern: /^-?\d+\.\d+$/,
        // scientific notation check
        scientificPattern: /^\d+\.\d+e(\+|-)\d+$/,
        // check digit hexadecimal
        hexPattern: / ^ [0-9A-F] + $ /,
        // Auxiliary operator priority determination
        operatorPriority: {
            ")": 0,
            "|": 1,
            "&": 2,
            "+": 3,
            "-": 3,
            "*": 4,
            "%": 4,
            "/": 4,
            "^": 5,
            "Yroot": 5,
            "(": 6
        },
        / **
         * Initialize the cache object (cal.cache)
         * /
        initCache: function () {
            var prefix = cal.typePrefix [cal.type];
            cal.cache.showInput = document.getElementById (prefix + "show-input");
            cal.cache.preStep = document.getElementById (prefix + "pre-step");
            if (cal.type == 3) {
                cal.cache.scaleSpans = document.getElementById ( "pro-scales") getElementsByTagName ( "span").;
            }
        },
        // various event listener function
        listeners: {
            / **
             * Hover color effect of the keys
             * /
            mouseHoverListener: function (e) {
                var event = e || window.event;
                event.currentTarget.style.backgroundColor = cal.constants.mouseHoverColor;
            },
            / **
             * Mouse removed from the row of symbols color effect
             * /
            firstMouseOutListener: function (e) {
                var event = e || window.event;
                event.currentTarget.style.backgroundColor = cal.constants.firstMouseOutColor;
            },
            / **
             * Mouse out from the lower row of numbers, symbols color effect
             * /
            mouseOutListener: function (e) {
                var event = e || window.event;
                event.currentTarget.style.backgroundColor = cal.constants.mouseOutColor;
            },
            / **
             * Press the button event listener
             * /
            keyPressListener: function (e) {
                var event = e || window.event;
                cal.handleKey (event.currentTarget.value);
            },
            / **
             * Show / Hide calculator type selection bar
             * /
            toggleTypeBarListener: function () {
                var bar = document.getElementById (cal.typePrefix [cal.type] + "type-bar");
                if (bar.style.display === "block") {
                    bar.style.display = "none";
                } Else {
                    bar.style.display = "block";
                }
            },
            / **
             * Switch the calculator type Listener
             * /
            switchTypeListener: function (e) {
                var event = e || window.event;
                cal.switchType (parseInt (event.currentTarget.value));
            },
            / **
             * Hexadecimal switch (special programmer)
             * /
            switchScaleListener: function (e) {
                var event = e || window.event;
                var scales = document.getElementById ( "pro-scales"). getElementsByTagName ( "div"),
                    Returns the child elements of the case // here you should use the currentTarget property because the target attribute element binding events are sub-elements
                    scale = parseInt (event.currentTarget.getAttribute ( "scale")),
                    oldScale = cal.currentScale;
                // switch the selected style
                for (var i = 0, l = scales.length; i <l; ++ i) {
                    scales [i] .removeAttribute ( "class");
                }
                event.currentTarget.setAttribute ( "class", "scale-active");
                var lis, btns;
                if (scale === 16) {
                    Row 6 // hexadecimal numbers on processing
                    cal.listeners._initFirstRowListeners ();
                    if (oldScale <10) {
                        cal.listeners._initSecondRowListeners ();
                    }
                } Else if (scale === 10) {
                    if (oldScale === 16) {
                        . Lis = document.getElementById ( "pro-top-symbol") getElementsByTagName ( "li");
                        cal.disableButtons (lis, cal.listeners.firstMouseOutListener);
                    } Else {
                        cal.listeners._initSecondRowListeners ();
                    }
                } Else if (scale === 8) {
                    if (oldScale> 8) {
                        . Lis = document.getElementById ( "pro-top-symbol") getElementsByTagName ( "li");
                        cal.disableButtons (lis, cal.listeners.firstMouseOutListener);
                        // Disable 8 and 9
                        btns = cal.getElementsByAttribute ( "li", "oct-disable", document.getElementById ( "pro-num-symbol"));
                        cal.disableButtons (btns, cal.listeners.mouseOutListener);
                    } Else {
                        cal.listeners._initSecondRowListeners ();
                    }
                } Else if (scale === 2) {
                    if (oldScale === 16) {
                        . Lis = document.getElementById ( "pro-top-symbol") getElementsByTagName ( "li");
                        cal.disableButtons (lis, cal.listeners.firstMouseOutListener);
                    }
                    // Disable 2-9
                    btns = cal.getElementsByAttribute ( "li", "bin-disable", document.getElementById ( "pro-num-symbol"));
                    cal.disableButtons (btns, cal.listeners.mouseOutListener);
                }
                cal.currentScale = scale;
            },
            / **
             * Initialize first discharge event listener operator operator
             * @Private
             * /
            _initFirstRowListeners: function () {
                . Var lis = document.getElementById (cal.typePrefix [cal.type] + "top-symbol") getElementsByTagName ( "li");
                cal.rebuildButtons (lis, cal.listeners.firstMouseOutListener);
            },
            / **
             * Initialize the second row operator event listeners
             * @Private
             * /
            _initSecondRowListeners: function () {
                var lis = document.getElementById (cal.typePrefix [cal.type] + "num-symbol") getElementsByTagName ( "li").;
                cal.rebuildButtons (lis, cal.listeners.mouseOutListener);
                if (cal.type === 3) {
                    // programmer type decimal point is disabled
                    cal.disableButtons ([document.getElementById ( "pro-point")], cal.listeners.mouseOutListener);
                }
            }
        },
        // Initialize event listener
        initListeners: function () {
            var prefix = cal.typePrefix [cal.type];
            // set the row operator event listener, if a programmer type, because the default is 10 decimal, and hexadecimal numbers on the row, there is no need to set an event listener
            if (cal.type <3) {
                cal.listeners._initFirstRowListeners ();
            }
            // set below a column of figures, four arithmetic event listeners
            cal.listeners._initSecondRowListeners ();
            // Show / Hide sidebar calculator type selection
            cal.addEvent (document.getElementById (prefix + "show-bar"), "click", cal.listeners.toggleTypeBarListener);
            // switch the type of event is bound to the sidebar li
            var bar = document.getElementById (prefix + "type-bar");
            lis = bar.getElementsByTagName ( "li");
            var li;
            for (var i = 0, l = lis.length; i <l; ++ i) {
                li = lis [i];
                // Non-current type is only necessary to bind events
                if (li.className! == "active") {
                    cal.addEvent (li, "click", cal.listeners.switchTypeListener);
                }
            }
            // Load programmer type-specific
            if (cal.type === 3) {
                var scales = document.getElementById ( "pro-scales") getElementsByTagName ( "div"), scale.;
                for (i = 0, l = scales.length; i <l; ++ i) {
                    scale = scales [i];
                    cal.addEvent (scale, "click", cal.listeners.switchScaleListener);
                }
            }
        },
        / **
         * Corresponding button-down event
         * @Param value value value keys (i.e. its the keyCode)
         * /
        handleKey: function (value) {
            console.log (value);
            var keyCode = parseInt (value);
            // If it is a numeric or decimal point, displayed directly
            if (keyCode <11 || (keyCode> 39 && keyCode <46)) {
                cal.showInput (cal.keyCodes [keyCode]);
                if (cal.type === 3) {
                    // If a programmer type, you need to synchronize the display in hexadecimal value 4
                    cal.showScales (cal.getShowInput ());
                }
            } Else {
                switch (keyCode) {
                    // sign
                    case 11:
                        cal.unaryOperate (function (oldValue) {
                            oldValue + = "";
                            if (oldValue === "0") {
                                return [oldValue];
                            }
                            if (oldValue.charAt (0) === '-') {
                                return [oldValue.substring (1)];
                            } Else {
                                return [ "-" + oldValue];
                            }
                        });
                        break;
                    // open the root
                    case 18:
                        cal.unaryOperate (function (si) {
                            return [Math.sqrt (si), "sqrt"];
                        });
                        break;
                    //square
                    case 19:
                        cal.unaryOperate (function (si) {
                            return [Math.pow (si, 2), "sqr"];
                        });
                        break;
                    // take reciprocal
                    case 20:
                        cal.unaryOperate (function (si) {
                            return [si === 0 ZERO_ERR: 1 / si, "1 /"?];
                        });
                        break;
                    //factorial
                    case 24:
                        cal.unaryOperate (function (si) {
                            if (si <0) {
                                si = (0 - si);
                            }
                            if (cal.isFloat (si + "")) {
                                si = Math.floor (si);
                            }
                            return [cal.fact (si), "fact"];
                        });
                        break;
                    // Exp into scientific notation
                    case 25:
                        cal.unaryOperate (function (si) {
                            return [si.toExponential (7)];
                        });
                        break;
                    // sin
                    case 27:
                        cal.unaryOperate (function (si) {
                            return [Math.sin (si), "sin"];
                        });
                        break;
                    // cos
                    case 28:
                        cal.unaryOperate (function (si) {
                            return [Math.cos (si), "cos"];
                        });
                        break;
                    // tan
                    case 29:
                        cal.unaryOperate (function (si) {
                            return [Math.tan (si), "tan"];
                        });
                        break;
                    x power // 10
                    case 30:
                        cal.unaryOperate (function (si) {
                            return [Math.pow (10, si), "powten"];
                        });
                        break;
                    // log
                    case 31:
                        cal.unaryOperate (function (si) {
                            // js Math.log is the number e, the Windows Calculator is the number 10, where reference Windows
                            return [Math.log10 (si), "log"];
                        });
                        break;
                    // sinh (hyperbolic sine function)
                    case 32:
                        cal.unaryOperate (function (si) {
                            return [Math.sinh (si), "sinh"];
                        });
                        break;
                    // cosh (hyperbolic cosine function)
                    case 33:
                        cal.unaryOperate (function (si) {
                            return [Math.cosh (si), "cosh"];
                        });
                        break;
                    // tanh (hyperbolic cotangent function)
                    case 34:
                        cal.unaryOperate (function (si) {
                            return [Math.tanh (si), "tanh"];
                        });
                        break;
                    // π
                    case 35:
                        cal.unaryOperate (function (si) {
                            return [Math.PI];
                        });
           & Nb
標籤：

留言

發佈留言

此網誌的熱門文章

TOOLFK Tool-Online Chinese / Letter / RMB / Simplified and Traditional Conversion Tool

The [TOOLFK] online Chinese character / letter / RMB / Simplified and Traditional Chinese conversion tool to be recommended in this article provides online daily use tools for Simplified and Traditional Chinese online conversion, RMB capitalization conversion, letter case conversion, and Chinese to Pinyin conversion. Website name: ToolFk website link:  https://www.toolfk.com/Tool link:  https://www.toolfk.com/tool-online-convert Code teaching This tool [online Chinese character / letter / RMB / Simplified and Traditional Chinese conversion tool] depends on the code base (you can view the TOOLFK website source code to view) http: //www.toollibs.com/togglecase transverter.js / pinyin_dict_withtone.js / pinyin_dict_polyph / rmb.js / ec- do .js STEP 1 Online Chinese to Pinyin tool STEP 2 Online Simplified and Traditional Online Conversion Tool STEP 3 Online RMB capital conversion tool STEP4 online letter case conversion tool STEP5 The core code of ...
發佈留言
閱讀更多

HTML online for code formatting, beautification, encryption, decryption, compression, turn a key tool -toolfk online Programmer toolbox

    This paper to recommend [ToolFk] is a programmers often use a free online test kit, ToolFk feature is focused on everyday programmer development tools, without having to install any software, as long as the content execution affixed by a button, able to obtain the contents of the desired results. ToolFk also supports    BarCode Barcode generated online  ,   QueryList collector  ,   PHP code is run online  ,   PHP confusion, encryption, decryption  ,   Python code is run online  ,  JavaScript online operation  , YAML formatting tools  ,  HTTP simulation query tool  ,  HTML online toolbox  ,  JavaScript online Toolbox  , CSS online toolbox  ,  JSON online toolbox  ,  unixtime timestamp conversion  ,  Base64 / the URL of / native2ascii conversion  ,  CSV conversion kit  ,  XML online toolbox  ,...
發佈留言
閱讀更多

How to Download tencent video online for free? tencent Video Downloader -VideoFK

In line to see some friends in the query how to download tencent video on the computer, and this article will be introduced "  Videofk.com  " is a free tencent video online video download site, download method is very simple, just copy the video link, paste it into the query box, click on the search button, then you can quickly save mp4 videos to your PC or mobile phone. Visit website link:  https://www.videofk.com/weishi-video-download Tutorial STEP 1 Open   Videofk   website, you need to download the tencent video link to copy and paste it into the bottom, click on the search button below to obtain cover art and movie download button. STEP 2 In  Videofk  After parsing the video?, Are the following methods for you to download? Choose. 1, click on the top cover map of the "  Download  " button to quickly download videos to the local. 2, click on the cover drawing any position, a window will pop up, w...
發佈留言
閱讀更多