运行效果
实现代码
<html>
<head>
<script>
window.onload = function(){
//寻找某个月有多少天
var findDays = function(month){
if(month == 0 || month == 2 || month == 4 || month == 6 || month == 7 || month == 9 || month == 11){
var days = 31;
}
else if(month == 1){
days = (year%4==0?29:28);
}
else{
days = 30;
}
return days;
}
//更新日历
var flushDays = function(days,seven){
for(i=7;i<seven+7;i++){
tds[i].innerHTML= '';
}
for(i=1;i<days+1;i++){
tds[seven+i+6].innerHTML= i;
}
for(i=days+seven+7;i<49;i++){
tds[i].innerHTML= '';
}
}
//刷新月份
var flushTime = function(month){
if(month+1 < 10){
yearMonth.innerHTML = year + " 年 0" + (month+1) + " 月";
}
else{
yearMonth.innerHTML = year + " 年 " + (month+1) + " 月";
}
}
//找到本月一号
var Today = new Date();
var nowTime = Today.getTime() - (Today.getDate()-1)*1000*60*60*24;
Today = new Date(nowTime);
//某个月一号那天的属性
var year = Today.getFullYear();
var month = Today.getMonth();
var seven = Today.getDay();
var days = findDays(month);
//获取表格并更新
var tds = document.getElementsByTagName("td");
flushDays(days,seven);
var yearMonth = document.getElementById("yearMonth");
//按键动态绑定
var buttons = document.getElementsByClassName("timeclick");
buttons[0].onclick = function(){
if(month==0){
year -= 1;
}
month = (month==0?11:month-1);
flushTime(month);
days = findDays(month);
nowTime = Today.getTime() - (Today.getDate()-1)*1000*60*60*24 - (days*1000*60*60*24);
Today = new Date(nowTime);
seven = Today.getDay();
flushDays(days,seven);
}
buttons[1].onclick = function(){
if(month==11){
year += 1;
}
month = (month+1)%12;
flushTime(month);
var nextMonth = findDays(month);
nowTime = Today.getTime() - (Today.getDate()-1)*1000*60*60*24 + (days*1000*60*60*24);
Today = new Date(nowTime);
seven = Today.getDay();
flushDays(nextMonth,seven);
days = nextMonth;
}
}
</script>
<style>
#frame{
width:400px;
}
.buttons{
float:right;
margin-left:3px;
}
.outline{
padding:2px;
height:482px;
margin-top:6px;
outline:1px black solid;
}
.row{
padding:5px;
border:1px rgba(0, 0, 0, 0.329) dashed;
height:20px;
line-height:20px;
}
.jianli{
height:66px;
}
.name{
margin:0 0 0 3px;
float:left;
width:120px;
}
.input,textarea{
padding-left:10px;
float:left;
}
textarea{
width:250px;
height:70px;
}
.dizhi{
width:250px;
}
.date{
height:200px;
}
#time{
margin-left: 10px;
background-color: rgba(192, 192, 192, 0.952);
display:inline;
}
.timeclick{
background-color: rgb(192,192,192);
width:30px;
border: none;
}
table{
margin-left:134px;
width:170px;
outline: 1px rgb(192,192,192) solid;
}
.tiaozheng{
margin-top:4px;
margin-left:10px;
}
tr{
text-align:center;
}
</style>
</head>
<body>
<div id='frame'>
学生基本信息
<input type='button' value='取消' class='buttons'>
<input type='button' value='添加' class='buttons'>
<div class='outline'>
<div class='row'>
<div class='name'>学号:</div>
<div class='input'><input type='text'></div>
</div>
<div class='row'>
<div class='name'>姓名:</div>
<div class='input'><input type='text'></div>
</div>
<div class='row'>
<div class='name'>专业:</div>
<div class='input'>
<select>
<option>信息管理与信息系统</option>
<option>电子商务</option>
<option>人力资源</option>
<option>物流管理</option>
</select>
</div>
</div>
<div class='row'>
<div class='name'>性别:</div>
<input type='radio' name='sex' value='男' class='tiaozheng'>男
<input type='radio' name='sex' value='女' class='tiaozheng'>女
</div>
<div class='row date'>
<div class='name'>出生日期:</div>
<div>
<div>
<div id='time'>
<input type='button' value='〈' class='timeclick'>
<span id='yearMonth'>2021 年 10 月</span>
<input type='button' value='〉' class='timeclick'>
</div>
<table>
<tr>
<td>日</td>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
<td>六</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
<div class='row'>
<div class='name'>爱好:</div>
<input type='checkbox' name='hobby' value='音乐' class='tiaozheng'>音乐
<input type='checkbox' name='hobby' value='体育' class='tiaozheng'>体育
<input type='checkbox' name='hobby' value='美术' class='tiaozheng'>美术
<input type='checkbox' name='hobby' value='旅游' class='tiaozheng'>旅游
</div>
<div class='row'>
<div class='name'>家庭地址:</div>
<div class='input'><input type='text' class='dizhi'></div>
</div>
<div class='row jianli'>
<div class='name'>简历:</div>
<div class='input'>
<textarea>
</textarea>
</div>
</div>
</div>
</div>
</body>
</html>