一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第26天，点击查看活动详情。
我正在参加 码上掘金体验活动，详情：show出你的创意代码块
将笔记跟大家分享，希望对大家也有所帮助，共同成长进步💪~
如果大家喜欢，可以点赞或留言给个支持💕~~~~，谢谢大家⭐️⭐️⭐️~~~
实现一个简单的红包雨demo
代码块
html部分
<div class="balldv">
<span class="countdown"></span>
<div>
css部分
background-image 图片是随便找的一张，引用的网上图片
.balldv {
width: 300px;
height: 500px;
background: lightblue;
position: fixed;
}
.ball {
display: block;
position: absolute;
left: 0;
top: 0;
width: 26px;
height: 31px;
background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi-1.lanrentuku.com%2F2020%2F11%2F5%2F679675fc-d4e7-46a9-bdab-4a4f0e3ece89.png%3FimageView2%2F2%2Fw%2F500&refer=http%3A%2F%2Fi-1.lanrentuku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653443030&t=e0d0db23bdc0bab23f749c0e3f584193');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.countdown {
color: red;
font-size: 60px;
display: inline-block;
width: 100%;
height: 100%;
text-align: center;
margin-top: 50%;
}
Js部分
//倒数计时
function countdown() {
numz--;
if (numz > 0) {
$(".balldv .countdown").html(numz);
} else {
$(".balldv .countdown").remove();
}
var tiemr = setTimeout(countdown, 1000);
if (numz <= 0) {
clearTimeout(tiemr);
redRain();
}
}
var numz = 4;
countdown();
// 红包雨
function redRain() {
var shu = parseInt(20 * Math.random());
var str = '';
for (var i = 0; i <= shu; i++) {
str += '<span class="ball"></span>'
}
$(".balldv").append(str);
var $balls = $("span.ball");
var step = 300 / 21;
var start = step;
$balls.each((i, ball) => {
$(ball).css("left", `${start + step * i - 10}px`);
$(ball).css("top", `${-randomInt(200)}px`);
});
var fallStep = 3;
var timer = setInterval(() => {
let allDown = true;
$balls.each((_, ball) => {
var $ball = $(ball);
let top = $ball.position().top;
top += fallStep;
$ball.css("top", `${top}px`);
if (top < 500) {
allDown = false;
}
});
if (allDown) {
clearInterval(timer);
}
}, 40);
}
function randomInt(max) {
return Math.floor(Math.random() * max);
}
最后感谢大家阅读，如果喜欢可以点赞或留言💕~~~~，谢谢大家⭐️⭐️⭐️~~~
专栏推荐
推荐一下自己的专栏，欢迎大家收藏关注😊~
