思享工具箱

h5红包雨

摘要：
在许多活动中都有一些小游戏，如彩票轮盘、红包雨等。今天，我心血来潮地写了一个粗略的红包雨获胜记录˃*｛margin:0；padding:0；｝content{位置：相对；/*高度：109rem；*/高度：99vh；宽度：100%；/*背景图像：url；*//*背景位置：中心；*//*background大小：包含；*/}。bg_box｛位置：绝对；｝。bg_ boximg｛width:100%；/*61rem；*//*height:108.5rem；**height:41.5rem；｝。红色框{position:absolute；}。红色方框img｛width:4rem；/*10rem；*/height:auto；cursor:pointer；｝。隐藏{display:none；}。big_box{width:100%；位置：绝对；显示：flex；/*对齐内容：中心；*/对齐内容：flex结束；右：0；顶部：1%；}。show_ all｛position:absolute；/*display:flex；*//*调整内容：间隔；*//*justify content:center；*/width:22%；/*30%；*/color:#FEE533；/*background:#54BEEE；*/border radius:4rem；/*height:5rem；*/height:2rem；｝。timer_date，。hb_money｛/*页边空白顶部：1rem；*//*页边空白底部：1rem；*/display:flex；justify content:center；｝。img_winnde{/*40%；*/width:1.5rem；显示：flex；flex方向：列；对齐内容：中心；/*height:4rem；*/height:2rem；}。dsq_date｛width:52%；｝。timer_dateimg，。hb_货币img{/*5rem；*//*4rem；**height:1.5rem；}。timer_date｛/*30%；*//*左填充：13rem；*/｝。hb_money{width:30%；/*42%；*//*填充右：7rem；*/}.time，.title{top:0；/*右：0；*/right:10%；位置：绝对；/*字体大小：3rem；**font大小：1.5rem；字体大小：粗体；}。时间｛｝。prize_ all｛font-size:20px；height:9rem；｝。标题｛｝。total_money｛/*font-size:3rem；*/font-size:1.5rem；｝。money _ prize{/*font-size:5rem；*/font-size:1.5rem；显示：flex；调整内容：中心；对齐项目：中心；/*height:20rem；**height:6rem；}。ui弹出焦点。ui对话框｛border radius:1.5rem；｝。ui对话框网格{background:#D9001B；color:#FFFFFF；边框半径：1.5rem；}。ui对话框标题{font-size:1rem；text-align:center；}。ui对话框关闭｛display:none；｝。total_ money，。奖金{textalign:center；}。bnt_全部{/*font-s

现在很多活动中都会有一些小游戏，比如抽奖轮盘，红包雨等等，今天心血来潮写了一个粗糙的红包雨

<div class="content">

    <div class="bg_box">

        <img src="./image/bg.jpg"/>
    </div>
</div>

<!--倒计时-->
<div class="big_box">
    <div class="show_all">
        <div class="timer_date">
            <div class="img_winnde">
                <img src="./image/daojishi.png"/>
            </div>
            <div class="dsq_date">
                <span class="time">
                    15s
                </span>
            </div>

        </div>
        <!--        <div class="hb_money">-->
        <!--            <img src="http://t.zoukankan.com/image/money.png"/>-->
        <!--            <span class="title">0.00</span>-->
        <!--        </div>-->


    </div>
</div>
<!--红包模板-->
<div class="hide">
    <div class="red-box" data-txt>
        <img class="close_hb" src="./image/hb.png"/>
        <!--        <img   src="http://t.zoukankan.com/image/openhb.png">-->
    </div>
</div>
<!-- 中奖明细 弹框 -->
<div class="wrapPureBorn">
    <div class="showProduct" id="peizeDetailBox">
        <div class="showProductBoxld">
            <div class="img_prie">
                <a href="javascript:;" class="closeProducted">
                    <img src="./image/close.png" alt=""/>
                </a>
                <div class="zj_note">
                    <span>中奖记录</span>
                </div>
            </div>

            <div class="winDetails">
            </div>
        </div>
    </div>
