htmlcssjavascript 实现红包雨

Posted 2021-03-12 Sunshine

先看看效果吧！

HTML代码：

<div id="wrapper">
    <img src="images/hb/petal1.png" >
</div>
<div id="modol">
    <div id="hb">
        <div id="text"></div>
        <div id="btn">继续抢红包</div>
    </div>
</div>

CSS代码：

* {
    padding: 0;
    margin: 0;
}
body {
    background-color: #fb9d3b;
    overflow: hidden;
}
/*
    animation  各参数意思
    关键帧动画名称
    动画执行时间
    动画延迟时间
    动画执行次数
    动画的执行速度函数
    动画执行方向  alternate  间隔的顺序 ( 0 到 100 到 0 到 100 )
                 reverse    反向运动   (100 到 0 )
                 reverse-alternate   反向间隔运动
    动画执行模式  forwards(动画停止在最后一个关键帧的位置)
                 backwards (动画第一个关键帧立即执行)
                 both(两者都 即立即作用第一个关键帧也停止在最后一个关键帧)
*/
#wrapper img {
    position: absolute;
    transform: translateY(-100%);        /*下落动画*/
    animation: dropDowm 3s forwards;     /*旋转动画*/
}
@keyframes dropDowm{
    0% {
        top: 0px;
        transform: translateY(-100%) rotate(0deg);   
    }
    100% {
        top: 110%;
        transform: translateY(0%) rotate(360deg);
    }
}

#modol {
    display: none;
}

#modol::before {
    content: \'\';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0, 0.5);
}

#hb {
    width: 350px;
    height: 450px;
    border-radius: 20px;
    background-color: #e7223e;
    color: #fad755;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-top: -225px;
    margin-left: -175px;
    font-size: 30px;
    font-weight: 900;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#btn {
    background-color: #fad755;
    color: #e7223e;
    font-size: 18px;
    margin-top: 10px;
    padding: 10px;
    border:none;
    outline: none;
    cursor: pointer;
}

javascript代码：

function init() {
    var dom = createDom(40);
    var wrapper = document.getElementById(\'wrapper\');
    wrapper.appendChild(dom);
    bindEvent();
}

var totalMoney = 0;   //保存所有抢到的红包总金额
var delayTime = 0;
var lastImg = null;   //最后一张掉落的图片

//创建红包结构, num代表红包个数
function createDom(num) {
    var frag = document.createDocumentFragment();  //创建文档碎片
    for(var i = 0; i < num; i ++) {
        var img = new Image();
        img.src = \'./images/hb/petal\' + ranNum(0,10) + \'.png\';
        img.style.left = ranNum(0, window.innerWidth) + \'px\';      //让红包散列分布
        var delay = ranNum(0,100) / 10;
        img.style.animationDelay = delay + \'s\';                   //设置红包出现时间
        if(delayTime < delay) {
            delayTime = delay;
            lastImg = img;
        }
        //data-money
        img.dataset.money = ranNum(0,1000) / 100;     //设置每个红包的钱数
        frag.appendChild(img);
    }
    return frag;
}

//绑定点击事件
function bindEvent() {
    var wrapper = document.getElementById(\'wrapper\'),
        imgList = document.getElementsByTagName(\'img\'),
        modol = document.getElementById(\'modol\'),
        text = document.getElementById(\'text\'),
        btn = document.getElementById(\'btn\');

    //点击红包事件
    addEvent(wrapper, \'mousedown\', function(e) {      
        var event = e || window.event,
            target = event.target || event.srcElement,
            money = event.target.dataset.money;
        if(money) {
            text.innerText = \'恭喜抢到红包\' + money + \'元\';
            for(var i = 0, len = imgList.length; i < len; i ++) {
                imgList[i].style.animationPlayState = \'paused\';
            }
            modol.style.display = \'block\';
            totalMoney += Number(money);
        }
    });

    //点击继续抢红包按钮事件
    addEvent(btn, \'click\', function() {
        modol.style.display = \'none\';
        for(var i = 0, len = imgList.length; i < len; i ++) {
            imgList[i].style.animationPlayState = \'running\';
        }
    });

　　//监听最后一个红包动画完成
    addEvent(lastImg, \'webkitAnimationEnd\', function() {
        modol.style.display = \'block\';
        text.innerText = \'恭喜总共抢到了\' + totalMoney.toFixed(2) + \'元\';
        btn.style.display = \'none\';
    });
}

//min 到 max 之间的随机数
function ranNum(min, max) {
    return Math.ceil(Math.random()*(max - min) + min);
}

//兼容的 添加事件函数
function addEvent(elem, type, handle) {
    if (elem.addEventListener) {
        elem.addEventListener(type, handle, false);
    } else if (elem.attachEvent) {
        elem.attachEvent(\'on\' + type, function() {
            handle.call(elem);
        })
    } else {
        elem[\'on\' + type] = handle;
    }
}




init();

 

 

*:ஐ٩(๑´ᵕ`)۶ஐ:* 学习使我进步

欢迎留言讨论哦！