您现在的位置是: 首页 > 天气图表 天气图表
北京天气预报代码_北京天气预报符号
tamoadmin 2024-10-01 人已围观
简介1.求网站中加入天气预报的代码2.炎炎夏日去哪玩,自制天气预报帮你选!3.北京天气预报查询4.flash天气预报代码为了方便,文本框改成数组控件。代码中用北京作为天气预报地点,改的话将网址改下即可,具体方法可以百度。另外,新浪天气预报只有4天。最后说明一下,除了标签和文本框,没用其它控件。求网站中加入天气预报的代码试试我的过滤模块,不过我已经帮你调试好了,可以直接使用<%getContent
1.求网站中加入天气预报的代码
2.炎炎夏日去哪玩,自制天气预报帮你选!
3.北京天气预报查询
4.flash天气预报代码
为了方便,文本框改成数组控件。代码中用北京作为天气预报地点,改的话将网址改下即可,具体方法可以百度。另外,新浪天气预报只有4天。最后说明一下,除了标签和文本框,没用其它控件。
求网站中加入天气预报的代码
试试我的过滤模块,不过我已经帮你调试好了,可以直接使用
<%
getContent=GetURL("://news.sina.cn/iframe/weather/130101.html")
Function GetURL(url)
Set Retrieval = Server.CreateObject("Microsoft.XMLHTTP")
With Retrieval
.Open "GET", url, false
.setRequestHeader "Content-Type","lication/x--form-urlencoded"
.Send
GetURL = .ResponseBody
End With
Set Retrieval = Nothing
GetURL=bstr(GetURL)
End Function
Function bstr(vIn)
Dim strReturn,i,ThisCharCode,innerCode,Hight8,Low8,NextCharCode
strReturn = ""
For i = 1 To LenB(vIn)
ThisCharCode = AscB(MidB(vIn,i,1))
If ThisCharCode < &H80 Then
strReturn = strReturn & Chr(ThisCharCode)
Else
NextCharCode = AscB(MidB(vIn,i+1,1))
strReturn = strReturn & Chr(CLng(ThisCharCode) * &H100 + CInt(NextCharCode))
i = i + 1
End If
Next
bstr = strReturn
End Function
Function FilterHTML(strToFilter)
Dim strTemp
strTemp = strToFilter
strTemp=replace(strTemp,"石家庄","")
strTemp=replace(strTemp,"更多城市","")
strTemp=replace(strTemp,"& gt;& gt;","")
strTemp=replace(strTemp,"[定制其他城市天气]","")
FilterHTML = strTemp
End Function
%>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#D4D0C8">
<tr>
<td><%response.Write FilterHTML(getContent)%></td>
</tr>
</table>
炎炎夏日去哪玩,自制天气预报帮你选!
下面这段是它的源文件
<html>
<head>
<meta -equiv="Content-Type" content="text/html; charset=GBK" />
<title>07越秀</title>
<link href="../css/ddg.css" rel="stylesheet" type="text/css">
</head>
<body style="background-color:transparent">
<table width="100%" height="80" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="15"><img src="images/spacer.gif" width="1" height="8" /></td>
</tr>
<tr>
<td width="60" align="center" valign="top"><!--5-12修改6开始--><img src="://weather.news.163/weather/images/logo/01.gif" alt="" /><img src="://weather.news.163/weather/images/logo/03.gif" alt="" /><!--5-12修改6结束--></td>
<td align="left" valign="top"><font id="dateFont">2007年1月16日<br />
星期二 下午17:02<br />
</font>
<script>
var day = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
function showDate()
{
font = document.getElementById("dateFont");
var now = new Date();
var str = "";
var hours = now.getHours() + "";
if(hours.length < 2)
{
hours = "0" + hours;
}
var minutes = now.getMinutes() + "";
if(minutes.length < 2)
{
minutes = "0" + minutes;
}
var seconds = now.getSeconds() + "";
if(seconds.length < 2)
{
seconds = "0" + seconds;
}
str += "<font style=\"color:#000000;\"><b>" + now.getFullYear() + "年" + (now.getMonth() + 1) + "月" + now.getDate() + "日</b></font><br><font style=\"color:#EB7002;\">" + day[now.getDay()] + " " + hours + ":" + minutes + ":" + seconds + "</font><br>";
font.innerHTML = str;
}
setInterval("showDate()" , 1000);
</script>
<font style="color:#EB7002;">
多云转阵雨 ? 25℃~34℃
</font></td>
</tr>
<tr>
<td height="8"><img src="images/spacer.gif" width="1" height="8" /></td>
</tr>
</table>
</body>
</html>
再给你推荐一个根据不同IP显示不同地区的代码:
<iframe src="://.ttyyy/tianqi/tq.html" width="160" height="60" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
都试试吧
北京天气预报查询
炎炎夏日来临,也伴随着暑的来临,疫情过去,有没有想好去哪里玩耍呢?哪里的天气最好?气温最舒适?作为程序员的咱们,不如自己开发一个天气预报,带你实时关注天气情况,一路开启凉爽绿灯,度过一个愉快的夏季。
源码地址:s://gitee/wei_rong_xin/weather-forecast.git
pc访问地址:://122.112.181.245/
一、简介本文通过获取实时天气数据,动态的展示到PC端的页面上,根据天气温度的不同,展示与温度相对应的颜色,夏季最凉爽的温度应该是趋于绿色的区域。
目前温度信息覆盖真个中国领土,但是由于时间有限,整体实现难度不大,针对各个省份目前只做了省会城市的温度展示,同时使用省会城市的温度代替了省份的温度,对于细化到各个城市和区域的展示,后续有时间再添加,本文主要是实现方案的介绍。
目前给出了最凉爽和最炎热的top3城市,提供直观的体验:
在每个城市的省会点位上,会提供4天内的天气、风力、温度等信息。
二、天气数据来源天气数据是实现天气预报的基本元素。本文用高德开放品台提供的天气接口。接入方式如下所示:
2.1 注册高德开放平台,成为开发者。跟着平台步骤走就好,很简单
2.2 创建应用创建应用,获取自己的key
选择新建,输入名称,选择类型即可:
拿到这个key之后,就可以获取很多我们想要的数据,例如:
需要注意的是,这些接口都是每日有次数限制的,每秒的并发数同样有限制。
2.3 接口调用如下点击设置:
点击你想用的接口,我们这里选择天气api,接口进入接口文档:
到此得到了接口地址,拼接上我们的key,加上你需要的参数即可开始调用了。
如下获取4天内北京市天气接口接口(记得key换成自己的): s://restapi.amap/v3/weather/weatherInfo?key=xxxxxxxxxxxxxx&output=json&extensions=all&city=110000
2.4 城市编码在上一步的关键是获取城市的编码,才能通过接口查询具体城市的信息,高德给我们提供了一个完整的国内excel:
下载地址
到此为止,就能愉快的获取数据了。
三、 实现方案项目用springboot + vue3 + echarts + redis实现。本章节主要说说redis和echarts地图相关的内容。
3.1 redis存储数据因为我们的数据全部来自于高德天气api,所以此处不做数据持久化了,直接使用redis做一个中转存储。
之所以需要使用redis是因为前面所提到的,天气接口每天是有使用次数的,如果访问量大的话,可能不到一天我们的使用额度就消耗光了。
使用redis很简单,首次查询api接口,并存储到缓存当中,需要设置缓存时间,这个根据实际的额度和使用量去设置合适的时长就好。这样第二次查询相同城市,就是差的redis,不会消耗额度,只有缓存过期后,再次去查api接口,并缓存。
例如我们在做微信公众号开发,使用微信平台的token也是同样的道理。
建议缓存超时时间随机成不同时间,防止缓存雪崩,虽然api接口不是咱们自己的。
3.1.1 redis 缓存城市编码我这里写了个方法读取到的提供的城市编码excel,并存储到redis当中,redis使用set数据类型存储,大概3500多条数据,记得使用pipeline的形式调用set存储,否则你会发现,redis居然也这么慢?
下面简单列举部分源码:
使用阿里easyExcel导入excel
/** * @description: 天气服务实现 * @author:wjbgn * @date:2022/5/20 16:30 * @version:3.0 */@Slf4j@Servicepublic class WeatherServiceImpl implements IWeatherService {private final static String FILENAME = "src/main/resources/xlxs/AMap_adcode_citycode_20210406.xlsx";private Set<Map<String, String>> set = new HashSet<>();@Autowiredprivate RedisUtil redisUtil;/** * description: easyexcel * * @author: wjbgn * @time: 2022/5/25 15:48 */public class ExcelListener extends AnalysisEventListener<CityData> {/** * description: 读取每行的数据 * * @param data * @param analysisContext * @return: void * @author: wjbgn * @time: 2022/5/20 16:46 */@Overridepublic void invoke(CityData data, AnalysisContext analysisContext) {// 设置Map<String, String> map = new HashMap<>(4);map.put("name", data.getName());map.put("code", data.getAdcode());set.add(map);}/** * description: 读取表头 * * @param headMap * @param context * @return: void * @author: wjbgn * @time: 2022/5/20 16:46 */@Overridepublic void invokeHeadMap(Map<Integer, String> headMap, AnalysisContext context) {System.out.println("表头:" + headMap);log.info("表头:{}", JSON.toJSONString(headMap));}/** * description: 读取完毕收尾操作 * * @param analysisContext * @return: void * @author: wjbgn * @time: 2022/5/20 16:46 */@Overridepublic void doAfterAllAnalysed(AnalysisContext analysisContext) {Set<Object> city_code = redisUtil.getSet("city_code");if (null == city_code || city_code.size() == 0) {// TODO 此处比较慢,可优化为使用pipeline的形式redisUtil.setSetPipeline("city_info", set);} else {log.info("已存在,不能再次导入");}}}@Overridepublic void importCityCode() {EasyExcel.read(FILENAME, CityData.class, new ExcelListener()).sheet().doRead();}}RedisTemlate使用pipeline
/** * 缓存Set,使用pipeline * * @param key 缓存键值 * @param dataSet 缓存的数据 * @return 缓存数据的对象 */public void setSetPipeline(String key, Set<Map<String, String>> dataSet) {RedisSerializer keySerializer = redisTemplate.getKeySerializer();RedisSerializer valueSerializer = redisTemplate.getValueSerializer();this.redisTemplate.executePipelined((RedisCallback<Object>) connection -> {connection.openPipeline();connection.set(keySerializer.serialize(key), valueSerializer.serialize(dataSet));return null;});}3.1.2 redis 缓存城市天气此处就是前面提到过得使用redis做一层缓存,没有则调用api,部分代码如下所示:
根据城市编码获取城市天气
public String getCityWeather(String cityCode) {String result = null;String object = redisUtil.getString("city_weather:" + cityCode);if (ObjectUtil.isEmpty(object)) {result = HttpUtil.createGet(url + cityCode).execute().body();redisUtil.setObjectExpire("city_weather:" + cityCode, result, Duration.ofHours(1L));log.info(result);} else {result = object;}return result;}3.2 Echarts展示地图3.2.1 初始化地图通过使用Echarts这个工具,让我们在绘制地图等图表内容时,效率得到极大的提升,我们只需要获取到需要绘制的地图的json信息,即可立即完成绘制。
此处我们使用阿里提供的数据可视化平台提供的能力,下载中国地图json数据。
下载完成后,放到项目中即可,通过如下方式引用,伪代码:
import chinaJSON from '../assets/china.json'var myChart = echarts.init(chinaMap.value)echarts.registerMap('china', chinaJSON) //注册可用的地图全部代码请参考源码。
3.2.2 初始化数据首次访问页面,需要获取地图全部的天气信息,首先会在加载时调用查询天气接口,此处获取全部省会城市的接口,需要拿到我们缓存到redis当中的set,然后根据省会城市去获取其天气信息。
在excel给出的内容实际是没有标注省会的,但是仔细观察发现规律:省会是省编码 + 100,至此我们可以完整的获取到所有省会的天气情况了。
将后台返回的数组组装到前台定义的regions数组当中:
let data = {name: res[i].name,itemStyle: {areaColor: level[j].color,opacity: 1,},}regions.push(data);如上主要指定了名称、颜色,从而实现不同区域下,根据不同温度,展示不同颜色的需求。
3.2.3 展示省会详细信息当鼠标浮动到省会的标点上,会给出4天内的天气信息,此处需要指定一个tooltip,并在其中拼接内容,如下所示:
tooltip: {trigger: 'item',backgroundColor: 'rgba(50,50,50,0.7)',borderColor: '#333',textStyle: {color: '#fff',fontSize: 12},formatter: (item) => {let html = `${item.name}`let weather = (item.data.value)[3];for (let i = 0; i < weather.length; i++) {html += `<p style="font-size:12px; "> ${weather[i].date} <span style="color: limegreen ">${weather[i].dayweather} ${weather[i].daywind}风 ${weather[i].daypower}级</span></p>`html += `<p style="font-size:12px">温度: <span style="color: limegreen ">${weather[i].nighttemp}℃ ~ ${weather[i].daytemp}℃</span> </p>`}return html}}问题: 此处遇到一个问题,原本我是想要在此处嗲用后台接口查询当前城市数据,但是返回后,发现无法拼接到html当中,无论如何都获取不到,最终只能在初始化时,将每个城市的数据提前准备好,直接在item当中获取。知道的朋友们可以指点我一下,这是为什么?!!
四、总结到此为止,一个属于自己的天气预报就完成了。目前城市甚至城区的天气预报粒度还有待细化。本文主要给大家提供一个实现天气预报的思路和方案,同时也是我个人的一次尝试,还是有一些收获的。总体来说代码较简单,适合朋友们上手把玩。
炎炎夏日,是否在这个天气预报上找到属于你们的清凉了呢?
原文:s://juejin.cn/post/7101589317293703175flash天气预报代码
站点基本信息城市: 北京
区号: 010 邮编: 100000
最后更新时间: 2009年07月11日08时
城市天气预报 11日白天11日夜晚 中雨雷阵雨 高温30℃低温22℃ 12日白天12日夜晚 多云阴 高温33℃低温23℃ 13日白天13日夜晚 雷阵雨阵雨 高温31℃低温22℃ 最新实况(2009-07-11 11:00)
天气: 轻雾
气温: 29 ℃
风 : 西南风,1级,1米/秒
气压: 1003.4hPa
://.nmc.gov.cn/search_result.php?keys=54511&x=29&y=12
天气预报FLASH代码1-浅色款://aw.awflasher/getweather.swf"</A> width="190" height="200" type="lication/x-shockwe-flash"></embed>