完美实现刮刮乐抽奖（该有的都有），html+css+jquery实现

愛芳芳

已于 2022-10-17 18:32:58 修改

阅读量2.6k

点赞数

分类专栏：前端开发它不香么文章标签： html css jquery web

于 2022-10-17 18:05:46 首次发布

本文链接：https://blog.csdn.net/lucky_fang/article/details/127370228

版权

前端开发它不香么专栏收录该内容

77 篇文章

订阅专栏

1.项目目录

源码下载

static （静态文件）
- css （样式）
- font （字体）
- image （图片）
- js （脚本代码，刮刮卡效果，中奖处理）
- picture （图片）
awards.html （中奖订单列表页面，配送地址录入窗口、奖品须知窗口）
index.html （首页刮奖，活动规则窗口，中奖弹窗，奖品说明，合作伙伴广告）

2.首页

在这里插入图片描述

1.loading加载

<!--页面加载-->
<div class="loading-box">
	<div class="loading"></div>
</div>

在这里插入图片描述

2.活动规则

<!--顶部图片-->
<div class="header-img">
	<img src="static/picture/header.png" alt="" class="img-res">
	<a href="#" class="awards-rule">活动规则 <span> <img src="static/picture/right.png" alt=""></span></a>
</div>

<!--游戏规则弹窗-->
<div id="mask-rule" class="mask-bg">
	<div class="box-rule">
		<h2 class="web-font">活动规则</h2>
		<span id="close-rule" class="close-icon">×</span>
		<div class="con">
			<div class="text">
				活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则
			</div>
			<div class="kown-btn web-font">
				我知道了
			</div>
		</div>
	</div>
</div>

在这里插入图片描述

3.奖品说明

<!--奖品中心-->
<div class="awards-center">
	<div class="center-title web-font">
		奖品说明
	</div>
	<div class="awards-list">
		<div class="flex">
			<div class="awards-img">
				<img src="static/picture/iphone13.png" alt="" class="img-res">
			</div>
			<div class="flex-item">
				<div class="dis-table">
					<h2>一等奖</h2>
					<p class="two-line">
						Apple iPhone 13 (A2634) 128GB 粉色 支持移动联通电信5G 双卡双待手机
					</p>
				</div>
			</div>
		</div>
		<div class="flex">
			<div class="awards-img">
				<img src="static/picture/iphone13.png" alt="" class="img-res">
			</div>
			<div class="flex-item">
				<div class="dis-table">
					<h2>二等奖</h2>
					<p class="two-line">
						Apple iPhone 13 (A2634) 128GB 粉色 支持移动联通电信5G 双卡双待手机
					</p>
				</div>
			</div>
		</div>
		<div class="flex">
			<div class="awards-img">
				<img src="static/picture/iphone13.png" alt="" class="img-res">
			</div>
			<div class="flex-item">
				<div class="dis-table">
					<h2>三等奖</h2>
					<p class="two-line">
						Apple iPhone 13 (A2634) 128GB 粉色 支持移动联通电信5G 双卡双待手机
					</p>
				</div>
			</div>
		</div>
		<div class="flex">
			<div class="awards-img">
				<img src="static/picture/iphone13.png" alt="" class="img-res">
			</div>
			<div class="flex-item">
				<div class="dis-table">
					<h2>四等奖</h2>
					<p class="two-line">
						Apple iPhone 13 (A2634) 128GB 粉色 支持移动联通电信5G 双卡双待手机
					</p>
				</div>
			</div>
		</div>
		<div class="see-btn">
			<a href="awards.html" class="web-font">查看我的奖品</a>
		</div>
		<h2 class="center-title web-font">合作伙伴</h2>
		<a href="https://blog.csdn.net/lucky_fang">
			<img src="static/picture/cooperation.jpg" alt="" class="img-res">
		</a>
	</div>
</div>

4.刮卡，最重要一步

<!--刮刮乐核心区域-->
<div class="awards-box">
	<img src="static/picture/box.png" alt="" class="img-res">
	<div class="awards-panel">
		<div class="awbox">
			<div class="aw-content">
				<div id="mask_img_bg">
					<p>iphone 13</p>
				</div>
				<img id="redux" src="static/picture/m2.png" class="img-res">
			</div>
		</div>
		<div id="canvas-mask">
			<a id="btn" href="javascript:;">
				<img src="static/picture/begin.png" alt="" class="img-res">
			</a>
			<p>您今天还有<span id="change">10</span>次刮奖机会</p>
		</div>
	</div>
</div>

js脚本在h5_game.js，看源码注释就明白了

//点击开始刮奖按钮
    $btn.click(function () {
        //随机生成奖项
        var a = ["很遗憾,您并未中奖", "iPhone 13 Pro", "iPhone 12 Mini", "iPhone 11"]
        //中奖概率
        var num = Math.floor(Math.floor(Math.random() * 999));
        let item = 0;
        if (num >= 0 && num <100) {
            item = 2 // 0-99
        }else if (num >= 100 && num <300){
            item = 3 // 100-299
        }else if (num >= 600 && num <999){
            item = 1 // 600-998
        }else{
            item = 0 // 999
        } 
        //中奖率
        $(".awbox").attr('data-a',item); //保存Item值
        if (data.count > 0) {
            data.count--;//减少抽奖次数
            $("#change").text(data.count); //替换剩余抽奖次数
            $(".awbox").show(); //抽奖区域显示    
            if (item > 0) {
                $("#atext,#mask_img_bg p").html(a[item]); //替换所得奖项
            }
            if (item == 0) {
                $("#mask_img_bg").html("<p><span  class='web-font'>很遗憾，您未中奖</span><br/> <a class='agine'><img src='../assets/images/flash.png'>再刮一次</a></p>");
                $(".agine").on("click", function () {
                    $('#redux').eraser('reset'); //涂抹板重置  
                    $canvasMask.show();
                    $(".awbox").hide();
                    $('#redux').show();
                });
            };
            $('#redux').eraser({
                size: 20,   //设置橡皮擦大小
                completeRatio: .6, //设置擦除面积比例
                completeFunction: showResetButton,  //大于擦除面积比例触发函数
            });
            $canvasMask.hide();
        } else {
            alert("没有次数了"); //抽奖次数用完
            $("#btn img").attr('src', "assets/images/cant.png");  //替换抽奖次数图片
        };

    });
    
	/*中奖后点击灰色区域隐藏*/
    $(".gole-awards .mask").click(function () {
        $("html,body").removeClass("overHiden");
        window.event ? (window.event.cancelBubble = true) : e.stopPropagation();
        $('#redux').eraser('reset'); //涂抹板重置
        $(".gole-awards").fadeOut(300);
        $(".awbox").hide();
        $canvasMask.show();
    })

刮卡和中奖效果：
在这里插入图片描述

点击马上领取，进入

3.订单列表页

1.效果图

在这里插入图片描述

<!---用户奖品-->
<div class="user-awards">
	<div class="flex">
		<div class="info-icon">
			<img src="static/picture/info-1.png" alt="" class="img-res">
		</div>
		<div class="flex-item">
			<p class="name">lovefang<span class="phone">123456789</span> </p>
		</div>
	</div>
	<div class="local-info">
		北京一环帝国大厦
	</div>
	<div class="awards-name">
		<div class="flex">
			<div class="awards-img">
				<img src="static/picture/12.png" alt="" class="img-res">
			</div>
			<div class="flex-item">
				<div class="dis-table">
					<h2>一等奖</h2>
					<p class="two-line">
						Apple iPhone 13 (A2634) 128GB 粉色 支持移动联通电信5G 双卡双待手机
					</p>
				</div>
			</div>
			<div class="right-bar">
			</div>
		</div>
	</div>
	<div class="awards-p">
		<p>活动名称：20220910第一期</p>
		<p>配送方式：邮寄</p>
		<p>中奖时间：2022-09-10 14:09:58</p>
		<p>奖品状态：已发放</p>
		<p>物流单号：顺丰快递878667655909898</p>
	</div>
</div>

2.奖品须知窗口

在这里插入图片描述

 <!--奖品信息--> 
 <div id="mask-awards" class="mask-bg">
	<div class="box-rule">
		<h2 class="web-font">奖品须知</h2>
		<span id="close-rule" class="close-icon">×</span>
		<div class="con">
			<div class="text">
				奖品须知奖品须知奖品须知奖品须知奖品须知奖品须知奖品须知奖品须知奖品须知
			</div>
			<div class="kown-btn web-font">
				我知道了
			</div>
		</div>
	</div>
</div>

3.录入收货信息

在这里插入图片描述

