javascript - 突出显示当前日期

Question

我是编程初学者。我从网上得到了一段代码，我正在修改以获取js、jquery、jsp。我想要得到的是我需要突出显示今天的日期。我尝试了很多次但都没有成功。任何帮助将不胜感激。

$(document).ready(function () {
	var Calendar = function(calen) {
		  //Store div id
		  this.divId = calen.ParentID;
		  // Days of week, starting on Sunday
		  this.DaysOfWeek = calen.DaysOfWeek;
		  // Months, stating on January
		  this.Months = calen.Months;

		  // Set the current month, year
		  var d = new Date();
		  this.CurrentMonth = d.getMonth();
		  this.CurrentYear = d.getFullYear();
		  

		  var f=calen.Format;
		  //this.f = typeof(f) == 'string' ? f.charAt(0).toUpperCase() : 'M';

		  if(typeof(f) == 'string') {
		    this.f  = f.charAt(0).toUpperCase();
		  } else {
		    this.f = 'M';
		  }

		};

		// Goes to next month
		Calendar.prototype.nextMonth = function() {

		  if ( this.CurrentMonth == 11 ) {

		    this.CurrentMonth = 0;
		    
		    this.CurrentYear++;

		  } else {
		    console.log("this.CurrentMonth == ", this.CurrentMonth);
		    this.CurrentMonth++;
		  }

		  this.showCurrent();
		};

		// Goes to previous month
		Calendar.prototype.previousMonth = function() {

		  if ( this.CurrentMonth == 0 ) {

		    this.CurrentMonth = 11;
		    this.CurrentYear--;

		  } else {

		    this.CurrentMonth--;

		  }

		  this.showCurrent();
		};

		// 
		Calendar.prototype.previousYear = function() {
		  this.CurrentYear--;
		  this.showCurrent();
		}
 
		Calendar.prototype.nextYear = function() {

		  this.CurrentYear++;

		  this.showCurrent();
		}              

		// Show current month
		Calendar.prototype.showCurrent = function() {
		 
		  this.Calendar(this.CurrentYear, this.CurrentMonth);
		  
		};
		
		

		// Show month (year, month)
		Calendar.prototype.Calendar = function(y,m,n) {
		  
		  typeof(y) == 'number' ? this.CurrentYear = y : null;
		  typeof(y) == 'number' ? this.CurrentMonth = m : null;
		  typeof(y) == 'number' ? this.CurrDate = n : null;


		  // 1st day of the selected month
		  var firstDayOfCurrentMonth = new Date(y, m, 1).getDay();
		  
		  // Last date of the selected month
		  var lastDateOfCurrentMonth = new Date(y, m+1, 0).getDate();

		  // Last day of the previous month
		  var lastDateOfLastMonth = m == 0 ? new Date(y-1, 11, 0).getDate() : new Date(y, m, 0).getDate();

		  
		  // Write selected month and year. This HTML goes into <div id="year"></div>
		  //var yearhtml = '<span class="yearspan">' + y + '</span>';

		  // Write selected month and year. This HTML goes into <div id="month"></div>
		  //var monthhtml = '<span class="monthspan">' + this.Months[m] + '</span>';

		  // Write selected month and year. This HTML goes into <div id="month"></div>
		  var monthandyearhtml = '<span id="monthandyearspan">' + this.Months[m] + ' - ' + y + '</span>';

		  var html = '<table>';

		  // Write the header of the days of the week
		  html += '<tr>';

		  
		  for(var i=0; i < 7;i++) {


		    html += '<th class="daysheader">' + this.DaysOfWeek[i] + '</th>';
		  }

		  html += '</tr>';


		  //this.f = 'X';

		  var p = dm = this.f == 'M' ? 1 : (firstDayOfCurrentMonth == 0 ? -5 : 2);

		  
		  
		  var cellvalue;

		  for (var d, i=0, z=0; z<6; z++) {
		    html += '<tr>';

		    for (var k= 0; k < 7; k++) {
		      d = i + dm - firstDayOfCurrentMonth;

		      // Dates from prev month
		      if (d < 1){
		        cellvalue = lastDateOfLastMonth - firstDayOfCurrentMonth + p++;
		        
		        html += '<td id="prevmonthdates">' + 
		              '<span id="cellvaluespan">' + (cellvalue) + '</span><br/>' + 
		           
		            '</td>';

		      // Dates from next month
		      } else if ( d > lastDateOfCurrentMonth){
		    	  
		       html += '<td id="nextmonthdates">' + (p++) + '</td>';

		      // Current month dates
		        
		      } else {
		        html += '<td id="currentmonthdates">' + (d) + '</td>';
		        p = 1;
		      }
		      
		      
		      if (i % 7 == 6 && d >= lastDateOfCurrentMonth) {

		        z = 10; // no more rows
		      }


		      i++;

		    }

		    html += '</tr>';
		  }

		  // Closes table
		  html += '</table>';

		  
		  document.getElementById("monthandyear").innerHTML = monthandyearhtml;

		  document.getElementById(this.divId).innerHTML = html;
		};

		// On Load of the window
		window.onload = function() {
		  
		  // Start calendar
		  var c = new Calendar({
		    ParentID:"divcalendartable",

		    DaysOfWeek:[
		    'MON',
		    'TUE',
		    'WED',
		    'THU',
		    'FRI',
		    'SAT',
		    'SUN'
		    ],

		    Months:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ],

		    Format:'dd/mm/yyyy'
		  });
		  
		 

		  c.showCurrent();
		  
		  
		  // Bind next and previous button clicks
		  getId('btnPrev').onclick = function(){
		    c.previousMonth();
		  };

		  getId('btnPrevYr').onclick = function(){
		    c.previousYear();
		  };

		  getId('btnNext').onclick = function(){
		    c.nextMonth();
		  };

		  getId('btnNextYr').onclick = function(){
		    c.nextYear();
		  };                        
		}

		// Get element by id
		function getId(id) {
		  return document.getElementById(id);
		}

});

