js經常使用小方法

1.時間格式化

a.須要熟悉Date對象的方法;

b.使用  getFullYear(),getMonth(),getDate()等方法獲取年份，月份等時間數據，而後根據所須要的時間格式能夠自行拼接

demo： 

下面以 這種格式爲例：2017-09-15 15:10:06，

function format(timestamp) {
    // 獲取時間戳 Date.parse(new Date());
    //timestamp是整數，不然要parseInt轉換,不會出現少個0的狀況
    var time = new Date(timestamp);
    var year = time.getFullYear();
    var month = time.getMonth() + 1;
    var date = time.getDate();
    var hours = time.getHours();
    var minutes = time.getMinutes();
    var seconds = time.getSeconds();
    return year + '-' + add0(month) + '-' + add0(date) + ' ' + add0(hours) + ':' + add0(minutes) + ':' + add0(seconds);
}
//當月份，日期，時分秒小於10時前面加0
function add0(m) {
    return m < 10 ? '0' + m : m
}

 

2.移動端頁面中出現彈出框(模態框，提示框)時禁止底層頁面滾動

a.出現彈出框時：body添加overflow:hidden,同時阻止其默認是事件

b.關閉彈出框時：body的overflow值置爲auto,並啓用默認事件使body能夠正常滾動;

// 出現彈出框時
$("body").css("overflow", "hidden");
$('body').bind("touchmove", function (e) {
      e.preventDefault && e.preventDefault();
 });
//關閉彈出框時
$("body").css("overflow-y", "auto");
$("body").unbind("touchmove");

 

3.無縫滾動(新聞，中獎信息等)

html

<div class="award-items-state">
   <ul id="award-items-con" class="award-items-con"></ul>
   <ul id="award-items-con-clone" class="award-items-con"></ul>
</div>

 

css

.award-items-state {
    width: 5.5rem;
    height: 1.8rem;
    overflow: hidden;
    margin: 0 auto;
    line-height: 1.2;
}

 

js

var state = $('.award-items-state');//獲取滾動內容的外部容器，須要定高，超出隱藏
var con = $('#award-items-con');// 滾動內容的容器，滾動的數據
var con_clone = $('#award-items-con-clone'); // 存放複製內容的容器

function listScroll() {
//state.scrollTop() ：該元素中的內容向上捲進去的高度
//con.get(0).offsetHeight：該元素的總體高度
    if (state.scrollTop() >= con.get(0).offsetHeight) {
        state.scrollTop(0);
    } else {
        state.scrollTop(state.scrollTop() + 1);
    }
}

//使用setInterval 實現滾動效果 
setInterval(listScroll, 40);

 

有關scrollTop ,offsetHeight能夠參照下圖：

 

 

 

4.頁面設置不緩存

<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="expires" content="0"/>
<meta http-equiv="keywords" content=""/>
<meta http-equiv="description" content=""/>

 

5.jquery監測radio變化事件

        $("input[name='tourism']").change(function () {
            var tourism_val = $("input[name='tourism']:checked").val();
            console.log('選中的值：' + tourism_val);
        })

 

6.jQuery去除字符串的先後空格

var str = '  會捕鼠的魚  ';
var other = $.trim(str);

 

7.button,input等禁用和啓用

        // button，input 禁用
        $("#submit-question").attr('disabled', true);
        // button，input 啓用
        $("#submit-question").attr('disabled', false);

 

8.正則匹配中英文的逗號(,)，分號(;)

var other = 'a,b，c;d；'
industry = other.replace(/(,)|(，)|(;)|(；)/g, "-");

 

 9.判斷設備類型及判斷iphone手機型號(iphone6,iphone6 s等等)

　　1).判斷設備類型

var os = function () {
                var ua = navigator.userAgent.toLowerCase(),
                    isAndroid = /(?:android)/.test(ua),
                    isTablet = /(?:ipad|playbook)/.test(ua) || (isAndroid && !/(?:mobile)/.test(ua)),
                    isPhone = /(?:iphone)/.test(ua) && !isTablet,
                    isPc = !isPhone && !isAndroid && !isTablet;
                return {
                    isTablet: isTablet,
                    isPhone: isPhone,
                    isAndroid: isAndroid,
                    isPc: isPc
                };
            }();
