效果图:
代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>日历操作</title> <script> window.onload = function(){ var cells = document.getElementById('monitor').getElementsByTagName('td'); var clen = cells.length; var currentFirstDate; var formatDate = function(date){ var year = date.getFullYear()+'年'; var month = (date.getMonth()+1)+'月'; var day = date.getDate()+'日'; var week = '('+['星期天','星期一','星期二','星期三','星期四','星期五','星期六'][date.getDay()]+')'; return year+month+day+' '+week; }; var addDate= function(date,n){ date.setDate(date.getDate()+n); return date; }; var setDate = function(date){ var week = date.getDay()-1; date = addDate(date,week*-1); currentFirstDate = new Date(date); for(var i = 0;i<clen;i++){ cells[i].innerHTML = formatDate(i==0 ? date : addDate(date,1)); } }; document.getElementById('last-week').onclick = function(){ setDate(addDate(currentFirstDate,-7)); }; document.getElementById('next-week').onclick = function(){ setDate(addDate(currentFirstDate,7)); }; setDate(new Date()); } </script> </head> <body> <button id="last-week">上一周</button><button id="next-week">下一周</button> <table id="monitor"> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </body> </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持找一找教程网!