![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：
Collection
Collection
1.前端代码m.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>月历生成器</title>
<style type="text/css">
.form {
width:400px;
background-color: lightgreen;
}
p{
text-align: center;
}
button {
width: 80px;
height: 26px;
border: none;
background-color: lightskyblue;
color:white;
margin: 0 10px 0 10px;
}
button:hover {
background-color: orange;
cursor: pointer;
}
</style>
</head>
<body>
<div class="form">
<fieldset>
<legend>月历生成器</legend>
<p>请输入年月：
<input type="text" name="year" size="2">
年
<input type="text" name="month" size="1">
月
</p>
<p><button>生成月历</button><button>重置</button></p>
</fieldset>
</div>
<script type="text/javascript" src="../jquery-3.3.1.js"></script>
<script type="text/javascript">
var flag = true //创建请求标志,初始允许发送请求
$('button').eq(0).on('click',function(){
//遍历并验证用户的输入的年和月的值
$('input:input').each(function(index,obj){
//非空判断
var invar=$(obj).val()
if (invar.length == 0) {
//在当前元素后添加提示信息
$('p').eq(0).after('<span style="color:red">年月不能为空</span>')
setTimeout(function(){
$('p').eq(0).next().remove()
$(obj).focus()
},2000)
return false
//非数字判断
} else if (isNaN(invar)) {
$('p').eq(0).after('<span style="color:red">年月必须是数字</span>')
setTimeout(function(){
$('p').eq(0).next().remove()
$(obj).focus()
},2000)
return false
//年份输入合理性判断
} else if (index==0 && (invar<1903 || invar>2037)) {
$('p').eq(0).after('<span style="color:red">输入的年超出范围</span>')
setTimeout(function(){
$('p').eq(0).next().remove()
$(obj).focus()
},2000)
return false
//月份输入合理性判断
} else if (index==1 && (invar<1 || invar>12)) {
$('p').eq(0).after('<span style="color:red">输入的月份超出范围</span>')
setTimeout(function(){
$('p').eq(0).next().remove()
$(obj).focus()
},2000)
return false
}
})
// 用ajax处理请求
if (flag == true) {
$.get(
//1.请求处理的脚本
'm-1.php',
//2.发送的请求参数
{
year: $('input:input').eq(0).val(),
month: $('input:input').eq(1).val()
},
//3.请求成功的回调函数
function(data){
//先将上一次生成的日历删除
$('.form').next().remove()
//生成新的日历
$('.form').after(data)
//将请求标志设置为false,禁止重复请求
flag = false
}
)
}
})
//重置按钮
$('button').eq(1).click(function(){
//将行与列数据全部清空，焦点回到第一个input控件
$('input:input').val('')
$('input:input').eq(0).focus()
//将上一次请求生成的日历删除
$('.form').next().remove()
//重置请求状态为true:允许发送请求
flag = true
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2.服务器端代码m-1.php
<?php
//判断请求是否合法,必须是GET请求
if ($_SERVER['REQUEST_METHOD'] == 'GET') {
$year = $_GET['year'];
$month = $_GET['month'];
//创建表格的基本架构,采用字符串拼接方式,最后统一生成
$table = '<table border="1" cellspacing="0" cellpadding="3" width="400">';
//日历标题
$table.= '<caption><h2>'.$year.'年'.$month.'月份</h2></caption>';
//生成星期栏
$aweek=array('日','一','二','三','四','五','六');
$table .= '<tr align="center" bgcolor="lightgreen">';
for ($i=0; $i<7; $i++) {
$table .= '<th>星期'.$aweek[$i].'</th>';
}
$table .= '</tr>';
$mweek=date('w',strtotime($year."-".$month."-1")); //本月1日星期几
$mday=date('t',strtotime($year."-".$month."-1")); //本月总天数
//计算日历主体部分的行数
if ((intval($mday)-7+intval($mweek))%7==0) {
$hh=floor((intval($mday)-7+intval($mweek))/7)+1;
} else{
$hh=floor((intval($mday)-7+intval($mweek))/7)+2;
}
//用双重循环来生成日历主体
for ($r=0; $r<$hh; $r++) {
$table .= '<tr>';
for($c=1; $c<=7; $c++) {
//设置单元格的数据,数据与单元格数量对应
$data=$r*7+$c-intval($mweek);
if ($data<=0 || $data>intval($mday)) {
$data="";
}
$table .= '<td align="center">'.$data.'</td>';
}
$table .= '</tr>';
}
$table .= '</table>';
//将生成的日历返回到客户端
echo $table;
exit(); //结束当前脚本,可以省略
} else {
exit('<span style="color:red">请求类型错误</span>');
}点击 "运行实例" 按钮查看在线实例
3.代码执行效果截图：
总结：
本次作业主要练习php的循环语句（for）和条件判断语句（if-else）,为要实现日历显示，学习了date（）、intval()等函数的用法，日期位置显示算法自己不满意，一定还可以优化。
