blog
/
js抖音网红小空调.html

<!--
 * @Author: your name
 * @Date: 2021-05-10 23:11:44
 * @LastEditTime: 2021-05-19 21:23:29
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \undefinedd:\练习\小空调.html
-->
<!DOCTYPE html>
<html lang="zh-CN">
<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">
    <title>小空调</title>
    <style>
        @font-face {
         font-family: 'led regular';
         src: url('./font/ds_digital/DS-DIGI.TTF');
        }

        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        body{
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgb(241, 241, 241);
        }
        .container{
            position: relative;
            width: 400px;
            height: 500px;
           /*  border: 1px solid rgb(201, 201, 201); */
        }
        .air{
            position: relative;
            margin: 0 auto;
            width: 300px;
            height: 120px;
            background-color: rgb(255, 255, 255);
            border-radius: 10px 10px 0 0;
            filter: drop-shadow(0 2px 4px rgb(145, 145, 145));
        }
        .air::after{
            content: '';
            position: absolute;
            bottom: -21px;
            left: 0;
            height: 20px;
            width: 300px;
            background-color: rgb(255, 255, 255);
            border-radius: 0 0 20px 20px;
        }
        .picture{
            position: absolute;
            top: 10px;
            left: 10px;
            width: 40px;
            height: 65px;
            border-radius: 5px;
        }
        .pattern{
            position: absolute;
            top: 25px;
            right: 35px;
            width: 20px;
            height: 20px;
            opacity: 0;
            transition: all 0.3s;
        }
        .font{
            /* 引用LED字体 */
            font-family: "led regular";
            position: absolute;
            right: 30px;
            top: 45px;
            width: 50px;
            height: 30px;
            line-height: 30px;
            font-size: 25px;
            color: rgb(184, 184, 184);
            opacity: 0;
            transition: all 0.3s;
        }
        .logo{
            position: absolute;
            left: 50%;
            bottom: 3px;
            transform: translateX(-50%);
            font-size: 10px;
            color: rgb(139, 139, 139);
        }
        .dot{
            position: absolute;
            bottom: -8px;
            right: 12px;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background-color: rgb(19, 221, 53);
            z-index: 1;
            opacity: 0;
            transition: all 0.3s;
        }
        .wind{
            position: relative;
            top: 30px;
            width: 250px;
            height: 60px;
            margin: 0 auto;
            opacity: 0;
            transition: all 1.2s;
            animation: move 1.5s ease-in-out infinite;
        }
        @keyframes move{
            0%,100%{
                transform: translateY(0px);
            }
            50%{
                transform: translateY(5px);
            }
        }
        .wind>span{
            position: absolute;
            width: 5px;
            height: 40px;
            background-color: rgb(206, 206, 206);

        }
        .wind1{
            left: 20%;
            transform: rotate(20deg);
        }
        .wind2{
            left: 50%;
        }
        .wind3{
            left: 80%;
            transform: rotate(-20deg);
        }
        .btn{
            position: relative;
            top: 50px;
            margin:0 auto;
            width: 100px;
            height: 150px;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            align-items: center;
        }
        .btn>div{
            width: 35px;
            height: 35px;
            border-radius: 50%;
            font-size: 12px;
            line-height: 35px;
            text-align: center;
            background-color: rgb(204, 204, 204);
            box-shadow: 0 2px 4px rgb(151, 151, 151);
            cursor: pointer;
            user-select: none;
        }
        .btn>div:active{
            background-color: rgb(240, 240, 240);
        }
        .sun,.snow,.open{
            background-size: 50% 50%;
            background-position: 50% 50%;
            background-repeat: no-repeat;
        }
        .btn .sun{
            background-image: url(img/sun.png);
            background-color: rgb(255, 130, 13);
        }
        .btn .snow{
            background-image: url(img/snow.png);
            background-color: rgb(13, 138, 255);
        }
        .btn .open{
            background-image: url(img/open.png);
            background-color: rgb(33, 255, 13);
        }
    </style>
</head>
<body>
    <!-- 底层盒子 -->
    <div class="container">
        <div class="air">
            <img src="img/air-conditioning.png" alt="x" class="picture">
            <img class="pattern" src="img/snow.png" alt="x">
            <span class="font">17°C</span>
            <span class="logo">☁</span>
            <span class="dot"></span>
        </div>
        <div class="wind">
            <span class="wind1"></span>
            <span class="wind2"></span>
            <span class="wind3"></span>
        </div>
        <div class="btn">
            <div class="up">▲</div>
            <div class="down">▼</div>
            <div class="sun"></div>
            <div class="snow"></div>
            <div class="open"></div>
        </div>
    </div>
    <audio src="img/open.mp3" class="music" loop></audio>
    <audio src="img/12763.wav" class="ding"></audio>
    <script>
        var open = document.querySelector(".open");
        var sun = document.querySelector(".sun");
        var snow = document.querySelector(".snow");
        var up = document.querySelector(".up");
        var down = document.querySelector(".down");
        var pattern = document.querySelector(".pattern");
        var font = document.querySelector(".font");
        var dot = document.querySelector(".dot");
        var wind = document.querySelector(".wind");
        var music = document.querySelector(".music");
        var ding = document.querySelector(".ding");
        var temp = 1;
        var num = 17;

        open.addEventListener('click',function(){
            if(temp==0){
                open.style.backgroundColor = 'rgb(33, 255, 13)';
                pattern.style.opacity = 0;
                font.style.opacity = 0;
                dot.style.opacity = 0;
                wind.style.opacity = 0;
                temp=1;
                music.pause();
            }else if(temp==1){
                open.style.backgroundColor = 'red';
                pattern.style.opacity = 1;
                font.style.opacity = 1;
                dot.style.opacity = 1;
                wind.style.opacity = 1;
                temp=0;
                music.play();
            }
        })
        up.addEventListener('click',function(){
            if(num==30) return ;
            num++;
            font.innerHTML = num+"°C";
            ding.load();
            ding.play();
        })
        down.addEventListener('click',function(){
            if(num==16) return ;
            num--;
            font.innerHTML = num+"°C";
            ding.load();
            ding.play();
        })
        sun.addEventListener('click',function(){
            pattern.src = "img/sun.png";
            ding.play();
            music.load();
            music.play();
        })
        snow.addEventListener('click',function(){
            pattern.src = "img/snow.png";
            ding.play();
            music.load();
            music.play();
        })
    </script>
</body>
</html>