JS小技巧

** 1、 生成随机颜色 **

‘#’+(Math.random().toString(16) + '000000').slice(2, 8)

**2、 原生js获取相关参数 **

  console.log("网页可见区域 宽: " + document.body.clientWidth );
  console.log("网页可见区域 高: " + document.body.clientHeight )
  console.log("网页可见区域 宽(包括边线的宽): " + document.body.offsetWidth )
  console.log("网页可见区域 高(包括边线的宽): " + document.body.offsetHeight )
  console.log("网页正文全文 宽: " + document.body.scrollWidth )
  console.log("网页正文全文 高: " + document.body.scrollHeight )
  console.log("网页被卷去的 高: " + document.body.scrollTop )
  console.log("网页被卷去的 左: " + document.body.scrollLeft )
  console.log("网页正文部分 上: " + window.screenTop )
  console.log("网页正文部分 左: " + window.screenLeft )
  console.log("屏幕分辨率的 高: " + window.screen.availHeight)
  console.log("屏幕分辨率的 宽: " + window.screen.availWidth)

**3、横竖屏刷新页面 **

//判断手机横竖屏状态：
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
    if (window.orientation === 180 || window.orientation === 0 ) {
         alert('竖屏状态！');

    }
     if (window.orientation === 90 || window.orientation === -90 ){ 
     alert('横屏状态！');
     }  
}, false);
//移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。

4、判断是否为数组
Object.prototype.toString.call(obj) === '[object Array]'

5、表单数据序列化

• serialize() 与JQuery中其他方法一样，serialize()方法也是作用于一个JQuery对象，它能够将DOM元素内容序列化为字符串，用于ajax请求。

   
  
      First name: 
  
      Last name: 
  
  
  
    $("form").serialize()
    //结果： FirstName=Bill&LastName=Gates
  
    //同理可用
   $(":checkbox,:radio").serialize();
  

• serializeArray()
  函数用于序列化一组表单元素，将表单内容编码为一个JavaScript数组。
  serializeArray()函数常用于将表单内容序列化为JSON对象，以便于被编码为JSON格式的字符串。该函数会将可用于提交的每个表单控件封装成一个Object对象，该对象有name和value属性，对应该表单控件的name和value属性。然后将这些Object对象封装为一个数组并返回。

  //由上例 serializeArray()的结果, 用于ajax提交非常方便
   [    
      { name: "FirstName", value: "Bill" },   
      { name: "LastName", value: "Gates" }
   ]
  

6、HTML5 history新特性pushState、replaceState
HTML5 history新特性pushState、replaceState

网络工具包

• getQuery -- 获取url参数

• setCookie

• getCookie

  TD.util = {};
  TD.util.getQuery = function (name) {
    var m = window.location.search.match(new RegExp('(\\?|&)' + name + '=([^&]*)(&|$)'));
    return !m ? '' : decodeURIComponent(m[2]);
  };
  TD.util.setCookie = function (name, value, expiredays) {
   var exdate = new Date();
    document.cookie = name + '=' + value + ';expires=' + (expiredays === null ? exdate.setDate(exdate.getDate() + expiredays) : exdate.toGMTString()) + ';domain=treedom.cn';
  };
  TD.util.getCookie = function (name) {
    var cStart, cEnd;
    if (document.cookie.length > 0) {
    cStart = document.cookie.indexOf(name + '=');
    if (cStart !== -1) {
        cStart = cStart + name.length + 1;
        cEnd = document.cookie.indexOf(';', cStart);
        if (cEnd === -1) cEnd = document.cookie.length;
        return unescape(document.cookie.substring(cStart, cEnd));
    }
   }
    return '';
  };
  

话说小主开了一个微信公众号：[民间程序员]，分享H5相关知识点，H5踩坑记，H5实战案例分享等，欢迎大家关注~

博主小号-欢迎关注