效果图:
点击左右边的箭头,实现上一月或者下一月的切换。
jsp内容
<!--时间月份选择框--> <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>
说明:
1)、箭头图片可以自行从网上下载
js内容
//月份加减处理 function addMonth() { var s = document.getElementById("beginTime").innerHTML; var arr = s.split("-"); var year = parseInt(arr[0]); var month = parseInt(arr[1]); //判断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); //判断month if (month == 1) { year = year - 1; month = 12; } else { month = month - 1; } document.getElementById("beginTime").innerHTML = year + "-" + month; initTable(year, month-1); }
----------
参考文章
https://blog.csdn.net/sinat_16463137/article/details/61925606