<!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="js/jquery.min.js"></script>
<style type="text/css">
*{
padding: 0;
margin: 0;
list-style: none;
}
body{
background: #df412b;
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%;
}
.canvas{
position:absolute;
top:2px;
left:2.5%;
width:95%;
height:82px;
line-height:82px;
text-align:center;
z-index: 2;
}
.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;
}
.num{
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
font-size:14px;
margin-top: 5%;
}
#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>
</head>
<body>
<img src="img/banner1.png" class="banner1"/>
<div class="ggl" id="top">
<div class="info" id="prize">
<span id="prompt"></span>
<span class="btn" id="ok">领取奖品</span>
<span class="btn" id="no">再来一次</span>
</div>
<canvas id="c1" class="canvas"></canvas>
</div>
<div class="num">
您还有<span class="num1"></span>次刮卡机会
</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>
<script>
//控制刮卡次数
var t = 1;
//初始化所有数据并且随机产生奖品
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.getElem
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。【项目质量】:所有源码都经过严格测试,可以直接运行。功能在确认正常工作后才上传。【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。【附加价值】:项目具有较高的学习借鉴价值,也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。【沟通交流】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。鼓励下载和使用,并欢迎大家互相学习,共同进步。
资源推荐
资源详情
资源评论
收起资源包目录
【kk梦空间】html5手机端刮刮卡抽奖活动专题页面模板.zip (13个子文件)
js
jquery.min.js 82KB
img
pop1.png 22KB
share.png 6KB
ggl.png 4KB
share3.png 5KB
share2.png 14KB
banner2.png 35KB
guize.png 9KB
banner1.png 116KB
pop2.png 23KB
share1.png 6KB
prize.html 3KB
index.html 8KB
共 13 条
- 1
资源评论
心梓知识
- 粉丝: 6280
- 资源: 3万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功