备忘录的封装-跟随月份更新

今天有个需求，写了好一会，现在才调试出来，在这里做一下总结

image.png

需求是：跟随当前月份显示当前月份以后的日期，并自动添加；
现在控制只显示6个，我的思路：
1.筛选12月份中，到当前月的信息，
2.数据结构，月份，内容，内容链接
3.把数据渲染到结构中
上面还有个倒计时，也加上好了如下：

<script type="text/javascript">
    window.onload=function(){
        var ks=document.getElementById("kaoshi");
        var iNow = null;
        var iNew = null;
        var str = '';
        var t = 0;
        iNew = new Date('June 8,2018 22:3:0');
        iNow = new Date();
        t = Math.floor( ( iNew - iNow ) / 1000 );
        if(t>=0){
        str = toint(Math.floor(t/86400));
        // console.log(str)
        ks.innerHTML=str;
            
        }else{
            console.log('a')
        }
    // 距离考试时间
    }
    function toint(n){
    return n<10?'0'+n:''+n;
}
</script>

数据结构定义（1-12月份）：

                var arrpush=[
                    {
                        monthd:'1月',

                        content:[
                            {
                                url:'https://www.baidu.com/',
                                someths:'高考录取'
                            }
                        ]
                    },
                    {
                        monthd:'2月',
                        content:[
                            {
                                url:'https://www.baidu.com/',
                                someths:'高考'
                            },
                            {
                                url:'http://bj.xdf.cn/',
                                someths:'志愿填报'
                            },
                            {
                                url:'https://www.baidu.com/',
                                someths:'查分'
                            },
                            {
                                url:'http://bj.xdf.cn/',
                                someths:'自主招生'
                            }
                        ]
                    },
                    {
                        monthd:'3月',
                        content:[
                            {
                                url:'https://www.baidu.com/',
                                someths:'高考录取'
                            }
                        ]
                    },
                    {
                        monthd:'4月',
                        content:[
                            {
                                url:'https://www.baidu.com/',
                                someths:'高考'
                            },
                            {
                                url:'http://bj.xdf.cn/',
                                someths:'志愿填报'
                            },
                            {
                                url:'https://www.baidu.com/',
                                someths:'查分'
                            },
                            {
                                url:'http://bj.xdf.cn/',
                                someths:'自主招生'
                            }
                        ]
                    },
                    {
                        monthd:'3月',
                        content:[
                            {
                                url:'https://www.baidu.com/',
                                someths:'高考录取'
                            }
                        ]
                    },
                    {
                        monthd:'6月',
                        content:[
                            {
                                url:'https://www.baidu.com/',
                                someths:'高考'
                            },
                            {
                                url:'https://www.baidu.com/',
                                someths:'志愿填报'
                            },
                            {
                                url:'https://www.baidu.com/',
                                someths:'查分'
                            },
                            {
                                url:'https://www.baidu.com/',
                                someths:'自主招生'
                            }
                        ]
                    },
                    {
                        monthd:'7月',
                        content:[
                            {
                                url:'https://www.baidu.com/',
                                someths:'高考录取'
                            }
                        ]
                    },
                    {
                        monthd:'8月',
                        content:[
                            {
                                url:'https://www.baidu.com/',
                                someths:'高考'
                            },
                            {
                                url:'https://www.baidu.com/',
                                someths:'志愿填报'
                            },
                            {
                                url:'https://www.baidu.com/',
                                someths:'查分'
                            },
                            {
                                url:'https://www.baidu.com/',
                                someths:'自主招生'
                            }
                        ]
                    },
                    {
                        monthd:'9月',
                        content:[
                            {
                                url:'https://www.baidu.com/',
                                someths:'高考录取'
                            }
                        ]
                    },
                    {
                        monthd:'10月',
                        content:[
                            {
                                url:'https://www.baidu.com/',
                                someths:'高考'
                            },
                            {
                                url:'https://www.baidu.com/',
                                someths:'志愿填报'
                            },
                            {
                                url:'https://www.baidu.com/',
                                someths:'查分'
                            },
                            {
                                url:'https://www.baidu.com/',
                                someths:'自主招生'
                            }
                        ]
                    },
                    {
                        monthd:'11月',
                        content:[
                            {
                                url:'https://www.baidu.com/',
                                someths:'高考录取'
                            }
                        ]
                    },
                    {
                        monthd:'12月',
                        content:[
                            {
                                url:'https://www.baidu.com/',
                                someths:'高考录取'
                            }
                        ]
                    }
                ];