console.log(os);

 

　　2).判斷iphone手機型號

　　a.根據userAgent判斷是不是iphone

　　b.根據屏幕的寬高判斷iphone的具體型號

        var isPhone6p = (function () {
            var h = window.innerHeight,
                w = window.innerWidth,
                ua = navigator.userAgent.toLowerCase(),
                isP6p = false;
            if (ua.match(/mobile/i) !== null && ua.match(/iphone/i) !== null && ( h > w ? (Math.abs(w - 414) < 10 && h <= 736) : (Math.abs(w - 736) < 10) && h <= 414)) {
                isP6p = true;
            }
            return isP6p;
        })();

 

10.頁面簡單適配

　　7.5爲 設計圖 除以100 

            var html = document.querySelector("html");
            var    rem = html.offsetWidth / 7.5;
            html.style.fontSize = rem + "px";

 

11.html模板插入dom

方法1：

            var alertHtml = [
                '<section class="alert-main" id="alertMain">',
                '<div class="alert-mask li-opacity" id="alertMask"></div>',
                '<div class="alert-content" id="alertContent"></div>',
                '</section>'
            ];

            $('body').append(alertHtml.join(''));

 

方法2：

            var alertHtml = [
                '<section class="alert-main" id="alertMain">'+'<div class="alert-mask li-opacity" id="alertMask"></div>'+'<div class="alert-content" id="alertContent"></div>'+'</section>'
            ];

            $('body').append(alertHtml);

 

12.刪除帶有img標籤的字符串

var htmlContent = "<div id='test'><img src='aaa' width='100%'></img></div>";

var data = htmlContent.replace(/<img.*>.*<\/img>/ig,"");   //過濾如<img></img>形式的圖片元素
data = data.replace(/<img.*\/>/ig, "");   //過濾如<img />形式的元素

console.log(htmlContent);

console.log(data);

 

13.實時監測input值得變化

使用jquery：

    $('input').bind('input porpertychange', function () {
        var val = $.trim($('#cdk').val());
        console.log(val);
    })

 

14.匹配連接後的參數

function getUrlParam(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); 
    var result = window.location.search.substr(1).match(reg);
    if (result) return result[2];
    return null;
 }

正則匹配(^|&) : 匹配字符串的任意開頭或&

url： https://www.baidu.com/?username=123456

window.location ： 獲取當前連接  ->  https://www.baidu.com/?username=123456&password=654321

window.location.search : 獲取當前連接的參數 -> ?username=123456&password=654321

window.location.search.substring(1) : 獲取當前連接？後的參數,  substr(1)從索引1開始截取 -> username=123456&password=654321

result[2] :返回參數名稱的值

15.獲取當前點擊元素的自定義的屬性

<span data-id="39286" onclick="goToConsumeCoupon(event)">兌換</span>

function goToConsumeCoupon(e) {
    var id = e.currentTarget.dataset.id;
    location.href = 'https://www.baidu.com/';
}

注：在使用e.target.dataset獲取屬性的時候偶爾會出現undefined;

 

 16.解決 觸發元素點擊事件時，元素出現半透明的灰色背景色

html * {
 outline: 0;
 -webkit-text-size-adjust: none;
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

 

 17.操做json

大多瀏覽去提供JSON.parse()方法解析JSON，提供JSON.stringify()方法生成JSON，能夠使用這兩個方法！爲了防止JSON.parse()對對象拋異常，能夠稍加處理，以下：

   var str = '{ "name": "會捕鼠的魚", "age": "18" }';
    function jsonParse(data) {
        if (typeof(data) === 'string') {
            return JSON.parse(data);
        } else {
            return data;
        }
    }
    var jsonData = jsonParse(str);

 

18.禁止保存圖片

對圖片添加屬性，可是有兼容性

img {
  pointer-events: none;
}

 

 

 

若有錯誤還望指出^-^

未完待續，持續更新ing