<!--提交信息--> 
<div id="mask-rule" class="mask-bg">
	<div class="box-rule">
		<span id="close-rule" class="close-icon">×</span>
		<div class="con">
			<div class="weui-cells weui-cells_form">
				<label for="js_input1" class="weui-cell">
					<div class="weui-cell__hd"><span class="weui-label">姓名</span></div>
					<div class="weui-cell__bd">
						<input id="js_input1" class="weui-input" placeholder="填写本人姓名">
					</div>
				</label>
				<label for="js_input2" class="weui-cell">
					<div class="weui-cell__hd"><span class="weui-label">电话</span></div>
					<div class="weui-cell__bd">
						<input id="js_input2" class="weui-input" placeholder="填写本人电话">
					</div>
				</label>
				<label for="js_input3" class="text-area">
					<div class="weui-cell__hd"><span class="weui-label">详细地址</span></div>
					<div class="weui-cell__bd">
						<textarea class="weui-textarea" placeholder="请描述详细地址" rows="3"></textarea>
					</div>
				</label>
			</div>
			<div class="weui-cells__title">*收货信息一经提交无法修改</div>
		</div>
		<div class="updata-btn">
			提交
		</div>
	</div>
</div>

4.源码下载

5.题外话，demo 采用了画布实现

canvas

HTML5新增标签
Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。
Canvas 对象表示一个 HTML 画布元素 -。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。

定义和用法

你可以直接在该对象上指定宽度和高度，但是，其大多数功能都可以通过CanvasRenderingContext2D 对象获得。这是通过 Canvas 对象的getContext() 方法并且把直接量字符串 “2d” 作为唯一的参数传递给它而获得的。

<canvas> 标记在 Safari 1.3 中引入，在制作此参考页时，它在 Firefox 1.5 和 Opera 9 中也得到了支持。在 IE 中，<canvas> 标记及其 API 可以使用位于excanvas点sourceforge点net的 ExplorerCanvas 开源项目来模拟。
提示：如果希望学习如何使用 <canvas> 来绘制图形，可以访问 Mozilla 提供的Canvas 教程（英文）以及相应的中文 Canvas 教程。

发展历史
这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。

标记由 Apple 在 Safari 1.3 Web 浏览器中引入。对 HTML 的这一根本扩展的原因在于，HTML 在 Safari 中的绘图能力也为 Mac OS X 桌面的 Dashboard 组件所使用，并且 Apple 希望有一种方式在 Dashboard 中支持脚本化的图形。
Firefox 1.5 和 Opera 9 都跟随了 Safari 的引领。这两个浏览器都支持 <canvas> 标记。

我们甚至可以在 IE 中使用 <canvas> 标记，并在 IE 的 VML 支持的基础上用开源的 JavaScript 代码（由 Google 发起）来构建兼容性的画布。

<canvas> 的标准化的努力由一个 Web 浏览器厂商的非正式协会在推进， <canvas> 已经成为 HTML 5 草案中一个正式的标签。

差异
<canvas> 标记和 SVG以及 VML 之间的一个重要的不同是，<canvas> 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。
这两种方式在功能上是等同的，任何一种都可以用另一种来模拟。从表面上看，它们很不相同，可是，每一种都有强项和弱点。例如，SVG 绘图很容易编辑，只要从其描述中移除元素就行。

要从同一图形的一个 <canvas> 标记中移除元素，往往需要擦掉绘图重新绘制它。

标记绘图
大多数 Canvas 绘图 API 都没有定义在 <canvas> 元素本身上，而是定义在通过画布的getContext() 方法获得的一个“绘图环境”对象上。

Canvas API 也使用了路径的表示法。但是，路径由一系列的方法调用来定义，而不是描述为字母和数字的字符串，比如调用 beginPath() 和 arc() 方法。

一旦定义了路径，其他的方法，如 fill()，都是对此路径操作。绘图环境的各种属性，比如 fillStyle，说明了这些操作如何使用。
注释：Canvas API 非常紧凑的一个原因上它没有对绘制文本提供任何支持。要把文本加入到一个 <canvas> 图形，必须要么自己绘制它再用位图图像合并它，或者在 <canvas> 上方使用 CSS 定位来覆盖 HTML 文本。

Canvas 对象的属性
height 属性
画布的高度。和一幅图像一样，这个属性可以指定为一个整数像素值或者是窗口高度的百分比。当这个值改变的时候，在该画布上已经完成的任何绘图都会擦除掉。默认值是 150。

width 属性
画布的宽度。和一幅图像一样，这个属性可以指定为一个整数像素值或者是窗口宽度的百分比。当这个值改变的时候，在该画布上已经完成的任何绘图都会擦除掉。默认值是 300。

方法
描述
getContext()
返回一个用于在画布上绘图的环境。