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

2023-08-08 49

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 太热了，只能自己写个程序来降温了

这个天气，敢出门的都是抗日英雄

自打入夏以来，小面就独得太阳恩宠

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

可是没有个鬼用

今天，小面就教各位同学

自己动手，人工降雪

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;
}