html, body { margin: 0; padding: 0; }

table {
  border-collapse: collapse;
  font-family: Georgia, Times, serif;
}

th {
  border: 1px solid #A8A8A8;
  vertical-align: top;
}

td {
  height: 150px;
  width: 150px;
  padding: 10px;
  border: 1px solid #A8A8A8;
  vertical-align: top;
  text-align:center;
}

.divcalendar {
  padding: 15px;
    float:left;
    /*background-color: #FFCC00;*/
}

/* Wrapper div. That makes the inner div into an inline element that can be centered with text-align.*/
#calendaroverallcontrols {
  text-align: center;
}

/* This is a fluid div as width will be changing */
#calendarmonthcontrols {
  display: inline-block;
  /*background-color: #FF0000;*/
}

#calendarmonthcontrols > div, #calendarmonthcontrols > a {
    display: inline-block;
}    

#btnPrevYr {
  text-decoration: none;
  font-size: 35px;
  vertical-align: middle;
  /*background: #00FFCC;*/      
}

#btnPrev {
  text-decoration: none;
  font-size: 35px;
  margin-left: 20px;
  vertical-align: middle;
  /*background: #00FFCC;*/
}    

/*.yearspan {
  font-size: 20px;
  font-weight: bold;
  float: left;
  margin-left: 5px;
  margin-right: 5px;
}

.monthspan {
  font-size: 20px;
  font-weight: bold;
  float: left;
  margin-left: 5px;
  margin-right: 5px;
}*/

#monthandyearspan {
  width: 50px;
  font-size: 25px;
  font-weight: bold;
  margin-left: 20px;
  margin-right: 20px;
  vertical-align: middle;
  /*background: #00FFCC;*/
}    

#monthandyear {
  vertical-align: middle;
}

#btnNext {
  text-decoration: none;
  font-size: 35px;
  margin-right: 20px;
  vertical-align: middle;
  /*background: #00FFCC;*/
}

#btnNextYr {
  text-decoration: none;
  font-size: 35px;
  vertical-align: middle;
  /*background: #00FFCC;*/
}        

#divcalendartable {
  clear: both;
}

.daysheader {
  background: #C0C0C0;
  height: auto;
  text-align: center;
}

#prevmonthdates {
  background-color: #E0E0E0;
}

#nextmonthdates {
  background-color: #E0E0E0;
}

#currentmonthdates {
  background-color: #FFFFFF;
}

#cellvaluespan {
  background: #FF0000;
}

#cellvaluelist {
  background: #FFCC00;
}        

.swim {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 80%;
  text-align: center;
  background: #445511;
  color: #F5F5F5;
  margin-bottom: 5px;
  padding: 5px;
}

.chrono {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 80%;
  text-align: center;
  background: #778899;
  color: #F5F5F5;
  margin-bottom: 5px;
  padding: 5px;
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div class="divcalendar">

<div id="calendaroverallcontrols">

  <div id="calendarmonthcontrols">
     <a id="btnPrevYr" href="#" title="Previous Year"><span></span></a> 

    <a id="btnPrev" href="#" title="Previous Month"><span><</span></a>
		
		
    

    <div id="monthandyear"></div>


    <a id="btnNext" href="#" title="Next Month"><span>></span></a>

  <a id="btnNextYr" href="#" title="Next Year"><span></span></a>      
  </div>
</div>

<!-- extra  -->
<div id="divcalendartable"></div>
</div>

Answer 1

简介:您根本不需要 jQuery。避免将 window.onload 插入到 jQuery Dom 就绪事件中。没啥用。

实现目标的快速方法是:

定义一个新的 css 类:

.currentDay {

     background-color: green !important;
}

在方法“Calendar.prototype.Calendar = function (y, m, n) {”中更改这些行:

// Current month dates

} else {
    html += '<td id="currentmonthdates">' + (d) + '</td>';
    p = 1;
}

与:

} else {
    var lDate = new Date();
    if (d == lDate.getDate() && this.CurrentMonth == lDate.getMonth() &&
         this.CurrentYear == lDate.getFullYear()) {
        html += '<td id="currentmonthdates" class="currentDay">' + (d) + '</td>';
    } else {
        html += '<td id="currentmonthdates">' + (d) + '</td>';
    }
    p = 1;
}

