简单的积分抽奖

最新推荐文章于 2024-10-31 16:52:57 发布

qq_422512556

最新推荐文章于 2024-10-31 16:52:57 发布

阅读量101

点赞数

文章标签： elementui css vue.js

本文链接：https://blog.csdn.net/qq_43012432/article/details/100655103

版权

这是一个基于HTML和JavaScript的积分抽奖页面实现。用户点击抽奖按钮后，页面上的转盘进行旋转，模拟抽奖过程。转盘动画结束后，根据随机数判断用户获得的奖励，并通过AJAX与后台接口交互，更新用户的积分。页面还包含用户中奖记录的展示功能，用户可以查看历史中奖情况。若用户未登录，则提示登录。当网络超时时，会显示相应错误信息。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <title>积分抽奖</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
    <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, email=no" />
	<link rel="stylesheet" href="__CSS__/choujiang.css" type="text/css">
</head>
<body>
    <div class="turntable-bg">
        <!--<div class="mask"><img src="images/award_01.png"/></div>-->
        <div class="pointer"><img src="__IMG__/cj4.png" alt="pointer" style="cursor: pointer;"></div>
        <div class="rotate"><img id="rotate" src="__IMG__/cj3.png" alt="turntable"></div>
    </div>
    <div class="cj">
    	<div class="cj_t">中奖信息<span style="cursor: pointer;">我的中奖记录</span></div>
    	<ul>
    	{notempty name="$user_winning_new"}
        	{volist name="user_winning_new" id="vo"}
    		<li>{$vo.tel}<span>{$vo.title}</span></li>
    		{/volist}
    	{/notempty}
    	</ul>
    </div>
    <div class="layer" style="z-index:1000;"></div>
    <div class="zjBox" style="display:none;">
	    <div class="zj">
	    	<div class="cj_t">我的中奖记录<span style="cursor: pointer;">关闭</span></div>
	    	<ul>
	    	{notempty name="$user_winning"}
        		{volist name="user_winning" id="vo"}
    			<li>{$vo.add_time}<span>{$vo.title}</span></li>
	    		{/volist}
    		{/notempty}
	    	</ul>
	    </div>
    </div>
    <input type="hidden" value="{$user_id}" id="user_id">
    <script type="text/javascript" src="__JS__/jquery.min.js"></script>
	<script type="text/javascript" src="__JS__/awardRotate.js"></script>
	<script type="text/javascript">
	$(function (){
		$(".zj .cj_t span").on("click",function(){
			$(".zjBox").hide();
		})
		$(".cj .cj_t span").on("click",function(){
			$(".zjBox").show();
		})
		var rotateTimeOut = function (){
			$('#rotate').rotate({
				angle:0,
				animateTo:2160,
				duration:8000,
				callback:function (){
					alert('网络超时，请检查您的网络设置！');
				}
			});
		};
		var bRotate = false;

		var rotateFn = function (awards, angles, txt){
			bRotate = !bRotate;
			$('#rotate').stopRotate();
			$('#rotate').rotate({
				angle:0,
				animateTo:angles+1800,
				duration:8000,
				callback:function (){
					$(".layer").html('<p>'+txt+'</p>').css("display","table").delay(3000).fadeOut();
					bRotate = !bRotate;
				}
			})
		};
		$('.pointer').click(function (){
			if(bRotate)return;
			var item = rnd(0,7);

			var user_id = $("#user_id").val();
			if(user_id == ''){
				$(".layer").html('<p>请先登录</p>').css("display","table").delay(3000).fadeOut();
				return false;
			}
            var numPlus = 5;
            switch (item) {
				case 0:
					ajaxCj(user_id, numPlus ,0, 337, '恭喜你获得5积分');
					break;
				case 1:
					ajaxCj(user_id, numPlus, 1, 26, '恭喜你获得10积分');
					break;
				case 2:
					ajaxCj(user_id, numPlus, 2, 88, '恭喜你获得100积分');
					break;
				case 3:
					ajaxCj(user_id, numPlus, 3, 137, '谢谢参与');
					break;
				case 4:
					ajaxCj(user_id, numPlus, 4, 185, '恭喜你获得10积分');
					break;
				case 5:
					ajaxCj(user_id, numPlus, 5, 235, '恭喜你获得5积分');
					break;
			}
		});
		function ajaxCj(user_id, numPlus, n , m, msg){
			$.ajax({
	            url:"{:url('api/details/intrgralRaffle')}",
	            data:{user_id:user_id, numPlus:numPlus},
	            type:"POST",
	            success: function(res){
	                var re=JSON.parse(res);
	                // var re=res;
	                if(re.code == 200){
						rotateFn(n, m, msg);
	                }else if(re.code == 401){
						$(".layer").html('<p>积分不足</p>').css("display","table").delay(3000).fadeOut();
	                }else{
						$(".layer").html('<p>抽奖失败</p>').css("display","table").delay(3000).fadeOut();
	                }
	            }
	        });
		}
	});
	
	function rnd(n, m){
		return Math.floor(Math.random()*(m-n+1)+n)
	}
	</script>
</body>
</html>