Home  >  Article  >  Web Front-end  >  JS Calendar Practice with Implementation Code_Time and Date

JS Calendar Practice with Implementation Code_Time and Date

WBOY
WBOYOriginal
2016-05-16 18:56:24910browse

The program looks like this: first collect the year and month input by the user, obtain the maximum number of days in the month through calculation, and obtain the day of the week that the first day of the month is. Then fill in the table with specific information for that month.


[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute
]<script> function getMonthJuZhen(date){ if(arguments.length == 0){ throw new Error("need a date"); } if(arguments[0] == null){ throw new Error("date is null or undefined"); } if(arguments[0] instanceof Date){ var monthjuzhen = new Array(5); for(var r = 0 ; r < 5 ; r++){ monthjuzhen[r] = [0,0,0,0,0,0,0]; } var maxDay = getMaxDay(arguments[0]); arguments[0].setDate(1); var r = 0; var c = arguments[0].getDay(); for(var d = 1 ; d <= maxDay ; d++){ monthjuzhen[r][c] = d; if(c == 6){ if(r == 4){ r = 0; } else{ r++; } c = 0; } else{ c++; } } return monthjuzhen; } else{ throw new Error("need a date"); } } function getMaxDay(date){ if(arguments.length == 0){ throw new Error("need a date"); } if(arguments[0] == null){ throw new Error("date is null or undefined"); } if(arguments[0] instanceof Date){ var tempDate = new Date(arguments[0].toString()); if(arguments[0].getMonth() == 11){ tempDate.setFullYear((tempDate.getFullYear()+1)); tempDate.setMonth(0); } else{ tempDate.setMonth((tempDate.getMonth()+1)); } return Math.floor((tempDate.getTime()-arguments[0].getTime())/(1000*60*60*24)); } else{ throw new Error("need a date"); } } function updateDate(){ var yearInput = document.getElementById("yearinput"); var monthInput = document.getElementById("monthinput"); try{ var year = parseInt(yearInput.value); var month = parseInt(monthInput.value); if(isNaN(year)){ if(isNaN(month)){ monthInput.value = ""; } yearInput.value = ""; return; } if(isNaN(month)){ monthInput.value = ""; return; } if(month > 12 || month < 1){ monthInput.value = ""; return; } month--; var date = new Date(year,month); var monthjuzhen = getMonthJuZhen(date); var day; var dayvalue; for(var r in monthjuzhen){ for(var c in monthjuzhen[parseInt(r)]){ day = document.getElementById(r+"-"+c); dayvalue = monthjuzhen[parseInt(r)][parseInt(c)]; if(dayvalue == 0){ if(day.hasChildNodes()){ day.removeChild(day.firstChild); } day.onmouseover = null; day.onmouseout = null; day.onclick = null; continue; } if(day.hasChildNodes()){ day.firstChild.nodeValue = dayvalue; } else{ day.appendChild(document.createTextNode(dayvalue)); } day.setAttribute("date",year+"-"+month+"-"+dayvalue); day.onmouseover = function(){this.style.backgroundColor = "black";this.style.color = "white";}; day.onmouseout = function(){this.style.backgroundColor = "white";this.style.color = "black"}; day.onclick = subDate; } } } catch(e){ alert(e); } } function subDate(){ var date = this.getAttribute("date").match(/(\d+)-(\d+)-(\d+)/); alert(new Date(date[1],date[2],date[3])); } </script>
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn