第一篇博客從js通用方法筆記開始(不按期持續更新)

js筆記

//全局變量
/*分頁方法全局參數*/

var pageSize = "";    //每頁顯示的記錄條數
var curPage = "";        //當前頁
var len = "";            //總行數
var page = "";            //總頁數
var begin = "";         //當前顯示頁起始記錄
var end = "";           //當前顯示頁結束記錄

$(function(){
　　dragPanelMove(downDiv, moveDiv);
　　unique(arr);
　　dealSubtraction(arr1,arr2);

　　pagesJump();

});

//div塊的拖拽事件（點擊標題部分拖動整個模塊在瀏覽器可視區域內移動，參數：downDiv:鼠標按下觸發移動動做的div盒子(例如提示框的標題);moveDiv：移動的盒子）
function dragPanelMove(downDiv, moveDiv) {
    $(downDiv).mousedown(function (e) {
 var isMove = true;
 var disX = e.clientX - $(moveDiv).offset().left; //移動盒子的左邊距
 var disY = e.clientY - $(moveDiv).offset().top; //移動盒子的上邊距

 var boxWidth = $(moveDiv).width(); //盒子的寬
 var boxHeight = $(moveDiv).height(); //盒子的高
 var browserWidth = document.documentElement.clientWidth; //瀏覽器可視寬
 var browserHeight = document.documentElement.clientHeight; //瀏覽器可視高

 var objL = "",objT = ""; //左上邊距
 $(document).mousemove(function (e) {
 if (isMove) {
 objL = (e.clientX - disX) + 'px';
 if((e.clientX - disX)<=0){
 objL = 0;
 }else if((boxWidth - disX + e.clientX) >= browserWidth){
 objL = browserWidth - boxWidth + "px";
 }
 objT = (e.clientY - disY) + 'px';
 if((e.clientY - disY) <= 0){
 objT = 0;
 }else if((boxHeight - disY + e.clientY) >= browserHeight){
 objT = browserHeight - boxHeight + "px";
 }
 $(moveDiv).css({"left": objL, "top": objT});
 }
 }).mouseup(function () {
 isMove = false;
 });
 });
}

//去重

function unique(arr){
    for(var i=0; i<arr.length; i++){
 for(var j=i+1; j<arr.length; j++){
 if(arr[i]==arr[j]){ //第一個等同於第二個，splice方法刪除第二個
 arr.splice(j,1);
 j--;
 }
 }
 }
 return arr;
},

//求差
function dealSubtraction(arr1,arr2){ //參數標記：arr1:父級數組（和），arr2比較數組（子）；
 var arrResult = new Array();
 for(var i=0; i < arr1.length; i++){
 var flag = true;
 for(var j=0; j < arr2.length; j++){
 if(arr1[i] == arr2[j])
 flag = false;
 }
 if(flag){
 arrResult.push(arr1[i]);
 }
 }
 return arrResult;
},

//獲取當前時間 年-月-日 時:分:秒
function getNowFormatDate() {
    var date = new Date();
    var seperator1 = "-";
    var seperator2 = ":";
    var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    var strDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
        + " " + date.getHours() + seperator2 + date.getMinutes()
        + seperator2 + date.getSeconds();
    return currentdate;
}

//手動分頁--插入
1)html結構部分代碼

<!--分頁-->
<div class="pagingBox">
    <span class="Btn" id="btn1"></span>
    <span class="Btn" id="btn2"></span>
    <span class="Btn" id="btn0">0</span>
    <span class="Btn">/</span>
    <span class="Btn" id="btn6">1</span>
    <span class="Btn" id="btn3"></span>
    <span class="Btn" id="btn4"></span>
    <input id="changePage" type="text">
    <span class="Btn" id="btn5">跳轉</span>
</div>

2)js方法部分