筛选数据

            function rtmonth(){
                var date=new Date;  
                var year=date.getFullYear();   
                var month=date.getMonth()+1;  
                month =(month<10 ? "0"+month:month); 
                month=parseInt(month);
                index=month-1;
               return index;
            }
            function showArr(){
                var arr=[];
                arr.length=6;
                var arrpush=[
                    {
                        monthd:'1月',

                        content:[
                            {
                                url:'https://www.baidu.com/',
                                someths:'高考录取'
                            }
                        ]
                    },
                    {
                        monthd:'2月',
                        content:[
                            {
                                url:'https://www.baidu.com/',
                                someths:'高考'
                            },
                            {
                                url:'http://bj.xdf.cn/',
                                someths:'志愿填报'
                            },
                            {
                                url:'https://www.baidu.com/',
                                someths:'查分'
                            },
                            {
                                url:'http://bj.xdf.cn/',
                                someths:'自主招生'
                            }
                        ]
                    },
                    {
                        monthd:'3月',
                        content:[
                            {
                                url:'https://www.baidu.com/',
                                someths:'高考录取'
                            }
                        ]
                    },
                    {
                        monthd:'4月',
                        content:[
                            {
                                url:'https://www.baidu.com/',
                                someths:'高考'
                            },
                            {
                                url:'http://bj.xdf.cn/',
                                someths:'志愿填报'
                            },
                            {
                                url:'https://www.baidu.com/',
                                someths:'查分'
                            },
                            {
                                url:'http://bj.xdf.cn/',
                                someths:'自主招生'
                            }
                        ]
                    },
                    {
                        monthd:'3月',
                        content:[
                            {
                                url:'https://www.baidu.com/',
                                someths:'高考录取'
                            }
                        ]
                    },
                    {
                        monthd:'6月',
                        content:[
                            {
                                url:'https://www.baidu.com/',
                                someths:'高考'
                            },
                            {
                                url:'https://www.baidu.com/',
                                someths:'志愿填报'
                            },
                            {
                                url:'https://www.baidu.com/',
                                someths:'查分'
                            },
                            {
                                url:'https://www.baidu.com/',
                                someths:'自主招生'
                            }
                        ]
                    },
                    {
                        monthd:'7月',
                        content:[
                            {
                                url:'https://www.baidu.com/',
                                someths:'高考录取'
                            }
                        ]
                    },
                    {
                        monthd:'8月',
                        content:[
                            {
                                url:'https://www.baidu.com/',
                                someths:'高考'
                            },
                            {
                                url:'https://www.baidu.com/',
                                someths:'志愿填报'
                            },
                            {
                                url:'https://www.baidu.com/',
                                someths:'查分'
                            },
                            {
                                url:'https://www.baidu.com/',
                                someths:'自主招生'
                            }
                        ]
                    },
                    {
                        monthd:'9月',
                        content:[
                            {
                                url:'https://www.baidu.com/',
                                someths:'高考录取'
                            }
                        ]
                    },
                    {
                        monthd:'10月',
                        content:[
                            {
                                url:'https://www.baidu.com/',
                                someths:'高考'
                            },
                            {
                                url:'https://www.baidu.com/',
                                someths:'志愿填报'
                            },
                            {
                                url:'https://www.baidu.com/',
                                someths:'查分'
                            },
                            {
                                url:'https://www.baidu.com/',
                                someths:'自主招生'
                            }
                        ]
                    },
                    {
                        monthd:'11月',
                        content:[
                            {
                                url:'https://www.baidu.com/',
                                someths:'高考录取'
                            }
                        ]
                    },
                    {
                        monthd:'12月',
                        content:[
                            {
                                url:'https://www.baidu.com/',
                                someths:'高考录取'
                            }
                        ]
                    }
                ];
                var len=arrpush.length;
                index=rtmonth();//返回当前月份
                for(var j=0;j<len;j++){
                    if(j==index&&index<=6){
                        arr.splice(0,arr.length);//清空数组
                        for(var i=j;i<(j+6);i++){
                            arr.push({monthd:arrpush[i].monthd,content:arrpush[i].content})
                        }
                    }
                    if(j==index&&index>6){
                        var c=len-index;  //当大于6的时候，取6-12之间的差值
                        var d=(6-c) // 从数组开始往后再取 d 个元素
                        arr.splice(0,arr.length);//清空数组
                        for(var f=j;f<(j+c);f++){
                            arr.push({monthd:arrpush[f].monthd,content:arrpush[f].content})
                        }
                        for(var b=0;b<d;b++){
                            arr.push({monthd:arrpush[b].monthd,content:arrpush[b].content})
                        }
                    }                    
                }
                // console.log(index,c,d)
                return arr
            }

            showArr();
            var t=showArr();
            // console.log(t);

