2022，有生之年的最熱一年

這個天氣，敢出門的都是抗日英雄

自打入夏以來，小面就獨得太陽恩寵

小面天天求太陽，一定要雨露均沾哦

可是沒有個鬼用

今天，小面就教各位同學

自己動手，人工降雪

1. 準備工作

一個雪花圖檔

一個記事本（或者IDE）

2. 目标

50行代碼，解決人工降雪問題

3. 代碼

分為以下幾個步驟：

繪制背景
通過雪花圖檔，随機生成大小、初始位置不同的雪花元素
雪花飄落實作
掉在地上的雪花銷毀

3.1 主界面

<!DOCTYPE html>
<html>
    <head>
        <title>天太熱，快下雪吧</title>
        <style>
            // TODO
        </style>
        <script>
            // TODO
        </script>
    </head>
</html>

複制

将背景換成黑色

body {
    background-color: #000000;
}

複制

3.2 靈魂代碼

開始表演真正的技術

function runSnow() {
    let width = window.innerWidth;
    let height = window.innerHeight;

    let snow = document.createElement("div");

    ////雪花圖檔大小介于5 ~ 55px
    size = Math.random()*50 + 5;                          
    snow.style.width = size + "px";
    snow.style.height = size + "px";
    snow.style.background = "url(images/snow.png) no-repeat";
    snow.style.backgroundSize = '100% 100%';
    snow.style.position = "fixed";

    //透明度在 0.4 ~ 1.0 之間
    snow.style.opacity = parseInt(Math.random()*6)/10 + 0.4; 
    //随機生成雪花的橫向位置
    snow.style.left = Math.random()*width + 'px';
    //雪花縱向位置固定從最頂上開始
    snow.style.top = "0px";

    document.body.appendChild(snow);

    //每30ms雪花下落一次
    let speed=30;
    let timer = setInterval(function() {
        snow.style.top = parseInt(snow.style.top) + 10 + 'px';

        if(parseInt(snow.style.top) >= height) {
            //當雪花到達底部後，清除
            clearInterval(timer);
            snow.parentNode.removeChild(snow);
        }
    }, speed);
}

window.onload = function () {
    //每50ms生成一朵雪花
    let fre=50;
    setInterval(function() {
        runSnow()
    }, fre);
}

複制

順利完成

4. 運作效果

5. 增加億點點變化

俗話說：UI好看靠圖檔湊，接下來看看能玩出哪些花樣吧

5.1 更換背景

修改body的css，增加背景圖，設定居中鋪滿全頁

body {
    background-image: url(images/city.jpg);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

複制

檔次明顯上升了

5.2 更換掉落元素

5.2.1 雞腿

5.2.2 紅包

5.2.3 元寶

太開心了

又涼快，又好吃，又有錢

你學會了嗎？

太熱了，隻能自己寫個程式來降溫了1. 準備工作2. 目标3. 代碼4. 運作效果5. 增加億點點變化