js实现刮刮卡抽奖

Posted 2022-03-26 nanyang520

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现刮刮卡抽奖相关的知识，希望对你有一定的参考价值。

刮刮卡抽奖是前端活动页常见的功能：

　　　链接：图像擦除插件（下载及教程讲解）

　　推荐理由：无缝刮痕，兼容性好，上手简单

　　插件有些要修改的地方，打开图像擦除插件后可以看下方网友讨论，或者直接下载本博客文件中的jquery.eraser.js

使用方法如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        <meta content="telephone=no" name="format-detection">
        <meta content="email=no" name="format-detection">
        <meta name="full-screen" content="yes">
        <meta name="browsermode" content="application">
        <meta name="full-screen" content="yes">
        <meta name="browsermode" content="application">
        <meta name="x5-orientation" content="portrait">
        <title>刮刮卡实现</title>
    </head>
    
    <style>
        
        .outBox
            position: relative;
            top:300px;
            width: 300px;
            height: 130px;
            margin: auto;
            z-index: 100;
            background: #AB945E;
        
        
        #scratch
            position:relative;
            width:100%;
            height:100%;
        
        
        #card 
            width: 300px;
            height: 130px;
            line-height:130px;
            font-size: 28px;
            letter-spacing: 1px;
            color:#ff0000;
            text-align: center;
        
        
        #guaguaImg
            position: absolute;
            top:0;
            left:0;
            z-index: 10;
            width:100%;
            height:100%;
        
        
    </style>
    
    
    <body>
        
        <!--刮奖层-->
        <div class="outBox">
            <div id="scratch">
                <!--必须指定一个id为card的div才能使刮刮卡效果生效-->
                <div id="card">女朋友一位</div>
                <img src="img/shadow.png" id="guaguaImg"/>
            </div>
        </div>
        
        <script src="jquery-2.1.0.js"></script>
        <script src="jquery.eraser.js"></script>
        
        <script>
            
            //刮刮卡相关方法
            function initCard( event ) 
                $("#guaguaImg").eraser(
                    "size":20,
                    completeRatio: .5,  //擦到百分之多少清屏
                    completeFunction: function()
                        remove();
                        alert("恭喜您获得"+$("#card").html());
                    
                );
            
            
            function remove(event) 
                $("#guaguaImg").eraser(‘clear‘);
            
            
            function reset(event) 
                $("#guaguaImg").eraser(‘reset‘);
            
            
            function grow(event) 
                $("#guaguaImg").eraser("size",200);
            
            
            //初始化刮刮卡
            window.onload = function() 
              initCard();
            
                        
        </script>
        
        
    </body>
</html>

效果如图：

技术图片

以上是关于js实现刮刮卡抽奖的主要内容，如果未能解决你的问题，请参考以下文章

php中奖概率算法，可用于刮刮卡，大转盘等抽奖算法

中奖概率算法（php 可用于刮刮卡，大转盘等抽奖算法）

php中奖概率算法，可用于刮刮卡，大转盘等抽奖算法

js实现画布绘图橡皮擦除刮刮卡效果

游戏客户端实现刮刮乐效果

php抽奖算法