HTML5实现好看的天气预报网站源码
文章目录
- 1.设计来源
- 1.1 获取天气接口
- 1.2 PC端页面设计
- 1.3 手机端页面设计
- 2.效果和源码
- 2.1 动态效果
- 2.2 源代码
- 源码下载
- 万套模板,程序开发,在线开发,在线沟通
作者: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
- 申请天气预报接口

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

- 申请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>
源码下载
HTML5实现好看的天气预报网站源码(源码) 点击下载

万套模板,程序开发,在线开发,在线沟通
- 专业后端大佬在线沟通需求开发
- 专业前端大佬在线沟通需求开发
- 专业网站整套大佬在线沟通需求开发
- 专业毕业设计大佬在线沟通需求开发
- 专业大作业大佬在线沟通需求开发
- 【优惠活动】专属定制,程序在线开发

💢 关注博主 带你实现畅游前后端
🏰 加入社区 带你体验马航不孤单
💯 神秘个人简介 带你体验不一样得介绍
💘 为爱表白 为你那个TA,体验别致的浪漫惊喜
🎀 酷炫邀请函 带你体验高大上得邀请
① 🉑提供云服务部署(有自己的阿里云);
② 🉑提供前端、后端、应用程序、H5、小程序、公众号、大作业等相关业务;
如🈶合作请联系我,期待您的联系。
注:本文撰写于CSDN平台,作者:xcLeigh(所有权归作者所有),https://blog.csdn.net/weixin_43151418,如果相关下载没有跳转,请查看这个地址,相关链接没有跳转,皆是抄袭本文,转载请备注本文原地址。
亲,码字不易,动动小手,欢迎 点赞 ➕ 收藏,如 🈶 问题请 留言(评论),博主看见后一定及时给您答复,💌💌💌
原文地址:https://blog.csdn.net/weixin_43151418/article/details/140498546(防止抄袭,原文地址不可删除)
相关文章:
HTML5实现好看的天气预报网站源码
文章目录 1.设计来源1.1 获取天气接口1.2 PC端页面设计1.3 手机端页面设计 2.效果和源码2.1 动态效果2.2 源代码 源码下载万套模板,程序开发,在线开发,在线沟通 作者:xcLeigh 文章地址:https://blog.csdn.net/weixin_4…...
比较(八)利用python绘制指示器
比较(八)利用python绘制指示器 指示器(Indicators)简介 指示器是一系列相关图的统称,主要用于突出展示某一变量的实际值与目标值的差异,例如常见的数据delta、仪表盘、子弹图、水滴图等。 快速绘制 基于p…...
【体外诊断】ARM/X86+FPGA嵌入式计算机在医疗CT机中的应用
体外诊断 信迈科技提供基于Intel平台、AMD平台、NXP平台的核心板、2.5寸主板、Mini-ITX主板、4寸主板、PICO-ITX主板,以及嵌入式准系统等计算机硬件。产品支持GAHDMI等独立双显,提供丰富串口、USB、GPIO、PCIe扩展接口等I/O接口,扩展性强&…...
力扣 28找到字符串中第一个匹配项的下标 KMP算法
思路: 朴素匹配有很多步骤是多余的 KMP算法能够避免重复匹配 KMP算法主要是根据子串生成的next数组作为回退的依据,它记录了模式串与主串(文本串)不匹配的时候,模式串应该从哪里开始重新匹配。 这里讲一下为什么用模式串的最大公共前后缀…...
JavaScript(10)——匿名函数
匿名函数 没有名字的函数,无法直接使用。 使用方式: 函数表达式立即执行函数 函数表达式 将匿名函数赋值给一个变量,并且通过变量名称进行调用 let fn function(){ 函数体 } 调用: fn() 立即执行函数 语法: (function () {…...
图片上传成功却无法显示:静态资源路径配置问题解析
1、故事的背景 最近,有个学弟做了一个简单的后台管理页面。于是他开始巴拉巴拉撘框架,写代码,一顿操作猛如虎,终于将一个简单的壳子搭建完毕。但是在实现功能:点击头像弹出上传图片进行头像替换的时候,卡壳…...
【转盘案例-弹框-修改Bug-完成 Objective-C语言】
一、我们来看示例程序啊 1.旋转完了以后,它会弹一个框,这个框,是啥, Alert 啊,AlertView 也行, AlertView,跟大家说过,是吧,演示过的啊,然后,我们就用iOS9来做了啊,完成了以后,我们要去弹一个框, // 弹框 UIAlertController *alertController = [UIAlertContr…...
Perl 基础语法
Perl 基础语法 Perl 是一种高级、解释型、动态编程语言,广泛用于CGI脚本、系统管理、网络编程、以及其他领域。Perl 以其强大的文本处理能力和简洁的语法而闻名。本文将详细介绍 Perl 的基础语法,帮助读者快速入门。 1. Perl 变量和数据类型 1.1 变量…...
【嵌入式开发之标准I/O】二进制文件的读写及实验
文本文件和二进制的区别 文本文件和二进制文件的区别主要在于它们的编码方式和数据组织方式。 编码方式:文本文件是基于字符编码的文件,常见的编码有ASCII编码、UNICODE编码等。这些编码将字符映射到特定的二进制值,使得字符可以…...
Arduino学习笔记1——IDE安装与起步
一、IDE安装 去浏览器直接搜索Arduino官网,点击Software栏进入下载界面,选择Windows操作系统: 新版IDE下载不需要提前勾选所下载的拓展包,下载好后直接点击安装即可。 安装好后打开Arduino IDE,会自动开始下载所需的…...
一个注解解决重复提交问题
一、前言 在应用系统中提交是一个极为常见的功能,倘若不加管控,极易由于用户的误操作或网络延迟致使同一请求被发送多次,从而生成重复的数据记录。针对用户的误操作,前端通常会实现按钮的 loading 状态,以阻…...
在qt的c++程序嵌入一个qml窗口
//拖拽一个QQuickWidget c端和qml通信的桥梁 找到qml的main.qml的路径 ui->quickWidget->setSource(QUrl::fromLocalFile("../../../code/main.qml"));// QML 与 Qt Widgets 通信//窗口就成了一个类实例对象pRoot (QObject*)ui->quickWidget->rootObje…...
Vue的依赖注入:组件树中的共享数据与功能
引言 在构建大型前端应用时,组件间的通信和状态共享是一个常见问题。Vue.js 提供了一种类似于 React 的 Context 机制的依赖注入系统,允许开发者在组件树中共享数据和功能。provide 和 inject 是 Vue 依赖注入的两个关键概念。本文将深入探讨 Vue 的依赖注入机制,讨论如何使…...
softmax 函数的多种实现方式 包括纯C语言、C++版本、Eigen版本等
softmax 函数的多种实现方式 包括纯C语言、C版本、Eigen版本等 flyfish 先看这里Softmax函数介绍 版本1 规矩的写法 #include <iostream> #include <vector> #include <algorithm> #include <numeric> #include <cmath>// 计算 softmax 的函…...
R语言学习笔记11-读取csv-xlsx-txt-json-pdf-lua格式文件
R语言学习笔记11-读取csv-xlsx-txt-json-pdf-lua格式文件 读取csv使用base的 read.csv 函数使用 readr 包的 read_csv 函数 读取xlsx使用 xlsx 包的 read.xlsx 函数使用 readxl 包的 read_excel 函数 读取txt使用base的文件读取函数 readLines使用 readr 包的 read_lines 函数 …...
Vue的计算属性和方法有什么区别
Vue中的计算属性(computed)和方法(methods)都是用于处理数据和逻辑的重要特性,但它们之间存在一些关键的区别。以下是两者的主要区别: 1. 缓存性 计算属性:计算属性是基于它们的依赖进行缓存的…...
学生成绩管理系统(C语言)
系统分析 1. 主菜单的实现 2. 增加人员功能的实现 3. 删除数据功能的实现 4. 编辑人员功能的实现 5. 排序功能的实现 6. 输出功能 7. 查找信息功能 具体代码 #include <stdio.h> #include <string.h> #include <stdlib.h> #define SIZE 100000typedef struc…...
C语言 通讯录管理 完整代码
这份代码,是我从网上找的。目前是能运行。我正在读。有些不懂的地方,等下再记录下来。 有些地方的命名,还需要重新写一下。 比如: PersonInfo* info &address_book->all_address[address_book->size]; 应该改为: Perso…...
2024北京国际智能工厂及自动化展览会亮点前瞻
随着“工业创新,智造未来”的浪潮席卷而来,2024年度北京国际智能工厂及自动化与工业装配展览会定于8月1日至3日在中国国际展览中心(顺义新馆)盛大开幕。本次展会汇聚了智能制造与自动化技术的最新成果,通过三展联动的创…...
《网络安全等级保护制度详解》
网络安全等级保护制度是我国网络安全领域的一项重要制度,旨在保障网络安全,维护国家安全、社会秩序和公共利益。 网络安全等级保护制度主要包含以下几个关键方面: 等级划分 根据信息系统在国家安全、经济建设、社会生活中的重要程度ÿ…...
微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来,Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...
云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地
借阿里云中企出海大会的东风,以**「云启出海,智联未来|打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办,现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...
基于服务器使用 apt 安装、配置 Nginx
🧾 一、查看可安装的 Nginx 版本 首先,你可以运行以下命令查看可用版本: apt-cache madison nginx-core输出示例: nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...
P3 QT项目----记事本(3.8)
3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...
解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错
出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上,所以报错,到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本,cu、torch、cp 的版本一定要对…...
Axios请求超时重发机制
Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式: 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...
EtherNet/IP转DeviceNet协议网关详解
一,设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络,本网关连接到EtherNet/IP总线中做为从站使用,连接到DeviceNet总线中做为从站使用。 在自动…...
MySQL中【正则表达式】用法
MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现(两者等价),用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例: 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...
Mysql中select查询语句的执行过程
目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析(Parser) 2.4、执行sql 1. 预处理(Preprocessor) 2. 查询优化器(Optimizer) 3. 执行器…...
【Go语言基础【13】】函数、闭包、方法
文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数(函数作为参数、返回值) 三、匿名函数与闭包1. 匿名函数(Lambda函…...
