Modular javascript tutorial study notes 08

Today learned a calculator,

Record at some point and knowledge of the contents inside.

css：

　　Two pictures, each button set different background styles:

　　       

 

 

 

 　　　　You could not see clearly, but it does the second picture of key stereoscopic number, except that it uses:

　　　　　　　　　　linear-gradient(hsla(0,0%,100%,.2),transparent)

　　　　　　　　　　Although it is a simple color gradient, but very wild.

　　　　hsla (), to know, but I never used. It can show all colors.

　　　　　　　　H is the chromaticity values ​​between 0 degrees to 360 degrees, 0 degrees is red, green is 120 degrees, 240 degrees is blue. 360 degrees is red.

　　　　　　　　S is the saturation, the color purity is a percentage value, ranging from 0% to 100%, 0% saturation minimum, maximum saturation 100%

　　　　　　　　L is the luminance, but also a percentage value, ranging from 0% to 100%, 0% darkest, 100% of the brightest.

　　　　　　　　A opacity, the value range of 0.0 to 1.0, where 0.0 is completely transparent and 1.0 is completely opaque. 

　　　　transparent, the next check is transparent black (black) shorthand, i.e. a similar rgba (0,0,0,0) such values.

　　　　　　A contrast to the black and transparent:

　　　　　

　　　　　　　　　　Ugly burst.

js:

　　I came directly attached

　　　　There are: 1. .replace (), 2. .eval () 3. .search () 4. .toFixed () 5.srting to the number of casts (in addition to (1) parseInt (), parseFloat () (2) Number () + a is used here, the FIG:

   ）

// Get the element 
// Listen for the click event 
// if the click event object to BUTTON 
    // if the previous result is "calculation error" and click on the object is not AC 
            // return 
        // else if to click on objects to AC 
            // Reset 
        // else if clicks on an object of the CE 
            // delete 
        // else if the object is a click = 
            // calculate and display the results of 
        　　 the else  IF (btnValue == '=' ) { 
          　　  var text = result.value
          　　   IF (! text) {
               　　  // screen without any character, return directly 
                return 
           　　 } 
           　　 the else {
                 // If the screen has x, * replacement of the computer, and then use eval () operation value 
                // .replace (), the delimiters are regular //, \ is the transpose justice, g represents the global match (otherwise only the first match),
                            // I Representative ignore case,
                     text = text. Replace (/ X / G, '*' )
                     var calcResult 
                     the try {
                         // cache the results, eval () is a calculation inaccurate 
                        calcResult = the eval (text) + ""
                         // is there a determination result of the decimal 
                            // Search (), a \ as an escape, the digital return position where the search characters, if not returned -1 
                        IF (calcResult. Search (/\./)> 0 ) {
                             // If the decimal point, set to true hasDec 
                            hasDec = to true 
                            // If more than five decimal keep only 5 
                            @   .split ( '') such 1.25.split ( '.'), generating only two arrays 
                                //1.25.split('.')[0] is before the decimal point is 1,1.25.split [1] is the decimal point after, as 25, 
                            // calcResult string type, + calcResult digital type 
                                // round numbers since only .toFixed type, it must be converted 
                                    method //. toFixed () is a rounding decimal places imprecise 
                            IF (calcResult.split ( '.') [. 1] .length>. 5 ) { 
                                calcResult = (+ calcResult). toFixed (. 5 ) 
                            } 
                        } 
                    // display the calculation result on a screen 
                    result.value = calcResult 
                    COUNT = result.length
                    } The catch (E) { 
                        result.value = 'miscalculation' 
                    } 
            } 
    When // else click or a non-decimal number, the decimal point processing, dynamic display of the user's keystrokes
            

Almost all.