追加到dom中

这里用到forEach方法，在这里做个定义：
forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
注意: forEach() 对于空数组是不会执行回调函数的。
语法：

array.forEach(function(currentValue, index, arr), thisValue)

参数 描述
function(currentValue, index, arr)
数组中每个元素需要调用的函数。
函数参数:
currentValue 必需。当前元素
index 可选。当前元素的索引值。
arr 可选。当前元素所属的数组对象。
thisValue 可选。传递给函数的值一般用 "this" 值。
如果这个参数为空， "undefined" 会传递给 "this" 值

兼容性：
这种方法是一个JavaScript扩展到ECMA-262标准;因此它可能不存在在标准的其他实现。为了使它工作，你需要添加下面的脚本代码的顶部：

if (!Array.prototype.forEach)
{
 Array.prototype.forEach = function(fun /*, thisp*/)
 {
  var len = this.length;
  if (typeof fun != "function")
   throw new TypeError();
 
  var thisp = arguments[1];
  for (var i = 0; i < len; i++)
  {
   if (i in this)
    fun.call(thisp, this[i], i, this);
  }
 };
}

所以追加如下：

            t.forEach(function(item,i){
                $('#ul li span').eq(i).prepend(item.monthd);
                item.content.forEach(function(items,n){
                    var str2='<a href="'+items.url+'" target="_blank">'+items.someths+'</a>';
                    // console.log(str2,n)
                    // $('#ul li').eq(i).append(str2);
                    $('#ul li .lir').eq(i).append(str2);
                })
            })

dom结构如下：

       <ul id="ul">
                <b></b>
                <li class="active">
                    <span><b></b></span>
                    <div class="lir">
                    </div>
                </li>
                <li>
                    <span><b></b></span>
                    <div class="lir">
                    </div>
                </li>
                <li>
                    <span><b></b></span>
                    <div class="lir">
                        <a href="" target="_blank"></a>
                    </div>
                </li>
                <li>
                    <span><b></b></span>
                    <div class="lir">
                    </div>
                </li>
                <li>
                    <span><b></b></span>
                    <div class="lir">
                    </div>
                </li>
                <li>
                    <span><b></b></span>
                    <div class="lir">
                    </div>
                </li>
            </ul>

全部代码也贴出来：

   <!-- 高考备忘录 -->
        <div class="gko3">
            <h3>
                <span>高考备忘录</span>
                <b>距离考试还有
                    <strong id="kaoshi"></strong>天</b>
            </h3>
            <ul id="ul">
                <b></b>
                <li class="active">
                    <span><b></b></span>
                    <div class="lir">
                    </div>
                </li>
                <li>
                    <span><b></b></span>
                    <div class="lir">
                    </div>
                </li>
                <li>
                    <span><b></b></span>
                    <div class="lir">
                        <a href="" target="_blank"></a>
                    </div>
                </li>
                <li>
                    <span><b></b></span>
                    <div class="lir">
                    </div>
                </li>
                <li>
                    <span><b></b></span>
                    <div class="lir">
                    </div>
                </li>
                <li>
                    <span><b></b></span>
                    <div class="lir">
                    </div>
                </li>
            </ul>
        </div>