之前的更改将 currentDay 类添加到今天。

var Calendar = function (calen) {
    //Store div id
    this.divId = calen.ParentID;
    // Days of week, starting on Sunday
    this.DaysOfWeek = calen.DaysOfWeek;
    // Months, stating on January
    this.Months = calen.Months;
    // Set the current month, year
    var d = new Date();
    this.CurrentMonth = d.getMonth();
    this.CurrentYear = d.getFullYear();
    var f = calen.Format;
    //this.f = typeof(f) == 'string' ? f.charAt(0).toUpperCase() : 'M';
    if (typeof(f) == 'string') {
        this.f = f.charAt(0).toUpperCase();
    } else {
        this.f = 'M';
    }
};
// Goes to next month
Calendar.prototype.nextMonth = function () {
    if (this.CurrentMonth == 11) {
        this.CurrentMonth = 0;
        this.CurrentYear++;
    } else {
        console.log("this.CurrentMonth == ", this.CurrentMonth);
        this.CurrentMonth++;
    }
    this.showCurrent();
};
// Goes to previous month
Calendar.prototype.previousMonth = function () {
    if (this.CurrentMonth == 0) {
        this.CurrentMonth = 11;
        this.CurrentYear--;
    } else {
        this.CurrentMonth--;
    }
    this.showCurrent();
};
Calendar.prototype.previousYear = function () {
    this.CurrentYear--;
    this.showCurrent();
}
Calendar.prototype.nextYear = function () {
    this.CurrentYear++;
    this.showCurrent();
}
// Show current month
Calendar.prototype.showCurrent = function () {
    this.Calendar(this.CurrentYear, this.CurrentMonth);
};
// Show month (year, month)
Calendar.prototype.Calendar = function (y, m, n) {
    typeof(y) == 'number' ? this.CurrentYear = y : null;
    typeof(y) == 'number' ? this.CurrentMonth = m : null;
    typeof(y) == 'number' ? this.CurrDate = n : null;
    // 1st day of the selected month
    var firstDayOfCurrentMonth = new Date(y, m, 1).getDay();
    // Last date of the selected month
    var lastDateOfCurrentMonth = new Date(y, m + 1, 0).getDate();
    // Last day of the previous month
    var lastDateOfLastMonth = m == 0 ? new Date(y - 1, 11, 0).getDate() : new Date(y, m, 0).getDate();
    // Write selected month and year. This HTML goes into <div id="year"></div>
    //var yearhtml = '<span class="yearspan">' + y + '</span>';
    // Write selected month and year. This HTML goes into <div id="month"></div>
    //var monthhtml = '<span class="monthspan">' + this.Months[m] + '</span>';
    // Write selected month and year. This HTML goes into <div id="month"></div>
    var monthandyearhtml = '<span id="monthandyearspan">' + this.Months[m] + ' - ' + y + '</span>';
    var html = '<table>';
    // Write the header of the days of the week
    html += '<tr>';
    for (var i = 0; i < 7; i++) {
        html += '<th class="daysheader">' + this.DaysOfWeek[i] + '</th>';
    }
    html += '</tr>';
    //this.f = 'X';
    var p = dm = this.f == 'M' ? 1 : (firstDayOfCurrentMonth == 0 ? -5 : 2);
    var cellvalue;
    for (var d, i = 0, z = 0; z < 6; z++) {
        html += '<tr>';
        for (var k = 0; k < 7; k++) {
            d = i + dm - firstDayOfCurrentMonth;
            // Dates from prev month
            if (d < 1) {
                cellvalue = lastDateOfLastMonth - firstDayOfCurrentMonth + p++;
                html += '<td id="prevmonthdates">' +
                        '<span id="cellvaluespan">' + (cellvalue) + '</span><br/>' +
                        '</td>';
                // Dates from next month
            } else if (d > lastDateOfCurrentMonth) {
                html += '<td id="nextmonthdates">' + (p++) + '</td>';
                // Current month dates
            } else {
                var lDate = new Date();
                if (d == lDate.getDate() && this.CurrentMonth == lDate.getMonth() && this.CurrentYear == lDate.getFullYear()) {
                    html += '<td id="currentmonthdates" class="currentDay">' + (d) + '</td>';
                } else {
                    html += '<td id="currentmonthdates">' + (d) + '</td>';
                }
                p = 1;
            }
            if (i % 7 == 6 && d >= lastDateOfCurrentMonth) {
                z = 10; // no more rows
            }
            i++;
        }
        html += '</tr>';
    }
    // Closes table
    html += '</table>';
    document.getElementById("monthandyear").innerHTML = monthandyearhtml;
    document.getElementById(this.divId).innerHTML = html;
};
// On Load of the window
window.onload = function () {
    // Start calendar
    var c = new Calendar({
        ParentID: "divcalendartable",
        DaysOfWeek: [
            'MON',
            'TUE',
            'WED',
            'THU',
            'FRI',
            'SAT',
            'SUN'
        ],
        Months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        Format: 'dd/mm/yyyy'
    });
    c.showCurrent();
    // Bind next and previous button clicks
    getId('btnPrev').onclick = function () {
        c.previousMonth();
    };
    getId('btnPrevYr').onclick = function () {
        c.previousYear();
    };
    getId('btnNext').onclick = function () {
        c.nextMonth();
    };
    getId('btnNextYr').onclick = function () {
        c.nextYear();
    };
    // Get element by id
    function getId(id) {
        return document.getElementById(id);
    }
}

