-
2018-12-27 10:43:44
如何在手机网页里引入天气预报代码, 把下面的代码粘贴到网页里, 就可以显示了
注意调整iframe高度为100%或者固定, 以便在底部增加你自己的内容
<iframe scrolling="no" src="https://tianqiapi.com/api.php?style=tw&skin=pitaya" frameborder="0" width="300" height="500" allowtransparency="true"></iframe>
效果图如下:
网站还提供更多精美样式的天气预报代码, 请访问网站 http://tianqiapi.com/ 查看更多
支持iframe、json、jsonp 方式调用, 欢迎体验!
更多相关内容 -
HTML5 天气预报应用
2021-06-09 08:29:13jQuery实现输入城市名称，通过yahoo的Weather API来获取当前城市的天气情况。页面展示效果：HTMLC 输入城市： CSShtml,body {background...展开全文jQuery实现输入城市名称，通过yahoo的Weather API来获取当前城市的天气情况。
页面展示效果：
HTML
C输入城市：
CSS
html,
body {
background-color: #F5F8FC;
height: 100%;
width: 100%;
overflow: hidden;
font-family: 'Open Sans', sans-serif;
}
.info p {
text-align: center;
margin: 10px auto 0px auto;
width: 540px;
color: #4c4c4c;
font-size: 16px;
font-weight: bold;
}
.wrapper {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
overflow: auto;
height: 500px;
}
.shadow {
-webkit-box-shadow: 0px 30px 100px 1px rgba(180, 180, 180, 1);
-moz-box-shadow: 0px 30px 100px 1px rgba(180, 180, 180, 1);
box-shadow: 0px 30px 100px 1px rgba(180, 180, 180, 1);
}
.top {
position: relative;
z-index: 0;
background-color: #61c3e6;
height: 300px;
overflow: hidden;
text-align: center;
display: inline-block;
width: 100%;
float: left;
}
.top .btn {
text-align: center;
line-height: 25px;
position: absolute;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 50%;
border: 1px solid white;
top: 5px;
left: 740px;
cursor: pointer;
text-transform: uppercase;
}
.top img {
position: relative;
z-index: -1;
margin-top: -10px;
margin-bottom: 10px;
width: 275px;
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
filter: invert(100%);
}
.top .deg {
font-weight: bold;
}
.top .text {
text-align: center;
color: white;
margin-bottom: 15px;
margin-top: -70px;
font-size: 25px;
}
.top .text-city{
text-align: center;
color: white;
margin-bottom: 10px;
font-size: 25px;
}
.top input {
position: relative;
z-index: 1;
font-family: 'Open Sans', sans-serif;
width: 210px;
background-color: rgba(0, 0, 0, 0);
border-top: 0px;
border-right:0px;
border-left:0px;
border-bottom:1px solid #F5F8FC;
outline: 0;
}
.top input:focus {
outline: 0;
border: 0px;
}
.bot {
float: left;
background-color: white;
height: 200px;
overflow: hidden;
display: inline-block;
width: 100%;
}
.bot ul {
overflow: hidden;
display: inline-block;
width: 100%;
height: 100%;
list-style-type: none;
padding-top: 30px;
}
.bot ul li {
color: #999999;
float: left;
width: 20%;
text-align: center;
}
.bot ul li:nth-child(1) {
color: #4c4c4c;
}
.bot ul li h1 {
text-transform: uppercase;
font-weight: bold;
}
.bot ul li p {
font-weight: bold;
}
.bot ul li img {
-webkit-filter: invert(60%);
-moz-filter: invert(60%);
filter: invert(60%);
}
.bot ul li:first-child img {
-webkit-filter: invert(30%);
-moz-filter: invert(30%);
filter: invert(30%);
}
javascript代码
var baseYahooURL = "https://query.yahooapis.com/v1/public/yql?q="
var selectedCity = "北京";
var placeholder = "";
var unit = "c";
$(function(){
init();
})
function init() {
getWoeid(selectedCity);
$('#city').keypress(function() {
if (event.which == 13) {
selectedCity = $('#city').val();
getWoeid(selectedCity);
$('#city').blur();
}
});
$('#btn').click(function() {
if ($('#btn').html() == "F") {
unit = "c";
} else unit = "f";
$('#btn').html(unit.toUpperCase());
getWoeid(selectedCity);
})
$('#city').focus(function(event) {
placeholder = $("#city").val();
$("#city").val("");
$('#city').css("border-bottom", "1px solid #F5F8FC");
});
$('#city').blur(function(event) {
if ($("#city").val() == "") {
$("#city").val(placeholder);
}
});
}
function getWoeid(city) {
var woeidYQL = 'select woeid from geo.placefinder where text="' + city + '"&format=json';
var jsonURL = baseYahooURL + woeidYQL;
$.getJSON(jsonURL, woeidDownloaded);
}
function woeidDownloaded(data) {
var woeid = null;
if (data.query.count <= 0) {
$('#city').val("No city found");
$('#deg').html("");
setImage(999, $("#big")[0]);
for (var i = 0; i <= 4; i++) {
$('#forecast' + i).html("");
setImage(999, $("#forecastimg" + i)[0]);
$('#forecastdeg' + i).html("");
}
return;
} else if (data.query.count == 1) {
woeid = data.query.results.Result.woeid;
} else {
woeid = data.query.results.Result[0].woeid;
}
getWeatherInfo(woeid);
}
function getWeatherInfo(woeid) {
var weatherYQL = 'select * from weather.forecast where woeid=' + woeid + ' and u = "' + unit + '" &format=json';
var jsonURL = baseYahooURL + weatherYQL
$.getJSON(jsonURL, weaterInfoDownloaded);
}
function weaterInfoDownloaded(data) {
$('#city').val(selectedCity);
//$('#city').val(data.query.results.channel.location.city);
$('#deg').html(data.query.results.channel.item.condition.temp + " °" + unit.toUpperCase());
setImage(data.query.results.channel.item.condition.code, $('#big')[0]);
for (var i = 0; i <= 4; i++) {
var fc = data.query.results.channel.item.forecast[i];
$('#forecast' + i).html(fc.day);
setImage(fc.code, $("#forecastimg" + i)[0]);
$('#forecastdeg' + i).html((parseInt(fc.low) + parseInt(fc.high)) / 2 + " °" + unit.toUpperCase());
}
}
function setImage(code, image) {
image.src = "http://www.hubwiz.com/course/55a60445a164dd0d75929fbd/";
switch (parseInt(code)) {
case 0:
image.src += "images/icons/Tornado.svg"
break;
case 1:
image.src += "images/icons/Cloud-Lightning.svg"
break;
case 2:
image.src += "images/icons/Wind.svg"
break;
case 3:
image.src += "images/icons/Cloud-Lightning.svg"
break;
case 4:
image.src += "images/icons/Cloud-Lightning.svg"
break;
case 5:
image.src += "images/icons/Cloud-Snow-Alt.svg"
break;
case 6:
image.src += "images/icons/Cloud-Rain-Alt.svg"
break;
case 7:
image.src += "images/icons/Cloud-Snow-Alt.svg"
break;
case 8:
image.src += "images/icons/Cloud-Drizzle-Alt.svg"
break;
case 9:
image.src += "images/icons/Cloud-Drizzle-Alt.svg"
break;
case 10:
image.src += "images/icons/Cloud-Drizzle-Alt.svg"
break;
case 11:
image.src += "images/icons/Cloud-Drizzle-Alt.svg"
break;
case 12:
image.src += "images/icons/Cloud-Drizzle-Alt.svg"
break;
case 13:
image.src += "images/icons/Cloud-Snow-Alt.svg"
break;
case 14:
image.src += "images/icons/Cloud-Snow-Alt.svg"
break;
case 15:
image.src += "images/icons/Cloud-Snow-Alt.svg"
break;
case 16:
image.src += "images/icons/Cloud-Snow-Alt.svg"
break;
case 17:
image.src += "images/icons/Cloud-Hail-Alt.svg"
break;
case 18:
image.src += "images/icons/Cloud-Hail-Alt.svg"
break;
case 19:
image.src += "images/icons/Cloud-Hail-Alt.svg"
break;
case 20:
image.src += "images/icons/Cloud-Fog.svg"
break;
case 21:
image.src += "images/icons/Cloud-Fog.svg"
break;
case 22:
image.src += "images/icons/Cloud-Fog.svg"
break;
case 23:
image.src += "images/icons/Cloud-Fog.svg"
break;
case 24:
image.src += "images/icons/Wind.svg"
break;
case 25:
image.src += "images/icons/Thermometer-Zero"
break;
case 26:
image.src += "images/icons/Cloud.svg"
break;
case 27:
image.src += "images/icons/Cloud-Moon.svg"
break;
case 28:
image.src += "images/icons/Cloud.svg"
break;
case 29:
image.src += "images/icons/Cloud-Moon.svg"
break;
case 30:
image.src += "images/icons/Cloud-Sun.svg"
break;
case 31:
image.src += "images/icons/Moon.svg"
break;
case 32:
image.src += "images/icons/Sun.svg"
break;
case 33:
image.src += "images/icons/Moon.svg"
break;
case 34:
image.src += "images/icons/Sun.svg"
break;
case 35:
image.src += "images/icons/Cloud-Hail-Alt.svg"
break;
case 36:
image.src += "images/icons/Sun.svg"
break;
case 37:
image.src += "images/icons/Cloud-Lightning.svg"
break;
case 38:
image.src += "images/icons/Cloud-Lightning.svg"
break;
case 39:
image.src += "images/icons/Cloud-Lightning.svg"
break;
case 40:
image.src += "images/icons/Cloud-Rain.svg"
break;
case 41:
image.src += "images/icons/Cloud-Snow-Alt.svg"
break;
case 42:
image.src += "images/icons/Cloud-Snow-Alt.svg"
break;
case 43:
image.src += "images/icons/Cloud-Snow-Alt.svg"
break;
case 44:
image.src += "images/icons/Cloud.svg"
break;
case 45:
image.src += "images/icons/Cloud-Lightning.svg"
break;
case 46:
image.src += "images/icons/Cloud-Snow-Alt.svg"
break;
case 47:
image.src += "images/icons/Cloud-Lightning.svg"
break;
case 3200:
image.src += "images/icons/Moon-New.svg"
break;
case 999:
image.src += "images/icons/Compass.svg"
break;
default:
image.src += "images/icons/Moon-New.svg"
break;
}
}
-
html5选择城市天气预报代码
2018-11-12 23:35:48使用html5和jq来写的天气预报，默认调用了第三方的api接口，可以实时的看到天气预报情况，各位老铁看着情况需要来下载 -
html5选择当地城市天气预报特效代码
2021-03-20 01:34:44html5选择当地城市天气预报代码是一款显示城市近5天天气情况，默认进入是根据所在地显示当前城市的天气情况。 -
html5仿手机天气预报app界面特效
2019-09-13 23:04:12html5仿手机天气预报app界面特效 -
HTML5 SVG天气预报图标动画效果
2019-12-12 20:58:05这是一款使用HTML5 SVG制作的天气预报图标动画效果。这组天气图标有下雨、晴天、阴天、大雾等，每一个图标都由SVG组成。 -
仿百度天气预报样式的echart静态html实例
2020-05-25 13:48:33仿百度天气预报样式的echart静态html实例，是一款仿百度天气预报的静态页面，用到了html、echart、query等技术。 -
天气预报_HTML静态页面_带时钟.zip
2020-06-19 15:32:33天气预报_HTML静态页面_带时钟。页面元素包括：自定义的标题，日期时间，温度，天气，地点，还有一个不停滚动读秒的时钟。 -
html5 svg天气预报图标特效
2021-06-24 13:14:31html5 svg天气预报图标特效是一款有下雨，晴天，阴天，大雾等，每一个图标都由SVG组成。 -
HTML5 Canvas和jQuery实时天气预报代码解析「附源码」
2021-06-09 08:28:17HTML5 Canvas和jQuery实时天气预报代码解析「附源码」这是一款非常有意思的纯CSS3扁平风格天气预报卡片动画特效。该天气预报特效将各种天气制作为卡片形式，包括下雨，闪电，白天，夜间和下雪。卡片使用扁平化风格，...展开全文
HTML5 Canvas和jQuery实时天气预报代码解析「附源码」
这是一款非常有意思的纯CSS3扁平风格天气预报卡片动画特效。该天气预报特效将各种天气制作为卡片形式，包括下雨，闪电，白天，夜间和下雪。卡片使用扁平化风格，并使用CSS3帧动画来制作各种动画效果。
制作方法
HTML结构
该特效的HTML结构采用无序列表的HTML结构，其中每一个li.card元素代表一种卡片。
-
63 ℉
low of 61 ℉
......
CSS样式
首先给卡片一些基本样式。
.card {
width: 18.57%;
background-color: #3c3b3d;
float: left;
margin: 0 20px 20px 0;
overflow: hidden;
}
.card:nth-child(5n) {
margin-right: 0;
}
.card .card-color {
position: relative;
width: 100%;
padding: 6.5em 1em;
display: block;
}
.card .card-color:after {
position: absolute;
content: '';
top: 0;
right: 0;
height: 100%;
width: 50%;
}
.card .card-info {
padding: 1em;
color: #808080;
text-align: center;
}
.card .card-info p {
font-size: 0.85rem;
margin-bottom: .75em;
}
.card .card-info p:first-child {
font-weight: 600;
font-size: 0.9rem;
text-transform: uppercase;
color: #fff;
}
.card .card-info p:last-child {
margin-bottom: 0;
}
对于第一种下雨效果，特效中对div.rain元素使用了rain帧动画。然后使用div.rain元素的:after伪元素来制作云彩的阴影效果，并应用rain_shadow帧动画。最后使用div.rain元素的:before伪元素来制作雨点效果，并应用rain_rain帧动画。
.rain {
animation: rain 9s ease-in-out infinite 1s;
-webkit-animation: rain 9s ease-in-out infinite 1s;
background: #CCCCCC;
border-radius: 50%;
box-shadow: #CCCCCC 65px -25px 0 -5px, #CCCCCC 25px -25px, #CCCCCC 5px 0px 0 2px, #CCCCCC 10px 0px 0 2px, #CCCCCC 15px 0px 0 2px, #CCCCCC 20px 0px 0 2px, #CCCCCC 25px 0px 0 2px, #CCCCCC 30px 0px 0 2px, #CCCCCC 35px 0px 0 2px, #CCCCCC 40px 0px 0 2px, #CCCCCC 45px 0px 0 2px, #CCCCCC 50px 0px 0 2px, #CCCCCC 55px 0px 0 2px, #CCCCCC 60px 0px 0 2px, #CCCCCC 65px 0px 0 2px, #CCCCCC 70px 0px 0 2px, #CCCCCC 75px 0px 0 2px;
display: block;
height: 50px;
width: 50px;
position: absolute;
left: 40px;
top: 80px;
}
.rain:after {
animation: rain_shadow 9s ease-in-out infinite 1s;
-webkit-animation: rain_shadow 9s ease-in-out infinite 1s;
background: #000000;
border-radius: 50%;
content: '';
height: 15px;
width: 120px;
opacity: 0.2;
position: absolute;
left: 5px;
bottom: -60px;
transform: scale(.7);
-webkit-transform: scale(.7);
}
.rain:before {
animation: rain_rain .7s infinite linear;
-webkit-animation: rain_rain .7s infinite linear;
content: '';
background: transparent;
margin-left: 0px;
border-radius: 50%;
display: block;
height: 6px;
width: 3px;
opacity: 0.3;
transform: scale(.9);
-webkit-transform: scale(.9);
}
代码下载：http://zzfriend.com/download/toutiao/tianqiyubao.rar
-
-
HTML5 SVG每周天气预报特效特效代码
2021-03-20 01:28:11HTML5 SVG每周天气预报特效是一款简单的动画SVG图形和滑动内容面板每周天气报告模板。 -
html5带日期的天气预报卡片ui设计代码
2019-11-06 22:43:15html5带日期的天气预报卡片ui设计代码 html5带日期的天气预报卡片ui设计代码 -
HTML5 SVG每周天气预报特效
2021-06-24 13:26:33HTML5 SVG每周天气预报特效是一款简单的动画SVG图形和滑动内容面板每周天气报告模板。 -
HTML5 SVG天气预报动画卡片 可模拟多种天气
2019-08-23 17:19:50之前我们介绍过一些关于天气预报的各种...今天我们要分享一款基于HTML5和SVG的天气预报动画卡片，我们可以点击卡片中的天气状况按钮，即可模拟对应的天气动画，动画模拟了下雨、下雪、雷阵雨、刮风、晴天这些动画特效。 -
HTML5 Canvas和jQuery实用实时天气预报App
2019-12-12 21:34:41weather-app是一款非常实用的HTML5 Canvas和jQuery实用实时天气预报App。你可以通过这个天气预报App来查询各个城市的天气，只需要在搜索框中输入英文的城市名称，就可以实时搜索该城市的天气情况。 -
CSS3 html5 动画版天气预报应用源码.rar
2019-07-10 10:50:27CSS3 html5 动画版天气预报应用源码，仿App Showcase特效，颜色和风格都不一样，一共有三个例子，都是带有动画效果的，看上去真心不错，代码要连接远程服务器，网络不好的时候，可能会比较慢哦。 -
html5 svg天气预报图标特效特效代码
2021-03-20 01:21:51html5 svg天气预报图标特效是一款有下雨，晴天，阴天，大雾等，每一个图标都由SVG组成。 -
html5天气预报卡片设计效果特效代码
2021-03-20 01:24:27这是一款基于HTML5 SVG和snap.svg的超酷天气预报卡片设计效果。该天气预报卡片可以以选项卡的方式来切换不同的天气，每种天气都以svg动画的方式来进行展示。 -
html5天气预报鼠标悬停动画展开天气预报特效
2019-11-24 21:55:28html5天气预报鼠标悬停动画展开天气预报特效 -
html5选择当地城市天气预报代码.zip
2019-07-04 21:21:01html5选择当地城市天气预报代码是一款显示城市近5天天气情况，默认进入是根据所在地显示当前城市的天气情况。 -
html5天气预报中国地图图表动画效果
2019-09-04 22:52:11html5天气预报中国地图图表动画效果 -
简易版天气预报（利用 html 和 js ） 2021-07-16
2021-07-16 10:18:11简易版天气预报（利用 html 和 js ） 利用html，js 和 vue 完成 天气预报 html 完成的页面代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title>...展开全文简易版天气预报（利用 html 和 js ）
利用html，js 和 vue 完成 天气预报
html 完成的页面代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <div id="top"> <input type="text" v-model="city" v-on:keyup.enter="seacherweather" id="inputtext" value="" /> <button type="button" v-on:click="seacherweather">查询</button> </div> <div id="but"> <ul> <li v-for="item in weatherlist"> <div id=""> {{item.date}}<br> {{item.type}}<br> {{item.low}}-{{item.high}}<br> {{item.fengli}}<br> {{item.fengxiang}} </div> </li> </ul> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js" type="text/javascript" charset="utf-8"></script> <script src="https://unpkg.com/axios/dist/axios.min.js" type="text/javascript" charset="utf-8"></script> <script src="./天知道.js" type="text/javascript" charset="utf-8"></script> </body> </html>利用 js 和 vue 完成的逻辑代码：
var app = new Vue({ el:"#app", data:{ city:"", weatherlist:[], }, methods:{ seacherweather:function(){ var that = this; axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city) .then(function(response){ console.log(response.data.data.forecast); that.weatherlist = response.data.data.forecast; }) } } })效果图片：
内容还有很多欠缺，还望大佬们指出不足之处，我必虚心接受！！！！
-
HTML5 SVG移动手机端天气预报动画.rar
2019-07-10 11:09:35HTML5 SVG移动手机端天气预报动画，这个天气预报效果包括了晴天、下雨、雪、雾、风等几种天气形式的动画效果，竖屏风格，更适合手机端使用。我觉得比现在手机上的天气预报界面更漂亮些。 -
HTML5 jquery仿Android手机方格子天气预报.rar
2019-07-10 12:08:28HTML5 jquery仿Android手机方格子天气预报，每一格显示一个地方的天气，单击后可展开显示每天的详细天气信息，展开的一瞬间有动画效果，基于HTML5技术袜，可运行于手机平板等移动设备上，一共有两个例子，大致的天气... -
html javascript 天气预报 （内附源代码）
2021-06-12 01:11:34【实例简介】仿照webQQ的天气样式做的一个天气预报，使用中国天气的数据源【实例截图】【核心代码】天气预报└── weatherWidget├── bg-main-mini.png├── btn-more-normal.png├── button-normal.png├──... -
HTML5 SVG天气图标动画特效
2021-07-24 23:54:12HTML5 SVG天气图标动画特效是一款12种基于svg制作常用的天气预报图标动画特效。 -
html5 svg动画天气预报图标特效
2020-06-12 00:37:59一款有下雨，晴天，阴天，大雾等，每一个图标都由SVG组成的html5 svg动画天气预报图标特效代码。 -
前端HTML页面获取实时天气预报并展示
2021-06-19 01:09:57前端HTML页面获取实时天气预报并展示昨天完成了一个实时显示天气预报的功能，今天在这完记录一下，纯前端layui和JQuery代码。没有后台交互获取用户打开页面的IP地址进行定位城市。试了很多方法都大同小异，我在这...
