devbox
小桥流水78
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HTML5实现好看的天气预报网站源码_天气预报html网站

作者：小桥流水78 | 2024-07-31 02:21:58

赞

踩

天气预报html网站

文章目录

作者：xcLeigh
文章地址：https://blog.csdn.net/weixin_43151418/article/details/140498546

HTML5实现好看的天气预报网站源码 HTML5实现好看的天气预报网站源码，天气预报大作业，网站源码，天气预报网站，免费的数据接口，数据API，童话故事API，笑话API，名言API，提供免费天气预报接口，各种新闻资讯类、生活服务类、趣味娱乐类、功能应用类、知识问答类、数据智能类等API接口数据提供。兼容手机端和PC网页端。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。

1.设计来源

1.1 获取天气接口

    这里使用的是 天聚数形 数据接口，里面有很多免费的数据接口，有新闻资讯类、生活服务类、趣味娱乐类、功能应用类、知识问答类、数据智能类等API接口数据提供。这里用到的是天气预报，首先注册一个账号，然后申请天气预报接口，获取提供的KEY，下面接口需要这个KEY。

点击进入申请接口链接

申请链接：https://www.tianapi.com/console/
在线测试天气接口：https://www.tianapi.com/gethttp/72-1

  • 1
  • 2
  • 申请天气预报接口

在这里插入图片描述

  • 平台提供的各种数据接口

在这里插入图片描述

  • 申请KEY后提供的数据接口API

在这里插入图片描述

1.2 PC端页面设计

  • 北京天气

在这里插入图片描述

  • 上海天气

在这里插入图片描述

  • 广州天气

在这里插入图片描述

  • 深圳天气

在这里插入图片描述

  • 三亚天气

在这里插入图片描述

1.3 手机端页面设计

    手机端页面设计，主页面效果如图，右上角有城市导航菜单，可以切换自定义城市的天气，每个城市对应一个自定义的背景图，可以自己选择背景图，灵活可变的。

在这里插入图片描述

    最近七日天气可以横向滚动的。

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

2.效果和源码

2.1 动态效果

    这里是完整的效果演示，可在此代码基础上更加完善功能，支持扩展自己的风格，可以删减内容，打造属于自己的天气预报网站。

HTML5实现好看的天气预报网站源码

2.2 源代码

    这里是主界面的代码，其他图片、js、css等代码，见下面的 源码下载 ，里面有所有代码资源和相关说明。

<!DOCTYPE html>
<html lang="en">
<head>
	<title>天气预报</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="UTF-8">
	<meta name="keywords" content="天气预报" />
	<link rel="stylesheet" href="css/owl.carousel.css" type="text/css" media="all">
	<link href="css/owl.theme.css" rel="stylesheet">
	<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="css/bootstrap.css">
	<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
	<link rel="stylesheet" href="css/font-awesome.css"> 
</head>

<body>

<div id="tbbg" class="header" style="background-image: url('images/bg1.png'); background-position: top; background-size: cover;">
	<nav class="navbar navbar-default">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
				<span class="sr-only">切换导航</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<h1 style="font-size: 20px; line-height: 50px; color: white; margin-left: 20px;">
				<i class="fa fa-map-marker"></i>
				<span id="tqname"></span>
			</h1>
		</div>
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav navbar-right">
				<li><a class="hvr-underline-from-center active" href="javascript:void(0)" onclick="getData('北京');">北京天气</a></li>
				<li><a href="javascript:void(0)" onclick="getData('上海');" class="hvr-underline-from-center">上海天气</a></li>
				<li><a href="javascript:void(0)" onclick="getData('广州');" class="hvr-underline-from-center">广州天气</a></li>
				<li><a href="javascript:void(0)" onclick="getData('深圳');" class="hvr-underline-from-center">深圳天气</a></li>
				<li><a href="javascript:void(0)" onclick="getData('三亚');" class="hvr-underline-from-center">三亚天气</a>
			</ul>
		</div>
		<div class="clearfix"> </div>	
	</nav>
</div>
<section class="about" id="about" style="background-image: url('images/bg1.png'); background-size: 100% 100%;">
	<div class="container">
		<div style="font-size: 40px; font-family: 华文中宋; color:#EAADD3;padding: 10px;">
			<img id="tqimg" src="images/晴.png" />晴<br/>
			<b id="dataWd">40</b><br/>
		</div>
		<div style="margin-top: 20px; padding:10px; text-indent: 20px;">
			<b style="color: blueviolet;">温馨提示：</b><span id="dataTips" style="font-size: 12px; color: white;"></span>
		</div>
		<div id="tqyb" style="background-color: white; border-radius: 20px; padding:20px; margin-top: 50px; margin-bottom: 10px;">
			<table style="width:100%;text-align: center;border-collapse: collapse;">
				<tr>
					<td>
						数据加载中……
					</td>
				</tr>
			</table>
		</div>
		<div style="background-color: white; border-radius: 20px; padding:20px; margin-bottom: 140px;">
			<b>最近七天天气</b>
			<hr/>
			<div style="width: 100%;  overflow-x: auto; ">
				<div id="tqyb2" style="display: flex; width: 760px;">
				</div>
			</div>
		</div>
		<div class="clearfix"></div>
	</div>
</section>
	<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.js"></script>
	<script defer src="js/jquery.flexslider.js"></script>
	<script type="text/javascript" src="js/move-top.js"></script>
	<script type="text/javascript" src="js/easing.js"></script>
	<script src="js/responsiveslides.min.js"></script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80

源码下载

HTML5实现好看的天气预报网站源码（源码） 点击下载
在这里插入图片描述

万套模板，程序开发，在线开发，在线沟通

--------------- 业精于勤，荒于嬉 ---------------
 

请添加图片描述

--------------- 行成于思，毁于随 ---------------

    

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小桥流水78/article/detail/906551
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。