h5九宮格抽獎

原創 羽筠 2020-07-06 09:26

九宮格抽獎-jquery：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=640, user-scalable=no">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<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">
<meta name="apple-mobile-web-app-title" content="">
<title>九宮格抽獎test</title>
<style type="text/css">
*{ margin:0px; padding:0px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0); cursor:pointer;}
html{ max-width:640px; margin:0 auto;}
body{ font-family:"PingFangSC-Regular","STHeitiSC-Light","微軟雅黑","Microsoft YaHei","sans-serif"; font-size:24px; line-height:1.6; color:#000;
    -webkit-user-select:none;user-select:none;
    -webkit-touch-callout:none;touch-callout:none;
}
li{ list-style:none;}
i{ font-style:normal;}
img{ vertical-align:middle;}

[v-cloak]{ display: none;}

.prize_body{ width: 540px; height: 540px; margin:20px auto; padding: 31px 0 0 31px; background: url(test/cj_body_bg.png); background-size: 100% 100%; position: relative;}
.prize_body_light{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;
	-webkit-animation: fadeIn .4s both infinite;
			animation: fadeIn .4s both infinite;
}
@-webkit-keyframes fadeIn{
	0%{ opacity:0;}
	100%{ opacity:1;}
}
@keyframes fadeIn{
	0%{ opacity:0;}
	100%{ opacity:1;}
}

