<!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>
HTML5实现的手机验证抽奖领券效果源码.zip
版权申诉
179 浏览量
2022-11-04
23:40:49
上传
评论
收藏 410KB ZIP 举报
HTML5实现的手机验证抽奖领券效果源码.zip （26个子文件） 
132686887418550468 css 
changpao.css 3KB publi.css 2KB chuyouwuyi.css 7KB reset.css 2KB lingqu.css 4KB question.css 4KB 20160226.css 8KB style.css 4KB img 
wsload.gif 532B tada160509 
td_icon05.png 2KB td_icon06.png 131KB xs_icon06.png 4KB td_icon03.png 14KB td_icon04.png 94KB xs_icon02.png 30KB td_icon02.png 23KB
favicon.jpg 2KB
index.html 4KB js jquery1.8.3.min.js 91KB html5.js 2KB question.js 0B respond.min.js 4KB vue.min.js 73KB TweenMax.min.js 102KB script.js 161B EasePack.js 10KB资源评论
