Effect picture:
Click the arrows on the left and right to switch between the previous month or the next month.
jsp content
<!--Time month selection box--> <table id="querytable" style="border:1px;"> <tr> <td style="width: 20%;"> <span class="leftspan"> <span style="color:#FF0000;"> <img src="img/left.jpg" style="height:35px; width:35px;" onclick="reduceMonth()"/> </span> </span> </td> <td align="center"> <label id="beginTime" class="kbtn" style="height:100px; width:200px;font-size: 35px;"> </label> </td> <td style="width: 20%;" align="right"> <span class="rightspan"> <span style="color:#FF0000;"> <img src="img/right.jpg" style="height:35px; width:35px;" onclick="addMonth()" /> </span> </span> </td> </tr> </table>
illustrate:
1), arrow pictures can be downloaded from the Internet
js content
// month addition and subtraction processing function addMonth() { var s = document.getElementById("beginTime").innerHTML; var arr = s.split("-"); var year = parseInt(arr[0]); var month = parseInt(arr[1]); //determine month if (month == 12) { year = year + 1; month = 1; } else { month = month + 1; } document.getElementById("beginTime").innerHTML = year + "-" + month; initTable(year, month-1); } function reduceMonth() { var s = document.getElementById("beginTime").innerHTML; var arr = s.split("-"); var year = parseInt(arr[0]); var month = parseInt(arr[1]); console.log(year + "/" + month); //determine month if (month == 1) { year = year - 1; month = 12; } else { month = month - 1; } document.getElementById("beginTime").innerHTML = year + "-" + month; initTable(year, month-1); }
----------
Reference article
https://blog.csdn.net/sinat_16463137/article/details/61925606