.prize_body ul{ width: 478px; height: 478px; position: relative;}
.prize_body li{ width: 152px; height: 152px; line-height: 38px; text-align: center; color: #874ccf; font-size: 22px; border-radius:18px; position: absolute;
	display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center;
}
.prize_body li:not(.prize_li_btn){ background-color: #fff;}
/* .prize_li_1 , .prize_li_3 , .prize_li_5 , .prize_li_7{ color: #565656; background-color: #fff;}
.prize_li_2 , .prize_li_4 , .prize_li_6 , .prize_li_8{ color: #fff; background-color: #11a8d1;} */
.prize_body li.curr{ color: #fff; background-color: #ff7c92;}
.prize_li_1 , .prize_li_2 , .prize_li_3{ top: 0;}
.prize_li_4 , .prize_li_8{ top: 50%;
			-webkit-transform:translateY(-50%);
					transform:translateY(-50%);
}
.prize_li_5 , .prize_li_6 , .prize_li_7{ bottom: 0;}
.prize_li_1 , .prize_li_7 , .prize_li_8{ left: 0;}
.prize_li_2 , .prize_li_6{  left: 50%;
			-webkit-transform:translateX(-50%);
					transform:translateX(-50%);
}
.prize_li_3 , .prize_li_4 , .prize_li_5{ right: 0;}
.prize_body li:not(.prize_li_btn) img{ width: 116px; height: 83px; object-fit: contain;}

.prize_li_btn{ left: 50%; top: 50%; padding-top: 5px;
			-webkit-transform:translate(-50%,-50%);
					transform:translate(-50%,-50%);
}
.prize_li_btn img{ width: 100%; height: 100%;}
</style>
</head>

<body>


<section>
	<div class="prize_body">
		<img class="prize_body_light" src="test/cj_body_light.png" >
		<ul>
			<li class="prize_li_1">
				<p><img src="https://www.baidu.com/img/bd_logo1.png" ></p>
				<p>積分</p>
			</li>
			<li class="prize_li_2">
				<p><img src="https://www.baidu.com/img/bd_logo1.png" ></p>
				<p>實物</p>
			</li>
			<li class="prize_li_3">
				<p><img src="https://www.baidu.com/img/bd_logo1.png" ></p>
				<p>積分</p>
			</li>
			<li class="prize_li_4">
				<p><img src="https://www.baidu.com/img/bd_logo1.png" ></p>
				<p>謝謝參與</p>
			</li>
			<li class="prize_li_5">
				<p><img src="https://www.baidu.com/img/bd_logo1.png" ></p>
				<p>積分</p>
				
			</li>
			<li class="prize_li_6">
				<p><img src="https://www.baidu.com/img/bd_logo1.png" ></p>
				<p>實物</p>
			</li>
			<li class="prize_li_7">
				<p><img src="https://www.baidu.com/img/bd_logo1.png" ></p>
				<p>實物</p>
			</li>
			<li class="prize_li_8">
				<p><img src="https://www.baidu.com/img/bd_logo1.png" ></p>
				<p>謝謝參與</p>
			</li>
			<li class="prize_li_btn"><img src="test/cj_btn.png" /></li>
		</ul>
	</div>
</section>



<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
<script type="text/javascript">
window.onload = function(){
	
	//抽獎結果類別
	var getType = null; //1.積分。2.實物
	var getHasPrize = null; //是否中獎品
	
	
	
	
	///////////////////////////////////////////////////////////////////////
	
	//初始化抽獎所有相關參數
	function Initialize(){
		startKey = 1;
		afterKye = null;
		flag = null;
		timeOutNum = 100;
		timer = null;
		
		ifChou = null;
	}

	//獎品滾動切換
	var startKey = 1; //展示的獎品切換的 起始 KEY
	var afterKye = null; //最終 抽到的獎品的 KEY
	var flag = null; //爲true時,startKey == afterKye停止獎品切換
	var timeOutNum = 100; //抽獎時的切換時間(先快，獲取到抽獎結果後再慢，然後再停止)
	var timer = null;
	function prizeChoose(){
		startKey = startKey > 8 ? 1 : startKey ;
		// console.log(startKey);
		
		$('.prize_li_' + startKey).addClass('curr').siblings().removeClass('curr');
		if(startKey == afterKye && flag){
			clearTimeout(timer);
			
			setTimeout(function(){
				if(getHasPrize){
					// 中獎
					if(getType == 1){
						// 積分
					}
					if(getType == 2){
						// 實物
					}
				}else{
					// 未中獎
				}
				alert('結束');
			},800)
			
			Initialize();
		}
		startKey++;
	}
	
	//抽獎
	var ifChou = null;
	$('.prize_li_btn').on('click',function(){
		if(ifChou){
			return;
		}else{
			ifChou = true;
		}
		
		var sendData = {
			ticket : null,
			randstr : null,
		}
		
		var captcha1 = new TencentCaptcha('2601855520860', function (res) {
			//console.log(res);
			if (res.ret == 0) {
				sendData.ticket = res.ticket;
				sendData.randstr = res.randstr;
				
				// loadingToast('請稍候...');
				
				/*test*/
				var data = {
					status:1,
					key:4, //後端返回：1至8的值
					//haveNubmer:9999, //次數
					hasPrize:true, //是否中獎品
					prizeName:'獎品名稱', //獎品名稱
					type:2, //1.積分。2.實物
					info:'提示信息',
				}
				/*test*/
				
				// getAjax('獲得抽獎結果' , 'get' , sendData , function(data){
					if(data.status == 1){
						//抽獎成功
						timer = setInterval(prizeChoose,timeOutNum);
						
						//$('#haveNubmer').html(data.haveNubmer);
						
						getHasPrize = data.hasPrize; //是否中獎品
						if(getHasPrize){
							getType = data.type; //1.積分。2.實物
						}
						
						afterKye = data.key;
						setTimeout(function(){
							clearTimeout(timer);
							timeOutNum = 300;
							timer = setInterval(prizeChoose,timeOutNum);
							setTimeout(function(){
								flag = true;
							},2000)
						},1500)
					}else{
						dialog('溫馨提示',data.info);
						Initialize();
					}
					// $('#loadingToast').fadeOut('fast');
				// })
				
			} else if (res.ret == 2) {
				//點擊關閉按鈕
				ifChou = null;
			}
		});
		captcha1.show();
	});
}
</script>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

</body>
</html>

九宮格抽獎-vue.js：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=640, user-scalable=no">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<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">
<meta name="apple-mobile-web-app-title" content="">
<title>九宮格抽獎test</title>
<style type="text/css">
*{ margin:0px; padding:0px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0); cursor:pointer;}
html{ max-width:640px; margin:0 auto;}
body{ font-family:"PingFangSC-Regular","STHeitiSC-Light","微軟雅黑","Microsoft YaHei","sans-serif"; font-size:24px; line-height:1.6; color:#000;
    -webkit-user-select:none;user-select:none;
    -webkit-touch-callout:none;touch-callout:none;
}
li{ list-style:none;}
i{ font-style:normal;}
img{ vertical-align:middle;}

[v-cloak]{ display: none;}

.prize_body{ width: 540px; height: 540px; margin:20px auto; padding: 31px 0 0 31px; background: url(test/cj_body_bg.png); background-size: 100% 100%; position: relative;}
.prize_body_light{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;
	-webkit-animation: fadeIn .4s both infinite;
			animation: fadeIn .4s both infinite;
}
@-webkit-keyframes fadeIn{
	0%{ opacity:0;}
	100%{ opacity:1;}
}
@keyframes fadeIn{
	0%{ opacity:0;}
	100%{ opacity:1;}
}

.prize_body ul{ width: 478px; height: 478px; position: relative;}
.prize_body li{ width: 152px; height: 152px; line-height: 38px; text-align: center; color: #874ccf; font-size: 22px; border-radius:18px; position: absolute;
	display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center;
}
.prize_body li:not(.prize_li_btn){ background-color: #fff;}
/* .prize_li_1 , .prize_li_3 , .prize_li_5 , .prize_li_7{ color: #565656; background-color: #fff;}
.prize_li_2 , .prize_li_4 , .prize_li_6 , .prize_li_8{ color: #fff; background-color: #11a8d1;} */
.prize_body li.curr{ color: #fff; background-color: #ff7c92;}
.prize_li_1 , .prize_li_2 , .prize_li_3{ top: 0;}
.prize_li_4 , .prize_li_8{ top: 50%;
			-webkit-transform:translateY(-50%);
					transform:translateY(-50%);
}
.prize_li_5 , .prize_li_6 , .prize_li_7{ bottom: 0;}
.prize_li_1 , .prize_li_7 , .prize_li_8{ left: 0;}
.prize_li_2 , .prize_li_6{  left: 50%;
			-webkit-transform:translateX(-50%);
					transform:translateX(-50%);
}
.prize_li_3 , .prize_li_4 , .prize_li_5{ right: 0;}
.prize_body li:not(.prize_li_btn) img{ width: 116px; height: 83px; object-fit: contain;}

.prize_li_btn{ left: 50%; top: 50%; padding-top: 5px;
			-webkit-transform:translate(-50%,-50%);
					transform:translate(-50%,-50%);
}
.prize_li_btn img{ width: 100%; height: 100%;}
</style>
</head>

<body>


<section id="app" v-cloak>
	<div class="prize_body">
		<img class="prize_body_light" src="test/cj_body_light.png" >
		<ul>
			<li v-for="item in prizeList" :class="'prize_li_' + item.index + (item.index == startKey ? ' curr' : '')">
				<p><img :src="item.imgsrc" ></p>
				<p>{{item.prizeName}}</p>
			</li>
			<li @click="luckyDraw" class="prize_li_btn"><img src="test/cj_btn.png" /></li>
		</ul>
	</div>
</section>



<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
	var VM = new Vue({
		el:"#app",
		data:{
			// 頁面中獎品信息
			prizeList:[],
			
			ifChou : null, //是否正在抽獎中
			
			//抽獎結果類別
			getType : null, //1.積分。2.實物
			getHasPrize : null, //是否中獎品
			
			//獎品滾動切換所需參數
			startKey : 0, //展示的獎品切換的 起始 KEY
			afterKye : null, //最終 抽到的獎品的 KEY
			flag : null, //爲true時,startKey == afterKye停止獎品切換
			timeOutNum : 100, //抽獎時的切換時間(先快，獲取到抽獎結果後再慢，然後再停止)
			timer : null,
		},
		created() {
			let This = this;
		},
		mounted() {
			let This = this;
			
			This.getPrizeList();
		},
		watch() {
		},
		methods:{
			//獲取頁面中獎品信息
			getPrizeList(){
				let This = this;
				
				// loadingToast('加載中...');
				
				/*test*/
				var data = {
					status:1,
					list:[
						{id:'001',index:1,imgsrc:'https://www.baidu.com/img/bd_logo1.png',prizeName:'積分'},
						{id:'002',index:2,imgsrc:'https://www.baidu.com/img/bd_logo1.png',prizeName:'實物'},
						{id:'003',index:3,imgsrc:'https://www.baidu.com/img/bd_logo1.png',prizeName:'積分'},
						{id:'004',index:4,imgsrc:'https://www.baidu.com/img/bd_logo1.png',prizeName:'謝謝參與'},
						{id:'005',index:5,imgsrc:'https://www.baidu.com/img/bd_logo1.png',prizeName:'積分'},
						{id:'006',index:6,imgsrc:'https://www.baidu.com/img/bd_logo1.png',prizeName:'實物'},
						{id:'007',index:7,imgsrc:'https://www.baidu.com/img/bd_logo1.png',prizeName:'實物'},
						{id:'008',index:8,imgsrc:'https://www.baidu.com/img/bd_logo1.png',prizeName:'謝謝參與'},
					],
					info:'提示信息',
				}
				/*test*/
				
				// getAjax('獲得頁面中獎品信息' , 'get' , {} , function(data){
					if(data.status == 1){
						This.prizeList = data.list;
					}else{
						dialog('溫馨提示',data.info);
					}
					// $('#loadingToast').fadeOut('fast');
				// })
			},
			
			//初始化抽獎所有相關參數
			Initialize(){
				let This = this;
				
				This.startKey = 0;
				This.afterKye = null;
				This.flag = null;
				This.timeOutNum = 100;
				This.timer = null;
				
				This.ifChou = null;
			},
			
			//獎品滾動切換
			prizeChoose(){
				let This = this;
				
				This.startKey++;
				
				This.startKey = This.startKey > 8 ? 1 : This.startKey ;
				// console.log(This.startKey);
				
				if(This.startKey == This.afterKye && This.flag){
					clearTimeout(This.timer);
					// console.log(This.startKey);
					
					setTimeout(function(){
						if(This.getHasPrize){
							// 中獎
							if(This.getType == 1){
								// 積分
							}
							if(This.getType == 2){
								// 實物
							}
						}else{
							// 未中獎
						}
						alert('結束');
					},800)
					
					return;
				}
			},
			
			//抽獎
			luckyDraw(){
				let This = this;
				
				if(This.ifChou){
					return;
				}else{
					This.ifChou = true;
				}
				
				//初始化抽獎所有相關參數
				This.Initialize();
				
				var sendData = {
					ticket : null,
					randstr : null,
				}
				
				var captcha1 = new TencentCaptcha('2601855520860', function (res) {
					//console.log(res);
					if (res.ret == 0) {
						sendData.ticket = res.ticket;
						sendData.randstr = res.randstr;
						
						// loadingToast('請稍候...');
						
						/*test*/
						var data = {
							status:1,
							key:4, //後端返回：1至8的值
							//haveNubmer:9999, //次數
							hasPrize:true, //是否中獎品
							prizeName:'獎品名稱', //獎品名稱
							type:2, //1.積分。2.實物
							info:'提示信息',
						}
						/*test*/
						
						// getAjax('獲得抽獎結果' , 'get' , sendData , function(data){
							if(data.status == 1){
								//抽獎成功
								This.timer = setInterval(This.prizeChoose,This.timeOutNum);
								
								//$('#haveNubmer').html(data.haveNubmer);
								
								This.getHasPrize = data.hasPrize; //是否中獎品
								if(This.getHasPrize){
									This.getType = data.type; //1.積分。2.實物
								}
								
								This.afterKye = data.key;
								setTimeout(function(){
									clearTimeout(This.timer);
									This.timeOutNum = 300;
									This.timer = setInterval(This.prizeChoose,This.timeOutNum);
									setTimeout(function(){
										This.flag = true;
									},2000)
								},1500)
							}else{
								dialog('溫馨提示',data.info);
								This.Initialize();
							}
							// $('#loadingToast').fadeOut('fast');
						// })
						
					} else if (res.ret == 2) {
						//點擊關閉按鈕
						This.ifChou = null;
					}
				});
				captcha1.show();
			},
		}
	})
</script>
</body>
</html>

資源：

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

使用HTML+CSS製作逼真的紅色開關

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

海拥(haiyong.site) 2021-12-04 14:03:52

Appium上下文和H5測試(二)

{"type":"doc","content":[{"type":"heading","attrs":{"align":"center","level":2},"content":[{"type":"text","text":"堅持原創輸出

清菡 2020-11-30 20:23:54

基於React+Koa實現一個h5編輯器

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"前言"}]},{"t

徐小夕 2020-11-02 17:18:59

前端開發者們值得了解的 11 項前端技巧

不容錯過的 11 項 HTML/JS/CSS 技巧。 通過以下 HTML/CSS/JavaScript 相關技巧，希望能幫助大家填補一點點關於前端開發方面的知識空白。1.Datalist元素這項 HTML 元素的使用頻率極低，今天我們就要

Daniel Anderson 2020-10-24 07:03:58

CSS語法與規則 — 重學CSS

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockq

三钻 2020-09-30 14:39:01

實戰中學習瀏覽器工作原理 — HTML 解析與 CSS 計算

{"type":"doc","content":[{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null

三钻 2020-09-19 18:08:56

Flash 終將謝幕：微軟將於年底停止對 Flash 的支持

近日，微軟宣佈將於今年 12 月終止對 Adobe Flash Player 的支持，屆時，微軟旗下所有瀏覽器都將無法使用 Flash，Adobe 也不會在今年 12 月後發佈安全更新。早在 2017 年，Adobe、Apple、Face

李俊辰 2020-09-15 13:48:56

使用 Golang 和 HTML5 開發一個 MacOS App

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"前言"}]},{"t

郭旭东 2020-08-18 16:13:52

HTML5 canvas組件

canvas簡介 canvas標籤是用來繪製圖像的 canvas本身沒有繪畫的能力，僅僅是圖形的容器，相當於一塊畫板 必須要使用腳本完成繪製：JS canvas繪畫 <!DOCTYPE html> <html lang="

OliGit 2020-07-08 12:27:30

HTML5 03 Canvas介紹

<!doctype html> <html> <head></head> <body> <canvas width="500" height="800" style="background:yellow" id="canvas"

xinyuan_he 2020-07-08 08:58:18

HTML5 05 Canvas實例 鬧鐘

<!doctype html> <html> <head></head> <body> <canvas id="clock" width="500" height="500"> 您的瀏覽器不支持canvas標籤，無法看到時鐘

xinyuan_he 2020-07-08 08:58:18

HTML5 04 表單

<!doctype html> <html> <head></head> <body> <form action="http://localhost/test.php" method="post" id="register"></

xinyuan_he 2020-07-08 08:58:18

HTML5 02 音視頻介紹

<!doctype html> <html> <head></head> <body> <!--<video src="movie.webm" controls="controls"> 您的破瀏覽器都是古董早該換了，不然休想

xinyuan_he 2020-07-08 08:58:06

HTML5之啓動篇-檢測瀏覽器是否支持HTML5與第一個H5程序

通過編寫javaScript瞭解瀏覽器是否支持HTML5與第一次編寫HTML5 的Hello world程序 //觸發標準模式 <!DOCTYPE html> <html> <head> //charset=gb2312 字符

飘雨树 2020-07-08 07:38:48

爲什麼要用聲明

實例： 我們經常會看到類似這樣的代碼： [html] view plain copy <!DOCTYPE html>   <html>   <head>   <title>文檔的標題</title>   </he

java专栏 2020-07-08 03:00:54