Common methods of JavaScript project practice

Posted by dotBz on Sun, 12 Jan 2020 17:45:09 +0100

On the front road, accumulate slowly

1. Get the parameter value passed by the URL through the parameter name

Method 1

GetQueryString:function(name){//Get the parameter value passed by the URL through the parameter name
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
        if (r != null)
            return (r[2]);
        return null;
}

Method two

GetRequest:function(){//Get the parameter value of URL passing through parameter name (js gets the URL passing parameter)
    var url = location.search || location.href; //Get the string after the "? Character in the url
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        strs = str.split("&");
        for(var i = 0; i < strs.length; i ++) {
          theRequest[strs[i].split("=")[0]]=(strs[i].split("=")[1]);
        }
   }
   return theRequest;
}

2. Generate 6-digit doc No. for key content

generateMixed:function(){//Generate 6-digit doc No
        var Num = "";
        for (var i = 0; i < 6; i++) {
            Num += Math.floor(Math.random() * 10);
        }
        return Num;
    }

3. Judge which terminal

versions:function(){//Determine which terminal
        var u = window.navigator.userAgent;
        return {
            trident: u.indexOf('Trident') > -1, //IE kernel
            presto: u.indexOf('Presto') > -1, //opera kernel
            webKit: u.indexOf('AppleWebKit') > -1, //Apple, Google kernel
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //Firefox kernel
            mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //Mobile terminal or not
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios terminal
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android terminal or uc browser
            iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //Whether it is iPhone or Android QQ browser
            iPad: u.indexOf('iPad') > -1, //iPad or not
            webApp: u.indexOf('Safari') == -1, //Whether it is a web application, no head and bottom
            weixin: u.indexOf('MicroMessenger') == -1 //Wechat browser or not
        };
    }()

4. Judge whether the client is a PC or a handheld device. true is a PC and false is a handheld device

IsPC:function(){//Judge whether the client is a PC or a handheld device. true is a PC and false is a handheld device
        var userAgentInfo = navigator.userAgent;
        var Agents = ["Android", "iPhone",
                    "SymbianOS", "Windows Phone",
                    "iPad", "iPod"];
        var flag = true;
        for (var v = 0; v < Agents.length; v++) {
            if (userAgentInfo.indexOf(Agents[v]) >= 0) {
                flag = false;
                break;
            }
        }
        //If it's a PC browser, it shows that the mobile terminal is open,
        if(flag){
            $("body").empty().append("<div style='text-align: center;position:absolute;top:30%;left:0;bottom:0;right:0;font-size:2rem'>Please use the handset to access<div>");
        }
        return flag;
    }

5. Judge whether it is iPhone

// Determine if it's iPhone: 

function isAppleMobile() { 

    return (navigator.platform.indexOf('iPad') != -1); 

}; 

6. Finger slip event

// Finger slide event

addEventListener('load',function(){
 window.onmousewheel = twoFingerScroll;
}, false); // False -- > compatible with each browser, indicating that the event handler is called in the bubbling phase (true capture phase)


function twoFingerScroll(ev) { 
    var delta =ev.wheelDelta/120;              
    //Judge the delta value (such as positive and negative), and then perform the corresponding operation 
    return true; 
}; 

7. Window response event

responseWin:function(){//Window response events
        return function(){
            /*window.onresize = function(){
                return common.IsPC();
            };*/
            return common.IsPC();
        }();
    }

8. get/post to set parameters and synchronize asynchronous requests.

postAjax(type,path,params,dataType,async){//Set parameters, synchronous asynchronous request.
        var datas = "";
        $.ajax({ 
            type : type?type:"post", 
            url : path, 
            data : params, 
            dataType: dataType?dataType:"json",
            async : async?async:false, 
            success : function(data){ 
                datas = data;
            }
        });
        return datas;
    }

9. localStorage local storage

var v = localStorage.getItem('n') ? localStorage.getItem('n') : "";  
// If the data with the name n exists, it is read out and given the variable v. 

localStorage.setItem('n', v);                                           
// Write data with name n and value v 

localStorage.removeItem('n');                                           
// Delete data named n  

10. Prevent scrollbars from appearing when hiding address bars and handling events

// Hide address bar & prevent scrollbars from appearing when handling events

addEventListener('load', function(){ 
   setTimeout(function(){ window.scrollTo(0, 1); }, 100); 
});

11. On orientation change

//Add screen rotation event listening to find the screen rotation status (left, right or not) at any time.

// Determine whether the screen rotates

