今天有个需求，写了好一会，现在才调试出来，在这里做一下总结
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>
网友评论