太热了，只能自己写个程序来降温了
原创
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 元宝
太开心了
又凉快，又好吃，又有钱
你学会了吗？
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录