基本信息
源码名称：微信刮刮卡(HTML5)实例源码下载
源码大小：0.29M
文件格式：.rar
开发语言：js
更新时间：2014-05-23
友情提示：（无需注册或充值，赞助后即可获取资源下载链接）
嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300
本次赞助数额为： 1 元×
微信扫码支付：1 元
×
请留下您的邮箱，我们将在2小时内将文件发到您的邮箱
源码介绍
<!DOCTYPE html>
<html>
<head>
<base href="http://www.apiwx.com/" />
<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/css/activity-style.css" rel="stylesheet" type="text/css">
</head>
<script type="text/javascript">
function loading(canvas, options) {
this.canvas = canvas;
if (options) {
this.radius = options.radius || 12;
this.circleLineWidth = options.circleLineWidth || 4;
this.circleColor = options.circleColor || 'lightgray';
this.moveArcColor = options.moveArcColor || 'gray';
} else {
this.radius = 12;
this.circelLineWidth = 4;
this.circleColor = 'lightgray';
this.moveArcColor = 'gray';
}
}
loading.prototype = {
show: function() {
var canvas = this.canvas;
if (!canvas.getContext) return;
if (canvas.__loading) return;
canvas.__loading = this;
var ctx = canvas.getContext('2d');
var radius = this.radius;
var me = this;
var rotatorAngle = Math.PI * 1.5;
var step = Math.PI / 6;
canvas.loadingInterval = setInterval(function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
var lineWidth = me.circleLineWidth;
var center = {
x: canvas.width / 2,
y: canvas.height / 2
};
ctx.beginPath();
ctx.lineWidth = lineWidth;
ctx.strokeStyle = me.circleColor;
ctx.arc(center.x, center.y 20, radius, 0, Math.PI * 2);
ctx.closePath();
ctx.stroke();
//在圆圈上面画小圆
ctx.beginPath();
ctx.strokeStyle = me.moveArcColor;
ctx.arc(center.x, center.y 20, radius, rotatorAngle, rotatorAngle Math.PI * .45);
ctx.stroke();
rotatorAngle = step;
},
100);
},
hide: function() {
var canvas = this.canvas;
canvas.__loading = false;
if (canvas.loadingInterval) {
window.clearInterval(canvas.loadingInterval);
}
var ctx = canvas.getContext('2d');
if (ctx) ctx.clearRect(0, 0, canvas.width, canvas.height);
}
};
</script>
</head>
<body data-role="page" class="activity-scratch-card-winning">
<script src="index/js/jquery.js" type="text/javascript"></script>
<script src="index/js/wScratchPad.js" type="text/javascript"></script>
<div class="main">
<div class="cover">
<img src="index/images/activity/activity-scratch-card-bannerbg.png">
<div id="prize">
</div>
<div id="scratchpad">
</div>
</div>
<div class="content">
<div id="zjl" style="display:none" class="boxcontent boxwhite">
<div class="box">
<div class="title-red">
<span>
恭喜你中奖了
</span>
</div>
<div class="Detail">
<p>
你中了：
<span class="red">
谢谢参与
</span>
</p>
<p>
兑奖SN码：
<span class="red" id="sncode">
null
</span>
</p>
<p class="red"></p>
<p>
<input name="" class="px" id="tel" value="" type="text" placeholder="用户请输入您的手机号">
</p>
<p>
<p>
<input class="pxbtn" name="提 交" id="save-btn" type="button" value="用户提交">
</p>
<p>
<input name="" class="px" id="parssword" type="password" value="" placeholder="商家输入兑奖密码">
</p>
<p>
<input class="pxbtn" name="提 交" id="save-btnn" type="button" value="商家提交">
</p>
</div>
</div>
</div>
<div class="boxcontent boxwhite">
<div class="box">
<div class="title-brown">
<span>
奖项设置：
</span>
</div>
<div class="Detail">
<p>
一等奖： 苹果手机8。奖品数量：60
</p>
<p>
二等奖： 苹果手机7 。奖品数量：100
</p>
<p>
三等奖： 苹果手机6 。奖品数量：200
</p>
</div>
</div>
</div>
<div class="boxcontent boxwhite">
<div class="box">
<div class="title-brown">
活动说明：
</div>
<div class="Detail">
<p class="red">
本次活动总共可以刮5次,你已经刮了0次,机会如果没用完重新进入本页面可以再刮!
</p>
<p>
亲，请点击进入刮刮奖活动页面，祝您好运哦！
</p>
</div>
</div>
</div>
</div>
<div style="clear:both;">
</div>
</div>
<script src="index/js/alert.js" type="text/javascript"></script>
<script type="text/javascript">
window.sncode = "null";
window.prize = "谢谢参与";
var zjl = false;
var num = 0;
var goon = true;
$(function() {
$("#scratchpad").wScratchPad({
width: 150,
height: 40,
color: "#a9a9a7",
scratchMove: function() {
num ;
if (num == 2) {
document.getElementById('prize').innerHTML = "谢谢参与";
}
if (zjl && num > 5 && goon) {
//$("#zjl").fadeIn();
goon = false;
$("#zjl").slideToggle(500);
//$("#outercont").slideUp(500)
}
}
});
//$("#prize").html("谢谢参与");
//loadingObj.hide();
//$(".loading-mask").remove();
});
$("#save-btn").bind("click", function() {
var btn = $(this);
var tel = $("#tel").val();
if (tel == '') {
alert("请输入手机号");
return
}
var submitData = {
tid: 438,
code: $("#sncode").text(),
tel: tel,
action: "setTel"
};
$.post('index.php?ac=acw', submitData,
function(data) {
if (data.success == true) {
alert(data.msg);
return
} else {}
},
"json")
});
// 保存数据
$("#save-btnn").bind("click", function() {
//var btn = $(this);
var submitData = {
tid: 438,
code: $("#sncode").text(),
parssword: $("#parssword").val(),
action: "setTel"
};
$.post('index.php?ac=acw', submitData,
function(data) {
if (data.success == true) {
alert(data.msg);
if (data.changed == true) {
window.location.href = location.href;
}
return
} else {}
},
"json")
});
</script>
</body>
</html>