用PHP制作简单日历并能查看当天的天气情况

最新推荐文章于 2021-03-25 06:09:29 发布

置顶小艺同学啦

最新推荐文章于 2021-03-25 06:09:29 发布

阅读量718

点赞数

分类专栏： PHP入门到放弃文章标签： php html

本文链接：https://blog.csdn.net/weixin_45861504/article/details/109131618

版权

PHP入门到放弃专栏收录该内容

16 篇文章 11 订阅

订阅专栏

使用到的工具有：

phpStudy集成环境
和风天气API
Layui框架

成品效果图

在这里插入图片描述

API接口：和风天气，这个自行注册账号创建使用，官方使用相关文档
在这里插入图片描述

PHP代码部分

<?php
	//判断GET请求的year_month是否有值
	if(isset($_GET['year_month'])){
		$month = $_GET['year_month'];
	}else{
		$month = date('Y-m');
	}
	//查看某月的天数
	$day = date('t',strtotime($month));
	
	/**
	 * 使用API获取当天的天气情况
	 * https://devapi.heweather.net/v7/weather/now?location=123456&key=123456
	 * 参数说明：
	 * 	location 指定某地编码
	 *	key API秘钥
	**/
	$api_url = "https://devapi.heweather.net/v7/weather/now?location=123456&key=123456";
	//初始化一个curl会话
	$conn = curl_init();
	curl_setopt($conn,CURLOPT_URL,$api_url);
	//https时使用
	curl_setopt($conn, CURLOPT_SSL_VERIFYPEER, false);
	//只获取页面内容，但不输出
	curl_setopt($conn, CURLOPT_RETURNTRANSFER, true);
	//在请求时自动加上请求头Accept-Encoding，并且返回内容自动解压，不会乱码
	curl_setopt($conn, CURLOPT_ENCODING,'');
	//获取返回内容
	$data = curl_exec($conn);
	//转换为json格式
	$result_json = json_decode($data, true);
	//获取天气
	$today_weather = $result_json['now']['text'];
?>
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
		<legend><?php echo $month."有".$day."天";?></legend>
		<div class="layui-inline">
			<label class="layui-form-label">年月选择器</label>
			<div class="layui-input-inline">
				<input type="text" class="layui-input" id="test3">
			</div>
		</div>
	</fieldset>
	<div class="layui-row">
		<div class="layui-col-md1">
			<div class="grid-demo grid-demo-bg1">星期日</div>
		</div>
		<div class="layui-col-md1">
			<div class="grid-demo grid-demo-bg1">星期一</div>
		</div>
		<div class="layui-col-md1">
			<div class="grid-demo grid-demo-bg1">星期二</div>
		</div>
		<div class="layui-col-md1">
			<div class="grid-demo grid-demo-bg1">星期三</div>
		</div>
		<div class="layui-col-md1">
			<div class="grid-demo grid-demo-bg1">星期四</div>
		</div>
		<div class="layui-col-md1">
			<div class="grid-demo grid-demo-bg1">星期五</div>
		</div>
		<div class="layui-col-md1">
			<div class="grid-demo grid-demo-bg1">星期六</div>
		</div>
	</div>
	<div class="layui-row">
		<?php
			for($i=1;$i<=$day;$i++){
				$year_month_day = $month."-".$i;
				//星期0-6
				$index = date("w",strtotime($year_month_day));
				//位移
				$offset = 0;
				//i第一次循环而且不是星期天，添加位移
				if($i==1 && $index!=0){
					$offset = "layui-col-md-offset".$index;
				}else if($index==0){
					echo "<div class='layui-clear'></div>";
				}
		?>
		<div class='layui-col-md1 <?php echo $offset ?>'>
			<div class='grid-demo grid-demo-bg1 grid-hover'>
				<?php echo $i;?>
				<?php if($i==date('j') && $month==date('Y-m')){
					echo "<span class='weather'>$today_weather</span>";
				} ?>
			</div>
		</div>
		<?php
			}
		?>
	</div>
</body>
<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	layui.use('laydate', function() {
		var laydate = layui.laydate;
		laydate.render({
			elem: '#test3',
			type: 'month',
			value: '<?php echo $month;?>',
			done: function(value){
				window.location.href = "?year_month="+value;
			}
		});
	})
</script>
</html>

CSS代码部分

.layui-row{
	text-align: center;
}
.grid-demo-bg1{
	background-color: #63BA79;
	height: 50px;
	line-height: 50px;
	margin: 0 5px 5px;
}
.grid-hover:hover{
	background-color: #009688;
	color: white;
	cursor: pointer;
}
.weather {
    font-size: 12px;
    width: 20px;
    height: 20px;
    display: block;
    position: absolute;
    z-index: 1;
    background-color: red;
    text-align: center;
    line-height: 20px;
    color: white;
    border-radius: 50%;
    right: 15px;
    top: 5px;
}

小艺同学啦

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
用PHP制作简单日历并能查看当天的天气情况

使用到的工具有：phpStudy集成环境和风天气APILayui框架成品效果图API接口：和风天气，这个自行注册账号创建使用，官方使用相关文档PHP代码部分<?php //判断GET请求的year_month是否有值 if(isset($_GET['year_month'])){ $month = $_GET['year_month']; }else{ $month = date('Y-m'); } //查看某月的天数 $day = date('t',st.
复制链接

扫一扫

专栏目录