红包抽奖H5

引言

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

效果展示

代码实现

功能实现很简单，无非是两个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主要是为了加入一个活动倒计时的效果，使用setInterval()我们知道可以周期性执行函数或表达式，但是如何让倒计时自动停止呢？
这个就需要加入cookie，缓存记录当前倒计时的时间点，然后当到时间点时，使用clearInterval()就可以停止计时

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

在vue的watch中侦听时间节点：

   watch : {
    //侦听time
    time : function(){
     var that = this
     $.cookie('activity',that.time,{ expires: 7 })
     if(this.time == 0){
      window.clearInterval(that.interval_id)
      layer.alert("活动结束")
     }
    }
   }

【注意】以上代码不是连续的，是从源码中截取的做展示，有需要撩妹的，去我的下载里下载源码：

https://download.csdn.net/download/angellover2017/10701989

做个引流?

博主最近开了一个微信公众号，以全栈技术为初衷，里面会分享我自己写的认为比较好的原创文章，博客会部分同步，感谢关注！