function orientationChange() { 
    switch(window.orientation) { 
      case 0:  
            alert("Portrait mode 0,screen-width: " + screen.width + "; screen-height:" + screen.height); 
            break; 
      case -90:  
            alert("Levo -90,screen-width: " + screen.width + "; screen-height:" + screen.height); 
            break; 
      case 90:    
            alert("Dextral 90,screen-width: " + screen.width + "; screen-height:" + screen.height); 
            break; 
      case 180:    
          alert("Landscape mode 180,screen-width: " + screen.width + "; screen-height:" + screen.height); 
          break; 
    };<br>};


// Add event listening 
addEventListener('load', function(){ 
    orientationChange(); 
    window.onorientationchange = orientationChange; 

});

12. Mobile event collection

// Gesture events

touchstart            //Triggered when the fingers touch the screen

touchmove           //Triggered when the finger already touching the screen starts to move

touchend             //Triggered when the finger leaves the screen

touchcancel



// Touch event

gesturestart          //Triggered when two fingers touch the screen

gesturechange      //Triggered when two fingers touch the screen and start moving

gestureend



// Screen rotation events   

onorientationchange     



// Detect when the fingers of the touch screen change direction       

orientationchange       



// Related properties of touch event support

touches         

targetTouches       

changedTouches              

clientX    // X coordinate of touch relative to the viewport (excludes scroll offset)       

clientY    // Y coordinate of touch relative to the viewport (excludes scroll offset)       

screenX    // Relative to the screen        

screenY     // Relative to the screen       

pageX     // Relative to the full page (includes scrolling)     

pageY     // Relative to the full page (includes scrolling)     

target     // Node the touch event originated from      

identifier     // An identifying number, unique to each touch event

13. Hyperlink (phone, SMS)

< a href = "Tel: 12345654321" > call me</a>
< a href = "SMS: 12345654321" > SMS</a>
Or for cells:
<td onclick="location.href='tel:122'">

14. Auto capitalization and auto correction

<input type="text" autocapitalize="off" autocorrect="off" />

15. Browser link jump

window.location.href = "xx.html";

//perhaps

window.open();

16. Change browser link "no" jump

history.pushState({}, "Page title", "xxx.html");

history.replaceState(null, "Page title", "xxx.html");

window.addEventListener("popstate", function() {
    var currentState = history.state;
    /*
     * Code block
    */                                          
});

17. Link to get the request header of http: / / or https: / /

var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
//Get the http

document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F382f81c966395258f239157654081890' type='text/javascript'%3E%3C/script%3E"));

18. Js flow rate measurement

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

    <head>
        <title> Document </title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="Generator" content="EditPlus">
    </head>

    <body>
        <SCRIPT language=JavaScript>
            var st = new Date();
        </SCRIPT>
        <IMG alt="Test picture" src="http://sp2.yokacdn.com/photos/f3/4f/702018/photo_322092_500.jpg" onload="showspeed();">
        <div id='showtxt'></div>
        <script>
            var arr = ["Network speed less than 50 KB", "Net speed at 50-100KB Between", "Net speed at 100-200KB Between", "Net speed at 200-300KB Between", "Video communication"];

            function showspeed() {
                var filesize = 35.4; //measured in KB   
                var et = new Date();
                var speed = Math.round(filesize * 1000) / (et - st);
                document.title = speed;
                var scope = (speed > 0 && speed <= 50) ? 0 : (speed > 50 && speed <= 100) ? 1 : (speed >= 100 && speed < 200) ? 2 : (speed >= 200 && speed < 300) ? 3 : 4;
                alert(scope)
                console.log("Your download speed is:" + arr[scope] + " (K/second)");
            }
        </script>
    </body>

</html>

19. Like + 1 Effect

function anp(e) {
    var $i = $("<b>").text("+" + 1);
    var x = e.pageX,
        y = e.pageY;
    $i.css({
        top: y - 20,
        left: x,
        position: "absolute",
        color: "#E94F06"
    });
    $("body").append($i);
    $i.animate({
        top: y - 120,
        opacity: 0,
        "font-size": "1.4em"
    }, 1500, function() {
        $i.remove();
    });
    e.stopPropagation();
}

20. Time and date

showDate:function(){
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();
        if (minute < 10) {
            minute = "0" + minute;
        }
        if (second < 10) {
            second = "0" + second;
        }
        return year + '-' + month + '-' + day + '  ' + hour + ':' + minute;
    }

Topics: Mobile Android iOS Mac