在好例子网,分享、交流、成长!
您当前所在位置:首页js 开发实例常用JavaScript方法 → 微信刮刮卡(HTML5)实例源码下载

微信刮刮卡(HTML5)实例源码下载

常用JavaScript方法

下载此实例
  • 开发语言:js
  • 实例大小:0.29M
  • 下载次数:89
  • 浏览次数:9925
  • 发布时间:2014-05-23
  • 实例类别:常用JavaScript方法
  • 发 布 人:hunter
  • 所需积分:1
 相关标签: 刮刮卡

实例介绍

【实例简介】

【实例截图】



【核心代码】


<!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>


标签: 刮刮卡

实例下载地址

微信刮刮卡(HTML5)实例源码下载

不能下载?内容有错? 点击这里报错 + 投诉 + 提问

好例子网口号:伸出你的我的手 — 分享

网友评论

第 1 楼 a420478805 发表于: 2015-01-15 23:18 34
好东西,学习

支持(0) 盖楼(回复)

第 2 楼 笑了 发表于: 2015-04-21 16:31 32
我来说两句...阿达

支持(0) 盖楼(回复)

第 3 楼 hhpcanmy 发表于: 2015-05-13 13:08 26
学习,心灵鸡汤?

支持(0) 盖楼(回复)

第 4 楼 AOKI 发表于: 2015-07-03 19:16 31
积分好难啊 啊 啊

支持(0) 盖楼(回复)

第 5 楼 dafei3115 发表于: 2015-07-09 20:57 27
....

支持(0) 盖楼(回复)

第 6 楼 88123hui 发表于: 2015-09-11 16:00 15
感觉不错的

支持(0) 盖楼(回复)

第 7 楼 spqrbaby 发表于: 2015-09-22 10:44 36
我来说两句...怎么赚积分?

支持(0) 盖楼(回复)

第 8 楼 yangtthi 发表于: 2015-10-11 16:15 28
我来说两句...下载试试

支持(0) 盖楼(回复)

第 9 楼 小柚子 发表于: 2015-11-10 11:29 22
没有积分啊。。

支持(0) 盖楼(回复)

第 10 楼 thedb 发表于: 2015-11-23 15:37 20
根本没法下载啊,积分怎么赚??

支持(0) 盖楼(回复)

第 11 楼 天瓶 发表于: 2016-01-07 14:23 48

支持(0) 盖楼(回复)

第 12 楼 laohuang 发表于: 2016-03-21 15:47 28
我来说两句...不错

支持(0) 盖楼(回复)

第 13 楼 fttphttp 发表于: 2016-04-04 20:25 23
我看看看

支持(0) 盖楼(回复)

第 14 楼 lzqlzy 发表于: 2016-06-28 15:46 59
东西不错

支持(0) 盖楼(回复)

第 15 楼 seafly521 发表于: 2016-12-02 11:11 21
评论看看

支持(0) 盖楼(回复)

第 16 楼 大先生的你 发表于: 2017-06-02 17:15 46
我来说两句...下载试试

yangtthi 2015-10-11 16:15 28

有了给一份,谢谢

支持(0) 盖楼(回复)

发表评论

(您的评论需要经过审核才能显示)

查看所有16条评论>>

小贴士

感谢您为本站写下的评论,您的评论对其它用户来说具有重要的参考价值,所以请认真填写。

  • 类似“顶”、“沙发”之类没有营养的文字,对勤劳贡献的楼主来说是令人沮丧的反馈信息。
  • 相信您也不想看到一排文字/表情墙,所以请不要反馈意义不大的重复字符,也请尽量不要纯表情的回复。
  • 提问之前请再仔细看一遍楼主的说明,或许是您遗漏了。
  • 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦,又没人会搭理,于人于己都无利。
;
报警