</div>
 * {
            margin: 0;
            padding: 0;
        }

        .content {
            position: relative;
            /*height: 109rem;*/
            height: 99vh;
            width: 100%;
            /*background-image: url("./bg.jpg");*/
            /*background-position: center;*/
            /*background-size: contain;*/
        }

        .bg_box {
            position: absolute;

        }

        .bg_box img {
            width: 100%;
            /* 61rem;*/
            /*height: 108.5rem;*/
            height: 41.5rem;
        }

        .red-box {
            position: absolute;
        }

        .red-box img {
            width: 4rem;
            /* 10rem;*/
            height: auto;
            cursor: pointer;
        }

        .hide {
            display: none;
        }


        .big_box {
            width: 100%;
            position: absolute;
            display: flex;
            /*justify-content: center;*/
            justify-content: flex-end;
            right: 0;
            top: 1%;
        }

        .show_all {
            position: absolute;
            /*display: flex;*/
            /*justify-content: space-between;*/
            /*justify-content: center;*/
            width: 22%;
            /* 30%;*/
            color: #FEE533;
            /*background: #54BEEE;*/
            border-radius: 4rem;
            /*height: 5rem;*/
            height: 2rem;
        }

        .timer_date,
        .hb_money {
            /*margin-top: 1rem;*/
            /*margin-bottom: 1rem;*/
            display: flex;
            justify-content: center;
        }

        .img_winnde {
            /* 40%;*/
            width: 1.5rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            /*height: 4rem;*/
            height: 2rem;
        }

        .dsq_date {
            width: 52%;
        }

        .timer_date img,
        .hb_money img {
            /* 5rem;*/
            /* 4rem;*/
            height: 1.5rem;
        }

        .timer_date {
            /* 30%;*/
            /*padding-left: 13rem;*/
        }

        .hb_money {
            width: 30%;
            /* 42%;*/
            /*padding-right: 7rem;*/
        }

        .time,
        .title {
            top: 0;
            /*right: 0;*/
            right: 10%;
            position: absolute;
            /*font-size: 3rem;*/
            font-size: 1.5rem;
            font-weight: bold;
        }

        .time {
        }

        .prize_all {
            font-size: 20px;
            height: 9rem;
        }

        .title {
        }

        .total_money {
            /*font-size: 3rem;*/
            font-size: 1.5rem;
        }

        .money_prize {
            /*font-size: 5rem;*/
            font-size: 1.5rem;
            display: flex;
            justify-content: center;
            align-items: center;
            /*height: 20rem;*/
            height: 6rem;
        }

        .ui-popup-focus .ui-dialog {
            border-radius: 1.5rem;
        }

        .ui-dialog-grid {
            background: #D9001B;
            color: #FFFFFF;
            border-radius: 1.5rem;
        }

        .ui-dialog-title {
            font-size: 1rem;
            text-align: center;
        }
        .ui-dialog-close{
            display: none;
        }
        .total_money,
        .money_prize {
            text-align: center;
        }

        .bnt_all {
            /*font-size: 3rem;*/
            font-size: 1rem;
            position: absolute;
            bottom: 0;
            width: 100%;
            display: flex;
            justify-content: space-around;
        }

        .continue_swpp,
        .prize_note {
            border: 0.2rem solid;
            /*padding: 1.5rem 4rem;*/
            border-radius: 1.5rem;
            background: #F59A23;
            padding: 0.5rem 1rem;
        }

        .zj_note{
            color: #FFFFFF;
            font-size: 2rem;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .continue_swpp {

        }

        .prize_note {

        }

        .prixe_null {

        }


        .wrapPureBorn .showProduct {
            /*position: absolute;*/
            position: fixed;
            top: 0;
            left: 0;
            z-index: 9999;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: none;
        }

        .wrapPureBorn .showProductBoxld {
            width: 90%;
            height: 76%;
            position: absolute;
            left: 0;
            top: 10%;
            margin-left: 5%;
            background: #fff;
            /*border-radius: .5rem;*/
            border-radius: 1.5rem;
            overflow: auto;
        }

        .wrapPureBorn .closeProducted {
            position: absolute;
            right: 3%;
            top: 1.5%;
            width: 1.5rem;
            height: 1.5rem;
            /* 4.2rem;*/
            /*height: 4.2rem;*/
        }

        .wrapPureBorn .closeProducted img {
            width: 1.5rem;
        }

        .winDetails {
            display: none;
            background: #fff;
            font-size: 1rem;
        }

        .icon_money {
            /* 6.5rem;*/
            width: 2.5rem;
            float: left;
        }

        .prize_tiyle {
            /*padding-top: 0.5rem;*/
        }

        .prize_date {

        }

        .bottompri ul li {
            display: flex;
            justify-content: space-between;
            /*margin-bottom: 1rem;*/
            /*margin-top: 1rem;*/
            margin-bottom: 0.5rem;
            margin-top: 0.5rem;
        }

        .img_prie {
            height: 10%;
            background: #F59A23;
        }

        .wxPrized {
            width: 65%;
            padding-left: 1rem;
        }

        .sumMedld {
            /*padding-right: 3rem;*/
            padding-top: 0.5rem;
            width: 40%;
            font-size: 1.5rem;
        }

        .open_hb {
            display: none;
        }
        .bottompri{
            /*height: 30.5rem;*/
            height: 28rem;
            overflow: scroll;

        }
$(function () {
            const $content = $('.content');
            const $redBox = $('.red-box');
            const redContentWidth = $content.width();
            const redBoxWidth = $redBox.width();
            const basePadding = 30;
            const maxLeftPX = (redContentWidth - redBoxWidth - basePadding * 2) - 20;
            let moneyTotal = 0;
            let zIdex = 1;
            let timer;
            let listAll = [];
            let timered, timedate;

            let count = 15;

            function bindEvent() {

                // 将红包绑定事件onmousedowon
                $content.on('touchstart', '.red-box', function (e) {

                    // if (count == 0) {
                    //
                    //
                    //     var d = dialog({
                    //         id: 'baseConfig',
                    //         height: '36rem',
                    //          '52rem',
                    //         // closable: true,
                    //         zIndex: 999,
                    //         title: '红包雨倒计时结束',
                    //         content: '<div class="prize_all">' +
                    //             '<p class="total_money">共获得</p>' +
                    //             '<p class="money_prize">￥' + moneyTotal.toFixed(2) + '</p>' +
                    //             '</div>' +
                    //             '<div class="bnt_all">' +
                    //             '<span class="continue_swpp reloadScan">继续扫' +
                    //             '</span>' +
                    //             '<span   id="aountList">中奖记录' +
                    //             '</span>' +
                    //             '</div>',
                    //     });
                    //     d.showModal();
                    //     $('.aountList').on('click', function () {
                    //         viewAccoutList()
                    //     })
                    //     $(".reloadScan").on("click", function () {
                    //         alert("reloadScan");
                    //         scanScan();
                    //     })
                    //     $('.closeProducted').on('click', function () {
                    //         $('.showProduct').hide();
                    //         $('.winDetails').hide();
                    //     });
                    //
                    // } else {

                    e = window.event;
                    var obj = e.target || e.srcElement;

                    const data = $(this).data('txt');
                    let dataChu = data.toFixed(2);
                    moneyTotal += Number(dataChu)
                    $('.title').text(moneyTotal.toFixed(2));
                    // timedate = setTimeout(() => {

                    $(obj).attr('src', './image/openhb.png')
                    $(obj).val(dataChu)
                    listAll.push({'moneall': dataChu})
                    createAccoutDom(listAll)
                    $(obj).fadeOut(1200)
                    // }, 300)
                    // }
                });
            }

            function viewAccoutList() {
                $('#peizeDetailBox').show();
                $('.winDetails').show();
                // createAccoutDom()
            }

            //中奖详情
            function createAccoutDom(data) {

                let list = data
                // console.log(list)
                var htmlbottom = null;
                if (list.length > 0) {
                    htmlbottom = '<div class="bottompri"><ul>';
                    for (var item = 0; item < list.length; item++) {

                        htmlbottom += '<li>';
                        htmlbottom += '<div class="wxPrized">' + '<img   src="http://t.zoukankan.com/image/money.png" alt="" />' + '<div class="prize_tiyle">' + '雪花5周年' + '</div>' + '<div class="prize_date">' + '2020.12.22' + '</div></div>';

                        htmlbottom += '<div class="sumMedld">+' + list[item].moneall + '元</div>';

                        htmlbottom += '</li>';


                    }
                    htmlbottom += '</ul></div>';
                } else {
                    console.log(666)
                    htmlbottom = '<div class="prixe_null">中奖记录为空'+
                        '</div>'
                }
                $('.winDetails').empty();
                $('.winDetails').append(htmlbottom);
            }

            // 扫码
            function scanScan() {
                var areaHeaderUrl = $('#areaHeaderUrl').val();
                var requestUrl = areaHeaderUrl + "/jspi/info";
                $.ajax({
                    type: 'POST',
                    url: requestUrl,
                    data: {"url": window.location.href},
                    success: function (datas) {
                        if (datas == null || datas == '') {
                            alert("调用失败");
                            return;
                        }
                        doScan(datas);
                    }
                });
            }

            function doScan(data) {
                wx.config({
                    debug: false,
                    appId: data.appid,
                    timestamp: data.timestamp,
                    nonceStr: data.nonceStr,
                    signature: data.signature,
                    jsApiList: ['checkJsApi', 'scanQRCode']
                });

                wx.ready(function () {
                    wx.scanQRCode({
                        needResult: 1,
                        scanType: ["qrCode", "barCode"],
                        success: function (res) {
                            var result = res.resultStr;
                            window.location.href = result;
                        }
                    });
                });
            }

            // 设置移动及旋转的距离，避免溢出屏幕
            function getRandom(min, max) {
                return Math.round(Math.random() * (max - min) + min);
            }

            //设置红包移动速度及销毁时间
            function redBoxSpeed($el, time) {

                $el.animate(
                    {
                        top: '36rem',
                    },
                    time * 700,
                    function () {
                        $el.remove();
                    }
                );
            }

            //创建红包
            function createRedBox() {
                const $newNode = $redBox.clone(true);
                $newNode.attr('data-txt', Math.random() * 10);
                $newNode.css({
                    'z-index': zIdex++,
                    'left': getRandom(basePadding, maxLeftPX) + 'px',
                    'transform': 'rotate(' + getRandom(-30, 30) + 'deg'
                });

                $content.append($newNode);
                redBoxSpeed($newNode, 4);
            }

            //启动定时器，循环创建红包雨
            function createRedBoxRain() {
                // 创建红包数量
                timered = setInterval(() => {
                    createRedBox();
                }, 400)
            }

            //倒计时
            timer = setInterval(() => {
                if (count == 0) {
                    clearInterval(timer);
                    clearInterval(timered);
                    setTimeout(() => {
                        var d = dialog({
                            id: 'baseConfig',
                            height: '13rem',
                             '13rem',
                            // closable: false,
                            zIndex: 999,
                            title: '红包雨倒计时结束',
                            content: '<div class="prize_all">' +
                                '<p class="total_money">共获得</p>' +
                                '<p class="money_prize">￥' + moneyTotal.toFixed(2) + '</p>' +
                                '</div>' +
                                '<div class="bnt_all">' +
                                '<span class="continue_swpp reloadScan">继续扫' +
                                '</span>' +
                                '<span   id="aountList">中奖记录' +
                                '</span>' +
                                '</div>',
                        });

                        // d.show();
                        // console.log(listAll)
                        d.showModal()
                        $('.aountList').on('click', function () {
                            viewAccoutList()
                        })
                        $(".reloadScan").on("click", function () {
                            alert("reloadScan");
                            scanScan();
                        })
                        $('.closeProducted').on('click', function () {
                            $('.showProduct').hide();
                            $('.winDetails').hide();
                        });
                    }, 1000)

                } else {
                    count--
                    $('.time').text(count + 's');
                }
            }, 1000);

            //入口函数
            function ready() {
                bindEvent();
                createRedBoxRain();
            }

            ready();
        })

然后红包雨展示页面就是这样：

h5红包雨第1张

当倒计时结束之后自动弹出中奖金额：

h5红包雨第2张

左边按钮扫一扫可以继续抽奖，右边中奖记录就是点击每个红包中的金额：

h5红包雨第3张

ok,就到这里了

标签：#background#position#font#hide#display#content#click | 浏览：207 | 发布日期：

免责声明：文章转载自《h5红包雨》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇Retrofit 打印log时，中文会显示类似%E8%BE%BD字符eclipse导入新的maven项目时，pom.xml第一行报错：下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

关于 Delphi 中流的使用(1) 用 TMemoryStream(内存流) 入门

前言: 所谓"流", 就是一段数据或是一块内存; 在进行流操作时, 我们不必关心流中的数据到底是什么; 只需要知道流的大小和当前的指针位置. 所以流只有两个属性: Size、Position. 对流的操作, 不过就是读取和写入. 所以流最主要的方法就是 Read 和 Write. 在很多控件的使用中, 读取主要用 LoadFromStream; 写入主要用...

创建Java2D图形

创建Java2D图形 下面我们将介绍如何将Swing容器(存放GUI组件的纯黑色面板和框架)变成一块可以在上面绘制字体、颜色、形状和图形的艺术画布。 1、使用Font类 在Java中，颜色和字体使用java.awt包中的Color和Font类来表示。字体使用构造函数Font(String , int , int)来创建，3个参数分别为： >字体的名...

scrapy爬虫系列之四--爬取列表和详情

功能点：如何爬取列表页，并根据列表页获取详情页信息？ 爬取网站：东莞阳光政务网 完整代码：https://files.cnblogs.com/files/bookwed/yangguang.zip 主要代码： yg.py importscrapy from yangguang.items importYangguangItem classYgSpide...

大屏适配window.onresize监听窗口变化，该方法已用于生产

1 js部分 // 本次开发场景2880*1080 配合css 2 mounted () { 3 this.pageResize() 4 window.onresize = () => { 5 setTimeout(() => { 6...

前端-HTML基础+CSS基础

HTML HTML <p></p>段落标签*** <h></h>标题标签H** <div></div>块级标签 白板***** <span></span>行内标签 白板***** <input /> 文本框标签 ***** <form&...

利用MongoDB进行地理坐标查询

BS的应用在生活中已经非常常见，我们打车，叫外卖，查个地图之类的都会查询附近的相关坐标位置，mongodb提供了原生的二维地图查询，极大地方便了大家的开发。 假定我们有一个定义了位置信息的集合location,给定a,b,c,d节点 db.location.find() { "_id" : "A", "position" : [ 0, 10 ] } { "...

最新文章

随机推荐

思享工具箱导航