夏天快来吹空调吧！画一个夏日空调

最新推荐文章于 2024-10-04 00:46:18 发布
HHHHH2187
最新推荐文章于 2024-10-04 00:46:18 发布
阅读量103
点赞数
文章标签：前端 js
本文链接：https://blog.csdn.net/hhhhh2187/article/details/133388228
版权
当炎炎夏日的酷热袭来，空调成为了解救我们的救星。就像清凉的海风拂过皮肤一样，空调为我们带来了凉爽舒适的室内环境。让我们一起用 CSS 来画一个夏日空调吧！
实现效果：
以下是代码：（如有bug正常）
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./lib/download (1)/font_3793337_1kizfz4vggb/iconfont.css">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            justify-content: center;
        }

        .box {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 800px;
            height: 600px;
            /* background-color: pink; */
        }

        .box .top_1 {
            margin-top: 20px;
        }

        .box .top_1 h2 {
            font-weight: 400;
        }

        .box .top_2 {
            margin: 20px;
        }

        .box .top_2 span {
            color: #47a6fe;
        }

        .conter .conter_top {
            display: flex;
            justify-content: space-between;
            width: 600px;
            height: 100px;
            border-radius: 8px 8px 0px 0px;
            border: 1px solid #e6e6e6;
            padding: 10px;
        }

        .conter .conter_top .left {
            display: flex;
        }

        .conter .conter_top .right {
            opacity: 0;
        }

        .conter .conter_top .left img {
            width: 38px;
            height: 50px;
        }

        .conter .conter_top img:nth-child(2) {
            width: 38px;
            height: 40px;
            margin-left: 5px;
        }

        .conter_top .right .icon-taiyang {
            font-size: 18px;
            color: #ffd530;
        }

        .conter_top .right p {
            color: #cecece;
            font-size: 24px;
        }

        .conter_top .right p span:nth-child(2) {
            font-size: 16px;
        }

        .conter .conter_button {
            width: 600px;
            height: 30px;
            border: 1px solid #e6e6e6;
            border-radius: 0px 0px 16px 16px;
            margin-top: -1px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }

        .dian {
            width: 5px;
            height: 5px;
            background-color: green;
            border-radius: 50%;
            margin-right: 10px;
            opacity: 0;
        }

        /* .conter_button::after {
            display: flex;
            content: "";
            width: 5px;
            height: 5px;
            background-color: green;
            border-radius: 50%;
            margin-right: 10px;
            opacity: 1;
        } */

        .feng {
            display: flex;
            margin: 15px;
            opacity: 0;
        }

        .feng .xiantaio1,
        .feng .xiantaio2,
        .feng .xiantaio3 {
            width: 2px;
            height: 30px;
            background-color: #ebebeb;
            /* background-color: red; */
            margin: 0 30px;
        }

        .feng .xiantaio1 {
            transform: rotate(15deg);
        }

        .feng .xiantaio1 {
            transform: rotate(15deg);
        }

        .feng .xiantaio3 {
            transform: rotate(-15deg);
        }

        .control {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .control .text {
            color: #4393e2;
            width: 100px;
            padding: 5px 5px;
            text-align: center;
            border: 1px solid #8fbeee;
            border-radius: 5px;
            margin-bottom: 15px;
        }

        .gongneng {
            display: flex;
        }

        .gongneng .zhileng,
        .gongneng .kaiguan,
        .gongneng .zhier,
        .wendu .shang,
        .wendu .xia {
            width: 50px;
            height: 50px;
            background-color: #ffd530;
            border-radius: 50%;
            text-align: center;
            line-height: 50px;
            margin: 10px;
        }

        .gongneng .zhileng {
            background-color: #1177dd;
        }

        .gongneng .kaiguan {
            background-color: green;
        }

        .gongneng .zhier {
            background-color: #ffa400;
        }

        .gongneng .iconfont {
            font-size: 30px;
            color: #eee;
        }

        .wendu {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .wendu .shang,
        .wendu .xia {
            background: #e0e0e0;
        }

        .wendu .iconfont {
            font-size: 30px;
            color: #000;
        }

        .list {
            opacity: 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="top_1">
            <h2>便携小空调</h2>
        </div>
        <div class="top_2">
            <p>Tip:为你的夏日带去<span>清凉</span>!</p>
        </div>
        <!-- 空调主体 -->
        <div class="conter">
            <div class="conter_top">
                <div class="left">
                    <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.l-4vhPkidrIYFRGaoDS4owHaMH?pid=ImgDet&rs=1"
                        alt=""> <img
                        src="https://tse1-mm.cn.bing.net/th/id/OIP-C.l-4vhPkidrIYFRGaoDS4owHaMH?pid=ImgDet&rs=1" alt="">
                </div>
                <div class="right">
                    <i class="iconfont icon-taiyang"></i>
                    <p><span id="num">20</span><span>&#8451</span></p>
                </div>
            </div>
            <div class="conter_button">
                <div class="dian"></div>
            </div>
        </div>
        <!-- 风效果 -->
        <div class="feng">
            <div class="xiantaio1"></div>
            <div class="xiantaio2"></div>
            <div class="xiantaio3"></div>
        </div>

        <div class="control">
            <div class="text">独立遥控器</div>
            <!-- 功能开关 -->
            <div class="gongneng">
                <div class="zhileng">
                    <i class="iconfont icon-shengdan-xuehua"></i>
                </div>
                <div class="kaiguan">
                    <i class="iconfont icon-guanbi"></i>
                </div>
                <div class="zhier">
                    <i class="iconfont icon-taiyang"></i>
                </div>
            </div>
            <!-- 控制温度 -->
            <div class="wendu">
                <div class="shang">
                    <i class="iconfont icon-xia"></i>
                </div>
                <div class="xia">
                    <i class="iconfont icon-shang"></i>
                </div>
            </div>


        </div>
    </div>
    <script>
        const kaiguan = document.querySelector('.kaiguan')
        let flag = true
        kaiguan.addEventListener('click', function () {
            if (flag) {
                this.style.backgroundColor = '#f33531'
                document.querySelector('.feng').style.opacity = 1
                document.querySelector('.conter_top .right').style.opacity = 1
                document.querySelector('.dian').style.opacity = 1
            } else {
                this.style.backgroundColor = 'green'
                document.querySelector('.feng').style.opacity = 0
                document.querySelector('.conter_top .right').style.opacity = 0
                document.querySelector('.dian').style.opacity = 0

            }
            flag = !flag
        })

        const shang = document.querySelector('.shang')
        const xia = document.querySelector('.xia')
        const num = document.querySelector('#num')
        let i = parseInt(num.innerHTML) // 将温度值转为整数类型
        shang.addEventListener('click', function () {
            if (flag) {

            } else {
                i += 1
                num.innerHTML = i // 更新温度值
            }
            console.log(num.innerHTML);
        })

        xia.addEventListener('click', function () {
            if (flag) {

            } else {
                i--
                if (i < 16) return
                num.innerHTML = i // 更新温度值
            }
            console.log(num.innerHTML);
        })

        const taiyang = document.querySelector('.conter_top .icon-taiyang')
        const zhileng = document.querySelector('.zhileng')
        const zhier = document.querySelector('.zhier')
        zhileng.addEventListener('click', function () {
            if (flag) { } else {
                taiyang.classList.add('icon-shengdan-xuehua')
                taiyang.style.color = '#1177dd'
            }
        })

        zhier.addEventListener('click', function () {
            if (flag) { } else {
                taiyang.classList.remove('icon-shengdan-xuehua')
                taiyang.classList.add('icon-taiyang')
                taiyang.style.color = '#ffd530'
            }
        })
    </script>
</body>