JS实现天气预报查询

最新推荐文章于 2024-06-20 22:14:28 发布

黑色星期五

最新推荐文章于 2024-06-20 22:14:28 发布

阅读量7.6k

点赞数 14

分类专栏：前端文章标签： H5 JS 天气预报

本文链接：https://blog.csdn.net/weixin_43820738/article/details/85103774

版权

样品展示
在这里插入图片描述

HTML

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>全国天气查询小应用</title>
    <link rel="stylesheet" href="weather.css"/>
    <link rel="icon" href="favicon.ico"/>
	
</head>
<body>
<audio  autoplay loop="loop">
	<source src="mp3/海为气象园.mp3">
</audio>

<header>
    <h1><font face='cursive' color='white'><b>❄ 海为气象园 ❄</b></font></h1>
    <div id="weather_search">
        <span><input id="text" type="text" placeholder="请输入您要查询的城市" /></span>
        <span><input id="btn" type="button" value=" 查询天气" /></span>
    </div>
</header>
    <section>
	<font color='white'>
        <div id="today_container">
		
            <div>
                <img src="./images/weather_icon/1.png" alt="今日天气"/>
            </div><p><font size='30'color='white'><b>☀ ☁ ☂ ❄</b></font></p>
            <div>
                <div class="main_info"><span class="info">城市</span>|<span class="info">201X-XX-XX</span>|<span class="info">星期X</span>|<span class="info">---</span> </div>
                <div class="more_info">今日温度：<span class="info">-----</span>风力：<span class="info">-----</span>风向：<span class="info">-----</span>PM2.5：<span class="info">--</span></div>
            </div>
        </div>
        <div id="future_container">
            <div class="future_box">
                <img src="./images/weather_icon/1.png" alt=&#

最低0.47元/天解锁文章

黑色星期五

关注

14
点赞
踩
58

收藏

觉得还不错? 一键收藏
6
评论
JS实现天气预报查询

样品展示HTML&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;全国天气查询小应用&lt;/title&gt; &lt;link rel="stylesheet" h
复制链接

扫一扫