Question

我有一个格式为dd / mm / yyyy的日期列表作为文本我正在努力让这些日期根据今天的日期改变风格或类别今天是2016年2月9日或2016年9月9日

显然，有一些错误，因为我希望“if”语句将className标记为.past

如果年份在2016年之前 OR
如果月份在今天的月份之前（2月）和在今天的今天（9）之前

2016年1月13日被标记为未来 - 我不知道为什么我做错了什么？

var today=new Date();
    var yr = today.getFullYear();
    var da = today.getDate();
    if (da<10){da= "0"+today.getDate()} else {da=today.getDate()};
    var mo = (today.getMonth()+1);
    if (mo<10){mo= "0"+mo} else {mo=mo};

    var cnl = document.getElementsByClassName("lesson");
    var cnd = document.getElementsByClassName("date");
    var cd = document.querySelectorAll('.date');
    for (var i=0;i<cnd.length;i)
    {
	     var cd = document.querySelectorAll('.date')[i].innerHTML;
 

    if (
	       ( cd.substring(6,10)<yr ) 
		 
	        	||
		
		 (   
		   ( 
		 	 cd.substring(3,5) <= (mo)		
		    ) 
			 
		        &&
			 
		   (
		     ( 
			  cd.substring(0,2) < (da)		
		      ) 
		   )
		   
		 )
	   ) 
     {
	    cnd[i].className = "past";
	 }
	 else 
	 {
	 	    cnd[i].className = "future";
     }
	 
}

    .date {font-size:15px;}
    .past
    {
	   font-family:arial;
	   font-size:15px;
	   direction:rtl;
	   text-align:right;
	   font-weight:300;
	   color:#f11;  
    }
    .future
	{
	      font-size:15px;
	      direction:rtl;
	       text-align:right;
	       font-weight:300;
	       color:#1f1;  
    }

    <ol>
    <li><span class="date">18/11/2015</span></li>
    <li><span class="date">02/12/2015</span></li>
    <li><span class="date">16/12/2015</span></li>
    <li><span class="date">30/12/2015</span></li>
    <li><span class="date">13/01/2016</span></li>
    <li><span class="date">03/02/2016</span></li>
    <li><span class="date">17/02/2016</span></li>
    <li><span class="date">02/03/2016</span></li>
    <li><span class="date">16/03/2016</span></li>
    <li><span class="date">30/03/2016</span></li>
    <li><span class="date">04/05/2016</span></li>
    <li><span class="date">13/04/2016</span></li>
    <li><span class="date">04/05/2016</span></li>
    <li><span class="date">18/05/2016</span></li>
    <li><span class="date">08/06/2016</span></li>
    </ol>

jsfiddle

Answer 1

执行此操作的最佳方法是将字符串解析为日期，并根据当前日期进行检查。这是将DMY日期转换为Date实例的简单函数：

function dmyToDate(dmy) {
    var parts = dmy.split('/');
    parts[1] -= 1; // Months are 0-indexed
    return new Date(parts[2], parts[1], parts[0]);
}

现在，您可以遍历每个元素并将其日期与当前日期进行比较，并在必要时添加一个类。

var i = 0;
var il = cnd.length;

while (i < il) {

    if (dmyToDate(cnd[i].textContent) < today) {
        cnd[i].className = 'past';
    } else {
        cnd[i].className = 'future';
    }

    i += 1;

}

修改

为了测试今天，您需要将今天的时间戳减少到最近的一天。这可以通过几个基本的实用功能来完成。

// You can just write // var day = 86400000 // but I find that spelling it out like this is easier to understand. var day = 1000 * 60 * 60 * 24; function numberToNearest(number, nearest, method) { var prop = 'round'; if (typeof method === 'string' && typeof Math[method] === 'function') { prop = method; } return Math[prop](number / nearest) * nearest; } function getDayStart(date) { if (typeof date !== 'number' || !(date instanceof Date)) { date = Date.now(); } return numberToNearest(date, day, 'floor'); } var today = getDayStart();

现在循环只需要一个额外的子句。

var i = 0; var il = cnd.length; var cndElem; var cndDate; while (i < il) { cndElem = cnd[i]; cndDate = dmyToDate(cndElem.textContent); if (cndDate < today) { cndElem.className = 'past'; } else if (cndDate > today) { cndElem.className = 'future'; } else { cndElem.className = 'present'; } i += 1; }

修改2

有关正常工作的版本，请参阅我的JSFiddle示例。

JS将过去日期的样式/ className更改为字符串值

1 个答案: