引言

最近，为逗女朋友开心给女朋友写了一个红包抽奖H5小应用，是一个纯前端的小应用，主要用了vue、layer.js、fakeLoader.js、jQuery.cookie.js等框架和插件，效果看下面的展示
这可以说是程序员撩妹神器 [滑稽脸]，需要的去我的下载资源下载[附链接]：https://download.csdn.net/download/angellover2017/10701989

效果展示

红包抽奖H5

代码实现

功能实现很简单，无非是两个0-9的随机数组成0-99的100个数字的随机数列，然后可以通过对数字范围的判断做抽奖的概率，比如数字个位为8的可以抽到什么奖…
麻烦的在于前端的一些骚操作，这里对这个H5使用到的框架和插件，给出demo实例：

fakeLoader.js:

$("#loading").fakeLoader({
       bgColor : "#DD0625"
      })

fakeLoader官方给出了很多可配置的属性:
若想让fakeloader每个挂载点加载多次，则需要修改fakeloader.js文件，在settings加入display : ''，在initStyles加入'display' : settings.display


var settings = $.extend({
            timeToHide:1200, // Default Time to hide fakeLoader
            pos:'fixed',// Default Position
            top:'0px',  // Default Top value
            left:'0px', // Default Left value
            width:'100%', // Default width 
            height:'100%', // Default Height
            zIndex: '999',  // Default zIndex 
            bgColor: '#2ecc71', // Default background color
            spinner:'spinner7', // Default Spinner
            display : '', //这里是解决fakeloader默认只能加载一次的问题
            imagePath:'' // Default Path custom image
        }, options);

 var initStyles = {
            'position':settings.pos,
            'width':settings.width,
            'height':settings.height,
            'top':settings.top,
            'left':settings.left,
            'display' : settings.display //这里是解决fakeloader默认只能加载一次的问题
        };

layer.js:


layer.open({
                      type: 2,
                      title: '奖项',
                      shadeClose: true,
                      shade: 0.8,
                      area: ['255px', '360px'],
                      content: "hongbao.html" ,//iframe的url
                       success: function(layero,index)
                       {
                       var text = layer.getChildFrame('#text',index);
                        if(a==6 && b==6){
                         text.text("500元，恭喜老婆！")
                        }else if(b==2){
                         text.text("200元，已经是2等奖了，脚气不错！")
                        }else if(b==8 || (b==6&&a!=6)){
                         text.text("100元，鼓励一下！")
                        }else if(b==7 || b==9 || b==1){
                         text.text("满足吕先生一个要求，嘻嘻")
                        }else if(b==3 || b==4){
                         text.text("满足熊小姐一个愿望，嘻嘻")
                        }else{
                         text.text("老婆，我爱你")
                        }
                        }
                   })

jquery.cookie.js:

//如果第一次访问设置cookie ，如果不是第一次访问读取cookie
    if($.cookie('activity') == null){
     $.cookie('activity',that.time,{ expires: 7 })
    }else{
     that.time = $.cookie('activity')
    }

vue就不说，源码可以去我的下载中下载使用：
https://download.csdn.net/download/angellover2017/10701989

秒客网