太热了,只能自己写个程序来降温了

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 元宝

太开心了

又凉快,又好吃,又有钱

你学会了吗?

正文完