function Paging(){
    pageSize = 6;
    curPage = 1;
    len = $(".lableList").children("div").length;
    page = len % pageSize == 0 ? len / pageSize : Math.ceil(len / pageSize);
    document.getElementById("btn0").innerHTML = curPage;
    document.getElementById("btn6").innerHTML = page;
    displayPage(curPage);
}
function displayPage(showPageNum){
    if(showPageNum <= 1){
        curPage = 1;
    }else if(showPageNum >= page){
        curPage = page;
    }else{
        curPage = showPageNum;
    }
    document.getElementById("btn0").innerHTML = curPage;
    document.getElementById("changePage").value = curPage;
    begin = (curPage - 1) * pageSize;// 起始記錄號
    end = begin + 1 * pageSize - 1;    // 末尾記錄號
    if (end > len) end = len;
    $(".lableList>div").hide();    // 首先，設置這行隱藏
    $(".lableList>hr").hide();
    $(".lableList>div").each(function (i) {    // 而後，經過條件判斷決定本行是否恢復顯示
        if (i >= begin && i <= end)//顯示begin<=x<=end的記錄
        {
            $(this).show();
            $(this).next('hr').show();
        }
    });
}
function pagesJump(){
    var jumpPage = "";
    //首頁
    $("#btn1").click(function(){
        displayPage(1);
    });
    //上一頁
    $("#btn2").click(function(){
        if(curPage > 1){
            jumpPage = curPage - 1;
        }else{
            jumpPage = 1;
        }
        displayPage(jumpPage);
    });
    //下一頁
    $("#btn3").click(function(){
        if(curPage < page){
            jumpPage = curPage + 1;
        }else{
            jumpPage = page;
        }
        displayPage(jumpPage);
    });
    //尾頁
    $("#btn4").click(function(){
        displayPage(page);
    });
    //跳轉到  頁
    $("#btn5").click(function(){
        var jumpPagesNum = $("#changePage").val();
        if(jumpPagesNum<1){
            alert("請輸入正確頁碼！");
            jumpPage = 1;
        }else if(jumpPagesNum>page){
            alert("當前頁碼已超出範圍");
            jumpPage = page;
        }else{
            jumpPage = jumpPagesNum;
        }
        displayPage(jumpPage);
    });
}

//分頁方法修正記錄

//分頁跳轉function dealPaing(){    $(".pagingBox").children("span").unbind().click(function(obj){        //跳轉至首頁        if($(obj.currentTarget)[0].className == "firstPage"){            pageNumber = 0;        }else if($(obj.currentTarget)[0].className == "prePage"){            if(currentPage>0){                pageNumber = currentPage -1;            }else{                pageNumber = 0;                yonLink.Main.dealInfoMsgBox("當前頁面已經是第一頁！",false,false);            }        }else if($(obj.currentTarget)[0].className == "nextPage"){            if(currentPage<endPage-1){                pageNumber = currentPage + 1;            }else{                pageNumber = endPage-1;                yonLink.Main.dealInfoMsgBox("當前頁面已經是最後一頁！",false,false);            }        }else if($(obj.currentTarget)[0].className == "lastPage"){            pageNumber = endPage - 1;        }else if($(obj.currentTarget)[0].className == "toJump"){            var toJumpPageNum = $(".jumpPage").val();            if(toJumpPageNum == "") {                pageNumber = 0;                $(".pages").children("b:first-child").html("1");                yonLink.Main.dealInfoMsgBox("請輸入跳轉頁碼！",false,false);            }            if(toJumpPageNum<1){                pageNumber = 0;                $(".pages").children("b:first-child").html("1");                // $(".jumpPage").val("1");                yonLink.Main.dealInfoMsgBox("當前跳轉頁面超出內容列表範圍，已顯示至列表第一頁！",false,false);            }else if(toJumpPageNum>endPage){                pageNumber = endPage - 1;                $(".pages").children("b:first-child").innerText == endPage;                // $(".jumpPage").val(endPage);                yonLink.Main.dealInfoMsgBox("當前跳轉頁面超出內容列表範圍，已顯示至列表最後一頁！",false,false);            }else{                pageNumber = toJumpPageNum - 1;                $(".pages").children("b:first-child").innerText == toJumpPageNum;                // $(".jumpPage").val(toJumpPageNum);            }        }        $(".jumpPage").val("");        currentPage = pageNumber;        dealPagingSelected(pageNumber,pageSize,"");    });}