JQuery日期插件、原生js实现分页

日期插件以及使用方法

js代码
var ul = document.getElementById('ul');
var li = ul.getElementsByTagName('li');
li[2].className = 'background';
var num01 = 1;
var num02 = 100 /*总数 ，实际操作应获取数据库的值*/ ;
//1 //首页的点击事件li.length-li.length
li[0].onclick = function() {
    Background(2); //把所有的分页背景去掉，给指定的分页添加背景颜色
    num01 = 1;
    content(num01);
}
//2 //尾页的点击事件li.length-1
li[8].onclick = function() {
    Background(li.length - 3);
    num01 = num02 - (li.length - 5);
    content(num01)
}
//3 //上一页的点击事件li.length-(li.length-1)
li[1].onclick = function() {

    for(var j = 0; j < li.length - 4; j++) {
        if(li[j + 2].className == 'background' && li[j + 2].innerHTML != 1) {
            if(j + 2 != li.length - (li.length - 2)) {
                Background(j + 1);
            }
            break;
        }
    }
    if(j + 2 == li.length - (li.length - 2)) {
        num01--;
        content(num01);
    }
}
//4 下一页的点击事件li.length-1-1
li[7].onclick = function() {
    for(var j = 0; j < li.length; j++) {
        if(li[j].className == 'background' && li[j].innerHTML < num02) { //* && 写最后一页的总数*/
            if(j + 1 < li.length - 2) {
                Background(j + 1);
            }
            break;
        }
    }
    if(j + 1 == li.length - 2) {
        num01++;
        content(num01);
    }
}
//     分页的点击事件
for(var i = 0; i < li.length - 4; i++) {
    li[i + 2].index = i + 2;
    li[i + 2].onclick = function() {
        Background(this.index);
    }
}
//把所有的分页背景去掉，给指定的分页添加背景颜色
function Background(num) {
    for(var i = 0; i < li.length; i++) {
        li[i].className = li[i].className.replace('background', '');
        li[num].className = 'background';
    }
}
// 给li 写内容
content(num01);

function content(number) {
    for(var i = 0; i < li.length - 4; i++) {
        li[i + 2].innerHTML = number;
        number++;
    }
}

html
    <ul class="pager" id="ul">
         <li>首页</li>
         <li>上一页</li>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
         <li>下一页</li>
         <li>尾页</li>
    </ul>

css
#ul .background {
    background: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}
#ul li {
    -moz-user-select: none;
    /*火狐*/
    -webkit-user-select: none;
    /*webkit浏览器*/
    -ms-user-select: none;
    /*IE10*/
    -khtml-user-select: none;
    /*早期浏览器*/
    user-select: none;
    list-style: none;
    float: left;
    padding: 8px;
    font-size: 13px;
    border: 1px solid #ccc;
    margin: 2px;
    cursor: pointer;
    color: #585858;
}