原生JS实现天气预报(和风天气api + 本地存储)

最新推荐文章于 2024-06-13 10:51:27 发布

weixin_46310510

最新推荐文章于 2024-06-13 10:51:27 发布

阅读量3.1k

点赞数 1

文章标签： javascript css html

本文链接：https://blog.csdn.net/weixin_46310510/article/details/106732144

版权

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

HTML代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="tianqi.css">
    <link rel="stylesheet" href="iconfont/iconfont.css">
</head>
<body>
        <!--    搜索    -->
    <div class="search">
        <span>Tq</span>
        <form target="sou" id="search_from">
        <input type="search" placeholder="输入搜索的城市">
        <iframe name="sou" style = "display: none"></iframe>
        </form>
        <div class="search-btn"><img src="images/search.png" alt=""></div>
    </div>
        <!--    历史记录-->
    <div class="history">
        <div class="la">
            <span>历史查询</span>
            <img src="images/more.png" alt="">
        </div>
        <div class="historys">
        <!--    历史记录        -->
        </div>
        <div class="clearbtn">
            清除历史记录
        </div>
    </div>
        <!--    今日天气    -->
    <div class="information">

    </div>
        <!--    天气预报    -->
    <div class="forecast">

    </div>
        <!--    生活指数    -->
    <div class="lifestyle">
            <h2>生活指数</h2>
            <div class="lifestyle-box">
                <div class="lifestyle-item" data-indexs="0">
                    <i class="iconfont icon-shushidu"></i>
                    <span>舒适度指数</span>
                </div>
                <div class="lifestyle-item" data-indexs="1">
                    <i class="iconfont icon-3chuanyixiguan"></i>
                    <span>穿衣指数</span>
                </div>
                <div class="lifestyle-item" data-indexs="2">
                    <i class="iconfont icon-ganmaoyaowu"></i>
                    <span>感冒指数</span>
                </div>
                <div class="lifestyle-item" data-indexs="3">
                    <i class="iconfont icon-yundong"></i>
                    <span>运动指数</span>
                </div>
                <div class="lifestyle-item" data-indexs="4">
                    <i class="iconfont icon-lvyou"></i>
                    <span>旅游指数</span>
                </div>
                <div class="lifestyle-item" data-indexs="5">
                    <i class="iconfont icon-iconset0451"></i>
                    <span>紫外线指数</span>
                </div>
                <div class="lifestyle-item" data-indexs="6">
                    <i class="iconfont icon-xiche"></i>
                    <span>洗车指数</span>
                </div>
                <div class="lifestyle-item" data-indexs="7">
                    <i class="iconfont icon-kongqiwuranfenxi"></i>
                    <span>空气污染扩散条件指数</span>
                </div>
            </div>
        </div>
        <!

最低0.47元/天解锁文章

weixin_46310510

关注

1
点赞
踩
36

收藏

觉得还不错? 一键收藏
5
评论
原生JS实现天气预报(和风天气api + 本地存储)

HTML代码<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <m..
复制链接

扫一扫