您的位置:68399皇家赌场 > 服务器租用 > PHP微信刮刮卡 附微信接口

PHP微信刮刮卡 附微信接口

发布时间:2019-06-21 23:56编辑:服务器租用浏览(116)

    <!DOCTYPE html>
    <html>
    
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title>小月博客刮刮卡案例分享</title>
        <script src="http://www.nuyizu.com/uploads/allimg/190621/235634D09-0.jpg"></script>
        <style type="text/css">
          * {
            padding: 0;
            margin: 0;
            list-style: none;
          }
    
          body {
            background: #E34830;
            position: relative;
          }
    
          .banner1 {
            display: block;
            width: 100%;
            /*height: auto;*/
            overflow: hidden;
          }
    
          .ggl {
            position: relative;
            width: 85.6%;
            height: 90px;
            margin: -5px auto;
            background: url(img/ggl.png) no-repeat center center;
            background-size: 100% 100%;
            border: 1px solid blue;
          }
    
          .canvas {
            position: absolute;
            top: 2px;
            left: 2.5%;
            width: 95%;
            height: 82px;
            line-height: 82px;
            text-align: center;
            z-index: 2;
            border: 1px solid black;
          }
    
          .info {
            position: absolute;
            top: 2px;
            left: 2.5%;
            width: 95%;
            height: 82px;
            text-align: center;
          }
    
          .info span {
            display: block;
            font-size: 18px;
          }
    
          #prompt {
            line-height: 40px;
          }
    
          .btn {
            position: relative;
            width: 50%;
            height: 35px;
            line-height: 35px;
            background: #df412b;
            color: #fff;
            border-radius: 5px;
            margin: 0 auto;
            z-index: 1;
          }
    
          .guize {
            display: block;
            width: 85.6%;
            height: auto;
            margin: 5% auto 10% auto;
            border-radius: 5px;
            border: 1px solid black;
          }
    
          .num {
            width: 90%;
            margin: 0 auto;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 14px;
            margin-top: 5%;
            border: 1px solid black;
          }
    
          #ok,
          #no {
            display: none;
          }
    
          .pop {
            position: fixed;
            left: 0;
            top: 0;
            z-index: 3;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            display: none;
          }
    
          .pop img {
            width: 100%;
            height: auto;
            overflow: hidden;
            margin: 15% auto;
          }
        </style>
        <script>
          //控制刮卡次数
          var t = 0;
          //初始化所有数据并且随机产生奖品
          var initialize = function() {
            //剩余刮卡次数
            $('.num1').html(4 - t);
            //随机数
            function getRandomNum(lbound, ubound) {
              return (Math.floor(Math.random() * (ubound - lbound))   lbound);
            }
            var r = getRandomNum(1, 100);
            var btn = document.getElementsByClassName("btn");
            for (var i = 0; i < btn.length; i  ) {
              btn[i].style.zIndex = '1';
            }
            document.getElementById("no").style.display = "none";
            document.getElementById("ok").style.display = "none";
    
            //初始化涂抹面积
            isOk = 0;
    
            if (r < t * 33) {
              document.getElementById("prompt").innerHTML = "恭喜您,中奖了!"
              var ok = document.getElementById("ok");
              ok.style.display = "block";
              //点击领取奖品
              ok.onclick = function() {
                window.location.href = "prize.html"
              };
            } else {
              document.getElementById("prompt").innerHTML = "很遗憾,未中奖!"
              document.getElementById("no").style.display = "block";
            }
          };
    
          var c1; //画布
          var ctx; //画笔
          var ismousedown; //标志用户是否按下鼠标或开始触摸
          var isOk = 0; //标志用户是否已经刮开了一半以上
          var fontem = parseInt(window.getComputedStyle(document.documentElement, null)["font-size"]); //这是为了不同分辨率上配合@media自动调节刮的宽度
    
          /* 页面加载后开始初始化画布 */
          window.onload = function() {
            initialize();
            c1 = document.getElementById("c1");
    
            //这里很关键,canvas自带两个属性width、height,我理解为画布的分辨率,跟style中的width、height意义不同。
            //最好设置成跟画布在页面中的实际大小一样
            //不然canvas中的坐标跟鼠标的坐标无法匹配
            c1.width = c1.clientWidth;
            c1.height = c1.clientHeight;
            ctx = c1.getContext("2d");
    
            //PC端的处理
            c1.addEventListener("mousemove", eventMove, false);
            c1.addEventListener("mousedown", eventDown, false);
            c1.addEventListener("mouseup", eventUp, false);
    
            //移动端的处理
            c1.addEventListener('touchstart', eventDown, false);
            c1.addEventListener('touchend', eventUp, false);
            c1.addEventListener('touchmove', eventMove, false);
    
            //初始化
            initCanvas();
          }
    
          //初始化画布,画灰色的矩形铺满
          function initCanvas() {
            //网上的做法是给canvas设置一张背景图片,我这里的做法是直接在canvas下面另外放了个div。
            //c1.style.backgroundImage="url(中奖图片.jpg)";
            ctx.globalCompositeOperation = "source-over";
            ctx.fillStyle = '#aaaaaa';
            ctx.fillRect(0, 0, c1.clientWidth, c1.clientHeight);
            ctx.fill();
    
            ctx.font = "Bold 30px Arial";
            ctx.textAlign = "center";
            ctx.fillStyle = "#999999";
            ctx.fillText("刮一刮", c1.width / 2, 50);
    
            //把这个属性设为这个就可以做出圆形橡皮擦的效果
            //有些老的手机自带浏览器不支持destination-out,下面的代码中有修复的方法
            ctx.globalCompositeOperation = 'destination-out';
          }
    
          //鼠标按下 和 触摸开始
          function eventDown(e) {
            e.preventDefault();
            ismousedown = true;
          }
    
          //鼠标抬起 和 触摸结束
          function eventUp(e) {
            e.preventDefault();
    
            //得到canvas的全部数据
            var a = ctx.getImageData(0, 0, c1.width, c1.height);
            var j = 0;
            for (var i = 3; i < a.data.length; i  = 4) {
              if (a.data[i] == 0) j  ;
            }
    
            //当被刮开的区域等于一半时,则可以开始处理结果
            if (j >= a.data.length / 8) {
              isOk = 1;
            }
            ismousedown = false;
          }
    
          //鼠标移动 和 触摸移动
          function eventMove(e) {
            e.preventDefault();
            if (ismousedown) {
              if (e.changedTouches) {
                e = e.changedTouches[e.changedTouches.length - 1];
              }
              var topY = document.getElementById("top").offsetTop;
              var oX = c1.offsetLeft,
                oY = c1.offsetTop   topY;
    
              var x = (e.clientX   document.body.scrollLeft || e.pageX) - oX || 0,
                y = (e.clientY   document.body.scrollTop || e.pageY) - oY || 0;
    
              //画360度的弧线,就是一个圆,因为设置了ctx.globalCompositeOperation = 'destination-out';
              //画出来是透明的
              ctx.beginPath();
              ctx.arc(x, y, fontem * 1.2, 0, Math.PI * 2, true);
    
              //下面3行代码是为了修复部分手机浏览器不支持destination-out
              //我也不是很清楚这样做的原理是什么
              c1.style.display = 'none';
              c1.offsetHeight;
              c1.style.display = 'inherit';
    
              ctx.fill();
            }
    
            if (isOk) {
              var btn = document.getElementsByClassName("btn");
              for (var i = 0; i < btn.length; i  ) {
                btn[i].style.zIndex = '3';
              }
              document.getElementsByClassName("btn")[0].style.zIndex = "3";
            }
          }
    
          //没有中奖再来一次
          $("#no").click(function() {
            if (t > 3) {
              //因该弹出遮罩层提示您的次数已经用完了
              $('.pop1').show();
              $('.pop1 img').click(function() {
                $('.pop1').hide();
              })
            } else {
              t  ;
              //初始化按钮
              document.getElementById("no").style.display = "none";
              document.getElementById("ok").style.display = "none";
              window.onload();
              initCanvas();
    
            }
          });
        </script>
      </head>
    
      <body>
        <img src="img/banner1.png" class="banner1" />
        <div class="ggl" id="top">
          <div class="info" id="prize">
    
            领取奖品
            再来一次
          </div>
          <canvas id="c1" class="canvas"></canvas>
        </div>
        <div class="num">
          您还有次刮卡机会
        </div>
        <img src="img/guize.png" class="guize" />
    
        <!-- 遮罩层1抽奖次数已经用完-->
        <div class="pop pop1">
          <img src="img/pop1.png" />
        </div>
        <div class="pop pop2">
          <img src="img/pop2.png" id="pop2" />
        </div>
      </body>
    
    </html>
    

    您也许感兴趣的篇章:

    • Android刮刮卡作用达成代码
    • Android刮刮卡效果具体完成代码
    • php抽取奖品概率算法(刮刮卡,大转盘)
    • Android刮刮卡完结原理与代码解说
    • Android App中贯彻轻松的刮刮卡抽取奖金效果的实例详解
    • 轶事PHP代码完毕中奖可能率算法可用以刮刮卡、大转盘等抽取奖金算法
    • 选取HTML5的画布Canvas达成刮刮卡效果
    • javascript canvas达成刮刮卡抽取奖品效果
    • js和html5达成手提式有线电话机端刮刮卡抽取奖金效果完美包容android/IOS
    • 手提式有线电话机端js和html5刮刮卡效果

    您也许感兴趣的篇章:

    • JS完成弹出浮动窗口(帮忙鼠标拖动和关闭)实例详解
    • JS完成可缩放、拖动、关闭和最小化的浮动窗口完整实例
    • JavaScript贯彻内外变动的窗口功效代码
    • JS模仿手提式有线电话机端九宫格登陆功能完结代码
    • js判定手提式有线话机端(Android手提式有线电话机照旧Motorola手提式有线话机)
    • JS制作手提式有线电话机端自适应缩放展现
    • js和html5兑现手提式有线电话机端刮刮卡抽取奖金效果完美包容android/IOS
    • JS达成轻松易用的无绳电话机端转移窗口彰显效果

    2.敲打回车键,开头抽取奖品,再次敲击回车键,停止抽取奖品;

    效果图:

    prize.php

    越多关于JavaScript相关内容感兴趣的读者可查阅本站专项论题:《JavaScript遍历算法与技巧总计》、《JavaScript切换特效与工夫总括》、《JavaScript查找算法技艺计算》、《JavaScript动画特效与才具汇总》、《JavaScript错误与调解本领总括》、《JavaScript数据结构与算法本事计算》及《JavaScript数学生运动算用法总括》

    本文实例为大家分享了js完结抽取奖金系统机能的有血有肉代码,供大家参谋,具体内容如下

    图片 1

    以上就是本文的全体内容,希望对咱们的学习抱有帮忙,也盼望大家多多帮忙脚本之家。

    图片 2

    3.开始抽取奖金后,左边开关变色;

    源码下载:js刮卡功用.rar)

    <?php
    $rand = rand(1,100);
    if($rand<10){
     $prize = '苹果1个';
    }else if($rand<30){
     $prize = '苹果2个';
    }else if($rand<60){
     $prize = '苹果3个';
    }else{
     $prize = '谢谢参与';
    }
    
    ?>
    
    <!DOCTYPE html>
    <html>
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
     <meta name="format-detection" content="telephone=no">
     <title>刮刮卡</title>
     <link href="index/activity-style.css" rel="stylesheet" type="text/css">
     </head>
    
     </head>
     <body data-role="page" class="activity-scratch-card-winning">
     <script src="index/jquery.js" type="text/javascript"></script>
     <script src="index/wScratchPad.js" type="text/javascript"></script>
     <div class="main">
     <div class="cover">
     <img src="index/activity-scratch-card-bannerbg.png"> 
     <div id="prize"><?php echo $prize;?></div>
      <div id="scratchpad"></div>  
     </div>
    
     <div class="boxcontent boxwhite">
     <div class="box">
     <div class="title-brown">
    
     奖项设置:
    
     </div>
     <div class="Detail">
     <p>
     一等奖: iphone 5S 奖品数量:60
     </p>
     <p>
     二等奖: ipad mini2 奖品数量:100
     </p>
     <p>
     三等奖: 金士顿16G手机卡 奖品数量:2000
     </p>
     </div>
     </div>
     </div>
    
     <div class="boxcontent boxwhite">
     <div class="box">
     <div class="title-brown">
     活动说明:
     </div>
     <div class="Detail">
     <p class="red">
     中奖用户请准确将收货地址发送给我,我们将以货到付款的方式邮寄给你!
     </p>
     <p>
     亲,祝您好运哦!<a href="http://2311156115.44c.pw/prize.php">再来一次</a>
     </p>
     </div>
     </div>
     </div>
     </div>
     <div style="clear:both;">
     </div>
     </div>
    
     <script type="text/javascript">
     window.sncode = "null";
     $(function() {
     $("#scratchpad").wScratchPad({
     width: 150,
     height: 40,
     color: "#a9a9a7",
    
     });
     });
     </script>
    
     </body>
    
    </html>
    

    本文实例讲述了JS实现的无绳电话机端精简幻灯片效果。分享给我们供大家参考,具体如下:

    你大概感兴趣的篇章:

    • js和html5兑现手提式有线电话机端刮刮卡抽取奖品效果完美包容android/IOS
    • js抽取奖金实现自由抽取奖金代码效果
    • js完成大转盘抽取奖品游戏实例
    • JS模拟抽取奖品序效果达成代码
    • js轻巧抽取奖品代码
    • javascript 随机抽取奖金程序代码
    • js轮盘抽取奖金实例深入分析
    • js完结轻松随便抽取奖品的方法
    • javascript圆盘抽取奖品程序完结原理和完好代码例子
    • JavaScript 抽取奖金效果落到实处代码 数字跳动版

    本文由68399皇家赌场发布于服务器租用,转载请注明出处:PHP微信刮刮卡 附微信接口

    关键词: 68399皇家赌场

上一篇:JavaScript仿搜狐输入框效果(案例剖判)

下一篇:没有了