我在javascript中有一个日期属性，我需要过期日期应该以红色显示？

Question

我的 html 中有 4 个不同的日期，过期日期 END MAR 20 应该是红色而不是绿色，下一个日期应该是绿色，即 END ARP 29，所有其他之前的日期应该是红色，我已经实现了截止日期过滤，但我需要过期日期应该是红色的

var date = $(".grid-item").map(function() {
  return $(this).text().trim()
}).get().sort(function(a, b) {
  var f = function(date) {
    var m, d, y;

    if (date.startsWith("END")) {
      date = date.split(" ");
      var months = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];
      m = months.indexOf(date[1]) + 1;
      d = date[2];
    } else [y, m, d] = date.split("-");
    

    return [(new Date()).getFullYear(), m, d];
  }
  var t = new Date();
  return Math.abs(t.getTime() - new Date(...f(a)).getTime()) - Math.abs(t.getTime() - new Date(...f(b)).getTime());
});


$(".grid-item").addClass('red').filter(function() {
  return $(this).text().trim() === date[0];
}).removeClass('red').addClass('green');

.grid-item {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

.green {
  background-color: green;
}

.red {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid-item">END MAY 29</div>
<div class="grid-item">END SEP 29</div>
<div class="grid-item">END MAR 20</div>
<div class="grid-item">END APR 29</div>

Answer 1

我做了一个打印过期日期的演示。但是，您可以通过使用一些 jQuery 代码来做到这一点，但我使用的是纯 javascript，因为当需要考虑性能时，Javascript 是更快且更明显的编码选择。

	
 var current = new Date();
 var currentDate = current.getDate();
 var currentMonth = current.getMonth();
 var currentYear = current.getFullYear();

     document.getElementById("date").value = currentDate;
     document.getElementById("month").value = currentMonth+1;
     document.getElementById("year").value = currentYear;

	   function fun(){
	  	 getDays();
	    }
	
	
	    function getDays(){    			
		  var date = ((document.getElementById("date").value) == "") ? currentDate : parseInt(document.getElementById("date").value);
		  var month = ((document.getElementById("month").value) == "")?currentMonth : parseInt(document.getElementById("month").value-1);
		  var year= ((document.getElementById("year").value) == "")?currentYear : parseInt(document.getElementById("year").value);	
		  var d = new Date(year,month,date);	
		
		document.getElementById("day").innerHTML = d;
		if(((currentYear<=year )&&(currentMonth<month)) ||(currentYear<year ) || ((currentYear==year )&&(currentMonth==month)&&(currentDate<=date)) ){
			document.getElementById("day").style.color = "green";
		}
		else{
			document.getElementById("day").style.color = "red";
		}
	      }
		getDays();

  input date
<input type="number" value = ""  id="date" onchange="fun()"/>
input month<input type="number" value = ""  id="month" onchange="fun()"/>
input year<input type="number" value = ""  id="year" onchange="fun()"/>
<p id="day"></p>