html5手机验证转盘抽奖弹出提示框代码



194 775 259



特效描述:html5 手机验证 转盘抽奖 弹出提示框,html5点击转盘领奖抽奖代码

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/20160226.css">

2. 引入JS

<script src="js/jquery1.8.3.min.js"></script>
<script src="js/TweenMax.min.js"></script>
<script src="js/EasePack.js"></script>

3. HTML代码

		<!-- loading -->
		<div id="loading"></div>
		<!-- 图片展示部分 -->
		<article class="page ws20160229 td_choujiang">
			<header class="td_header">
				<img src="img/tada160509/td_icon03.png">
			</header>
			<div class="td_holder holder">
				<img class="td_xiongmao" src="img/tada160509/td_icon02.png">
				<img class="td_zhuanpan" src="img/tada160509/td_icon06.png">
				<div class="start">
					<img class="star" style="transform: rotate(12deg);" src="img/tada160509/xs_icon02.png">
					<img class="zi" src="img/tada160509/xs_icon06.png">
				</div>
				<div class="pack">
					<!-- <p>请输入手机号</p> -->
					<input style="width:100%;" id="phone" placeholder="输入手机号领取优惠券!" type="text">
				</div>
				<a id="submit" href="#">>初夏欢乐 “送”<</a>
				<a href="http://m.01zhuanche.com" class="tc xa_down">>下载手机APP<</a>
				<img class="logo" src="img/tada160509/td_icon01.png">
			</div>
		</article>
		<!-- 图片展示部分END -->
		<article id="tip">
			<div class="pack">
				<h1>温馨提示</h1>
				<p></p>
				<a href="#">确定</a>
			</div>
		</article>
		<script>
			var checkPhone = function(a)
			{
			    var patrn = /^((?:13|15|18|14|17)\d{9}|0(?:10|2\d|[3-9]\d{2})[1-9]\d{6,7})$/;
			    if (!patrn.exec(a)) return false;
			    return true;
			};
			    $(function(){
			        $(window).on("load",function(){
			            $("#loading").fadeOut();
			        })
			        // ========================================浮层控制
			         $("#tip .pack a").on("click",function(){
			            $("#tip").fadeOut()
			            $("#tip .pack p").html("")
			            return false;
			        })
			        function alerths(str){
			            $("#tip").fadeIn()
			            $("#tip .pack p").html(str)
			            return false;
			        }
			        // ========================================点击提交
			        var arr=[12,52,98,144,197,244,285,328]
			        $("#submit").on("click",function(){
			            var str=$("#phone").val()
			            if(str.length==11&&checkPhone(str)){
			               // 判断是不是11位手机号,为真提交
			               var num=Math.floor(Math.random()*8)
			               var deg=21600+arr[num]
			               TweenMax.set($(".ws20160229 .holder .start .star"),{rotation:0})
			               TweenMax.to($(".ws20160229 .holder .start .star"),3,{rotation:deg,ease:Quint.easeOut,onComplete:stophs})
			               TweenMax.set($(".ws20160229 .holder .start .zi"),{rotation:0})
			               TweenMax.to($(".ws20160229 .holder .start .zi"),3,{rotation:deg,ease:Quint.easeOut})
			               function stophs(){
			                TweenMax.set($(".ws20160229 .holder .start .zi"),{rotation:0,delay:0.3})
			                if(num==0){
			                    alerths("首汽租车 58元代金券")
			                }else if(num==1){
			                    alerths("999元 泰达宏利 货币基金")
			                }else if(num==2){
			                    alerths("首汽约车 50元礼包")
			                }else if(num==3){
			                    alerths("首汽租车   88元代金券  ")
			                }else if(num==4){
			                    alerths("5元泰达宏利 货币基金")
			                }else if(num==5){
			                    alerths("首汽约车   100元礼包  ")
			                }else if(num==6){
			                    alerths("首汽租车 300元代金券")
			                }else if(num==7){
			                    alerths("首汽约车 10元代金券 ")
			                }
			               }
			            }else{
			                alerths("请正确输入手机号!")
			            }
			            return false;
			        })
			    })
		</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 悬浮浮动漂浮 弹出层拖动 窗口提示框 滑动星星打分 浮动提示框 切换按钮 form表单 其他更多 图片广告 文字提示框 验证码 抽奖

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到