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