以下是 HTML5手机验证抽奖领券代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no">
<meta http-equiv="x-rim-auto-match" content="none">
<meta name="viewport" content="initial-scale=1, minimum-scale=1 maximum-scale=1, user-scalable=no">
<title>HTML5手机验证抽奖领券代码</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/20160226.css">
<script src="js/jquery1.8.3.min.js"></script>
<script src="js/TweenMax.min.js"></script>
<script src="js/EasePack.js"></script>
<script type="text/javascript">
var phoneWidth = parseInt(window.screen.width);
var phoneScale = phoneWidth/640;
var ua = navigator.userAgent;
if (/Android (\d+\.\d+)/.test(ua)){
var version = parseFloat(RegExp.$1);
// andriod 2.3
if(version>2.3){
document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');
// andriod 2.3以上
}else{
document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
}
// 其他系统
} else {
document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
}
</script>
<style></style>
</head>
<body>
<!-- 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>
</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>
</body>
</html>JS代码(script.js):
$(function(){
// =================================loading控制 $(window).on("load",function(){
$("#loading").delay(50).fadeOut()}
);
}
)CSS代码(style.css):
@charset "utf-8";/*等待条*/
#loading{width:100%;height:100%;background:url(../img/wsload.gif) no-repeat center center #FFF;background-size:10%;position:fixed;top:0;left:0;z-index:999;}
/*==============================================================浮层内容*/
#tip{background:rgba(0,0,0,0.3);position:fixed;top:0;left:0;width:100%;height:100%;display:none;z-index:9999;}
#tip .pack{width:80%;min-height:100px;margin:0 auto;background:#FFF;margin-top:30%;position:relative;overflow:hidden;padding-bottom:60px;}
#tip .pack img{margin:70px auto 20px;display:block;}
#tip .pack h1{font-size:14px;text-align:center;color:#666666;line-height:36px;margin-top:20px;}
#tip .pack a{display:block;width:100%;position:absolute;bottom:0px;font-size:16px;color:#c8161d;height:40px;line-height:40px;text-align:center;border-top:1px solid #d6d6d6;}
/*登录界面*/
.acc_login ul li h2{font-size:18px;height:36px;line-height:36px;}
.acc_login ul li .acc_input{width:100%;display:block;height:36px;line-height:36px;border:0;border-top:1px solid #d6d6d6;}
.acc_login ul li .login_icon{display:block;height:36px;line-height:36px;background-color:#f8f8f8;color:#d6d6d6;}
.acc_login ul li .login_iconon{color:#fff;background-color:#c8161d;}
/*账户迁移申请*/
.acc_head div{position:relative;}
.acc_head div .out_icon{position:absolute;right:10px;top:10px;}
.acc_head div h1{line-height:40px;font-size:20px;}
.acc_apply ul li{width:100%;display:block;/*height:36px;*/
line-height:36px;border-top:1px solid #d6d6d6;}
.acc_apply ul li input{border:0;}
.acc_apply ul li label{margin-left:10px;color:#323232;}
.acc_apply ul li .acc_five{margin-right:14px;}
.acc_apply ul li .acc_four{margin-right:28px;}
/*上传照片*/
.acc_apply ul li .acc_img{width:80%;margin:0 auto;/*margin-bottom:60px;*/
}
.acc_apply ul li .acc_imgin{width:100%;}
.acc_sc{position:relative;height:36px;margin:10px 0;}
.acc_sc .ph08{opacity:0;z-index:10;position:absolute;top:0;left:0;height:36px;width:100%;}
.acc_sc .acc_scicon{display:block;color:#b2b2b2;background-color:#f7f7f7;}
.acc_img p{color:#b2b2b2;}
.acc_img .ph09{font-size:10px!important;line-height:18px;}
.acc_foot{width:100%;height:36px;position:fixed;bottom:0;line-height:36px;}
.acc_foot a{width:50%;display:block;}
.acc_foot .acc_cancel{color:#b2b2b2;background-color:#f7f7f7;}
.acc_foot .acc_sure{color:#fff;background-color:#c8161d;}
/*英伦*/
.yingLun ul li{margin-top:-1px;}
.yingLun ul li img{width:100%;}
.yingLun ul .yl_txt{background:url(../img/yl2_06.jpg) no-repeat center top;background-size:cover;padding:10px 30px 50px 30px;}
.yingLun ul .yl_txt h2 img{width:292px;}
.yingLun ul .yl_txt ul li{padding-left:30px;background:url(../img/ly_02.png) no-repeat left center;margin-top:10px;font-size:23px;}
.yingLun ul .yl_txt ul .active{background:url(../img/ly_02_1.png) no-repeat left center;}
.yingLun ul .yl_txt ul li span{background-color:rgba(0,0,0,0.3);color:#fff;padding:0 7px;border-radius:50px;display:block;}
.yingLun ul .yl_txt .ly_xx{margin:0 auto;width:553px;margin-top:20px;}
.yingLun ul .yl_txt .ly_xx .ly_ph{background:url(../img/ly_04.png) no-repeat left center;background-size:100%;width:345px;height:57px;line-height:57px;border:0;padding-left:10px;font-size:24px;}
.yingLun ul .yl_txt .ly_xx .btn_lq img{width:152px;display:inline-block;height:57px;}
/*弹出框增加*/
#tip .pack_yl{min-height:200px;margin-top:45%;}
#tip .pack_yl h1{font-size:24px;margin-bottom:30px;}
#tip .pack_yl p{font-size:24px;padding:10px;padding-bottom:80px;}
#tip .pack_yl a{display:block;width:100%;position:absolute;bottom:0px;font-size:24px;color:#c8161d;height:80px;line-height:80px;text-align:center;border-top:1px solid #d6d6d6;}
.header{width:100%;height:60px;border-bottom:1px solid #b3b3b3;text-align:left;cursor:pointer;position:relative;background-color:#FFF;}
分享到QQ
分享到微博
微信扫一扫