<script type="text/javascript">

    $(function(){
        //兼容 forEach方法
        if (!Array.prototype.forEach){

            Array.prototype.forEach = function(fun /*, thisp*/){
                var len = this.length;
                if (typeof fun != "function") throw new TypeError();
                var thisp = arguments[1];
                for (var i = 0; i < len; i++){
                    if (i in this) fun.call(thisp, this[i], i, this);
                }
            };

        }
        
        function rtmonth(){
            var date=new Date;  
            var year=date.getFullYear();   
            var month=date.getMonth()+1;  
            month =(month<10 ? "0"+month:month); 
            month=parseInt(month);
            index=month-1;
            return index;
        }
        function showArr(){
            var arr=[];
            arr.length=6;
            var arrpush=[
                {
                    monthd:'1月',

                    content:[
                        {
                            url:'https://www.baidu.com/',
                            someths:'高考录取'
                        }
                    ]
                },
                {
                    monthd:'2月',
                    content:[
                        {
                            url:'https://www.baidu.com/',
                            someths:'高考'
                        },
                        {
                            url:'http://bj.xdf.cn/',
                            someths:'志愿填报'
                        },
                        {
                            url:'https://www.baidu.com/',
                            someths:'查分'
                        },
                        {
                            url:'http://bj.xdf.cn/',
                            someths:'自主招生'
                        }
                    ]
                },
                {
                    monthd:'3月',
                    content:[
                        {
                            url:'https://www.baidu.com/',
                            someths:'高考录取'
                        }
                    ]
                },
                {
                    monthd:'4月',
                    content:[
                        {
                            url:'https://www.baidu.com/',
                            someths:'高考'
                        },
                        {
                            url:'http://bj.xdf.cn/',
                            someths:'志愿填报'
                        },
                        {
                            url:'https://www.baidu.com/',
                            someths:'查分'
                        },
                        {
                            url:'http://bj.xdf.cn/',
                            someths:'自主招生'
                        }
                    ]
                },
                {
                    monthd:'3月',
                    content:[
                        {
                            url:'https://www.baidu.com/',
                            someths:'高考录取'
                        }
                    ]
                },
                {
                    monthd:'6月',
                    content:[
                        {
                            url:'https://www.baidu.com/',
                            someths:'高考'
                        },
                        {
                            url:'https://www.baidu.com/',
                            someths:'志愿填报'
                        },
                        {
                            url:'https://www.baidu.com/',
                            someths:'查分'
                        },
                        {
                            url:'https://www.baidu.com/',
                            someths:'自主招生'
                        }
                    ]
                },
                {
                    monthd:'7月',
                    content:[
                        {
                            url:'https://www.baidu.com/',
                            someths:'高考录取'
                        }
                    ]
                },
                {
                    monthd:'8月',
                    content:[
                        {
                            url:'https://www.baidu.com/',
                            someths:'高考'
                        },
                        {
                            url:'https://www.baidu.com/',
                            someths:'志愿填报'
                        },
                        {
                            url:'https://www.baidu.com/',
                            someths:'查分'
                        },
                        {
                            url:'https://www.baidu.com/',
                            someths:'自主招生'
                        }
                    ]
                },
                {
                    monthd:'9月',
                    content:[
                        {
                            url:'https://www.baidu.com/',
                            someths:'高考录取'
                        }
                    ]
                },
                {
                    monthd:'10月',
                    content:[
                        {
                            url:'https://www.baidu.com/',
                            someths:'高考'
                        },
                        {
                            url:'https://www.baidu.com/',
                            someths:'志愿填报'
                        },
                        {
                            url:'https://www.baidu.com/',
                            someths:'查分'
                        },
                        {
                            url:'https://www.baidu.com/',
                            someths:'自主招生'
                        }
                    ]
                },
                {
                    monthd:'11月',
                    content:[
                        {
                            url:'https://www.baidu.com/',
                            someths:'高考录取'
                        }
                    ]
                },
                {
                    monthd:'12月',
                    content:[
                        {
                            url:'https://www.baidu.com/',
                            someths:'高考录取'
                        }
                    ]
                }
            ];
            var len=arrpush.length;
            index=rtmonth();//返回当前月份
            for(var j=0;j<len;j++){
                if(j==index&&index<=6){
                    arr.splice(0,arr.length);//清空数组
                    for(var i=j;i<(j+6);i++){
                        arr.push({monthd:arrpush[i].monthd,content:arrpush[i].content})
                    }
                }
                if(j==index&&index>6){
                    var c=len-index;  //当大于6的时候，取6-12之间的差值
                    var d=(6-c) // 从数组开始往后再取 d 个元素
                    arr.splice(0,arr.length);//清空数组
                    for(var f=j;f<(j+c);f++){
                        arr.push({monthd:arrpush[f].monthd,content:arrpush[f].content})
                    }
                    for(var b=0;b<d;b++){
                        arr.push({monthd:arrpush[b].monthd,content:arrpush[b].content})
                    }
                }                    
            }
            // console.log(index,c,d)
            return arr
        }

        showArr();
        var t=showArr();
        // console.log(t);
        t.forEach(function(item,i){
            $('#ul li span').eq(i).prepend(item.monthd);
            item.content.forEach(function(items,n){
                var str2='<a href="'+items.url+'" target="_blank">'+items.someths+'</a>';
                // console.log(str2,n)
                // $('#ul li').eq(i).append(str2);
                $('#ul li .lir').eq(i).append(str2);
            })
        })
    })
</script>

<script type="text/javascript">
    window.onload=function(){
        var ks=document.getElementById("kaoshi");
        var iNow = null;
        var iNew = null;
        var str = '';
        var t = 0;
        iNew = new Date('June 8,2018 22:3:0');
        iNow = new Date();
        t = Math.floor( ( iNew - iNow ) / 1000 );
        if(t>=0){
        str = toint(Math.floor(t/86400));
        // console.log(str)
        ks.innerHTML=str;
            
        }else{
            console.log('a')
        }
    // 距离考试时间
    }
    function toint(n){
    return n<10?'0'+n:''+n;
}
</script>