html, body {
    margin: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
    font-family: Georgia, Times, serif;
}

th {
    border: 1px solid #A8A8A8;
    vertical-align: top;
}

td {
    height: 150px;
    width: 150px;
    padding: 10px;
    border: 1px solid #A8A8A8;
    vertical-align: top;
    text-align: center;
}

.divcalendar {
    padding: 15px;
    float: left;
    /*background-color: #FFCC00;*/
}

/* Wrapper div. That makes the inner div into an inline element that can be centered with text-align.*/
#calendaroverallcontrols {
    text-align: center;
}

/* This is a fluid div as width will be changing */
#calendarmonthcontrols {
    display: inline-block;
    /*background-color: #FF0000;*/
}

#calendarmonthcontrols > div, #calendarmonthcontrols > a {
    display: inline-block;
}

#btnPrevYr {
    text-decoration: none;
    font-size: 35px;
    vertical-align: middle;
    /*background: #00FFCC;*/
}

#btnPrev {
    text-decoration: none;
    font-size: 35px;
    margin-left: 20px;
    vertical-align: middle;
    /*background: #00FFCC;*/
}

/*.yearspan {
  font-size: 20px;
  font-weight: bold;
  float: left;
  margin-left: 5px;
  margin-right: 5px;
}

.monthspan {
  font-size: 20px;
  font-weight: bold;
  float: left;
  margin-left: 5px;
  margin-right: 5px;
}*/

#monthandyearspan {
    width: 50px;
    font-size: 25px;
    font-weight: bold;
    margin-left: 20px;
    margin-right: 20px;
    vertical-align: middle;
    /*background: #00FFCC;*/
}

#monthandyear {
    vertical-align: middle;
}

#btnNext {
    text-decoration: none;
    font-size: 35px;
    margin-right: 20px;
    vertical-align: middle;
    /*background: #00FFCC;*/
}

#btnNextYr {
    text-decoration: none;
    font-size: 35px;
    vertical-align: middle;
    /*background: #00FFCC;*/
}

#divcalendartable {
    clear: both;
}

.daysheader {
    background: #C0C0C0;
    height: auto;
    text-align: center;
}

#prevmonthdates {
    background-color: #E0E0E0;
}

#nextmonthdates {
    background-color: #E0E0E0;
}

#currentmonthdates {
    background-color: #FFFFFF;
}

#cellvaluespan {
    background: #FF0000;
}

#cellvaluelist {
    background: #FFCC00;
}

.swim {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 80%;
    text-align: center;
    background: #445511;
    color: #F5F5F5;
    margin-bottom: 5px;
    padding: 5px;
}

.chrono {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 80%;
    text-align: center;
    background: #778899;
    color: #F5F5F5;
    margin-bottom: 5px;
    padding: 5px;
}
.currentDay {
    background-color: green !important;
}

<div class="divcalendar">

    <div id="calendaroverallcontrols">

        <div id="calendarmonthcontrols">
            <a id="btnPrevYr" href="#" title="Previous Year"><span></span></a>

            <a id="btnPrev" href="#" title="Previous Month"><span><</span></a>


            <div id="monthandyear"></div>


            <a id="btnNext" href="#" title="Next Month"><span>></span></a>

            <a id="btnNextYr" href="#" title="Next Year"><span></span></a>
        </div>
    </div>

    <!-- extra  -->
    <div id="divcalendartable"></div>
</div>