HTML5砸金蛋手机抽奖活动代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 HTML5砸金蛋手机抽奖活动代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1 maximum-scale=2, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Add to Home">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="x-rim-auto-match" content="none">
<title>HTML5砸金蛋手机抽奖活动代码</title>
<link href="css/publi.css" rel="stylesheet" type="text/css">
<link href="css/chuyouwuyi01.css" rel="stylesheet" type="text/css">
<script src="js/jquery1.8.3.min.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>
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>

<body>
<!-- ====================================loading -->
<!--<section id="loading"></section>-->
<!-- ====================================页面开始 -->
<!--登录-->
<section class="zadan">
	<div class="zd_middle">
		<div class="zd_zadan">
			<div class="zd_bg">
				<img src="img/160615zadan/zd_cion18.png"  class="zd_bg01">
				<img src="img/160615zadan/zd_cion18.png"  class="zd_bg02">
			</div>
			<div class="zd_jindan ">
				<img src="img/160615zadan/zd_cion16.png">
			</div>
			<ul class="zd_bigcaidai">
				<li class="cardai01 cardai">
					<img src="img/160615zadan/zd_cion15.png">
				</li>
				<li class="cardai02 cardai">
					<img src="img/160615zadan/zd_cion14.png">
				</li>
				<li class="cardai03 cardai">
					<img src="img/160615zadan/zd_cion13.png">
				</li>
				<li class="cardai04 cardai">
					<img src="img/160615zadan/zd_cion12.png">
				</li>
				<li class="cardai05 cardai">
					<img src="img/160615zadan/zd_cion11.png">
				</li>
				<li class="cardai06 cardai">
					<img src="img/160615zadan/zd_cion10.png">
				</li>
			</ul>
			<div class="zd_chuizi">
				<img src="img/160615zadan/zd_cion01.png">
			</div>
			<div class="zd_txt">
				<input type="text" id="iphone1" placeholder="请输入手机号" />
				<a href="javascript:;" id="submit" class="mom_btn tc">
					<img src="img/160615zadan/zd_cion07.png">
				</a>
			</div>
		</div>
	</div>
</section>
<!--弹出层-->
<article id="tip">
	<div class="pack pack_yl">
		<h1 class="tc">温馨提示</h1>
		<p class="tc"></p>
		<a href="#">确定</a>
	</div>
</article>
<!-- 网站要用到的一些类库 -->

<script type="text/javascript">
	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;
		}
		$("#submit").on("click", function() {
			$('html,body').animate({scrollTop:0}); 
			var str = $("#iphone1").val()
			if (str.length == 11 && checkPhone(str)) {
				// 判断是不是11位手机号，为真提交
				$(".zd_jindan").addClass("zd_jindan01");
				$(".cardai01").fadeIn(500);
				$(".cardai02").animate({
					top: '240px',
					left: '173px'
				}, 500);
				$(".cardai03").animate({
					top: '225px',
					left: '345px'
				}, 600);
				$(".cardai04").animate({
					top: '230px',
					left: '202px'
				}, 700);
				$(".cardai05").animate({
					top: '230px',
					left: '230px'
				}, 800);
				$(".cardai06").animate({
					top: '340px',
					left: '246px'
				}, 1000, function() {
					//写中奖后的东西
					$(".cardai").addClass("cardai07");
					$(".zd_jindan").removeClass("zd_jindan01");
					alerths("恭喜你获得苹果电脑")
				});
			} else {
				alerths("请输入正确的手机号！")
			}
			return false;
		})
	})
</script>
</body>
</html>

JS代码(html5.js):

/* HTML5 Shiv v3.7.0 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed*/
(function(l,f){
	function m(){
	var a=e.elements;
	return"string"==typeof a?a.split(" "):a}
function i(a){
	var b=n[a[o]];
	b||(b={
}
,h++,a[o]=h,n[h]=b);
	return b}
function p(a,b,c){
	b||(b=f);
	if(g)return b.createElement(a);
	c||(c=i(b));
	b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);
	return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}
function t(a,b){
	if(!b.cache)b.cache={
}
,b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
	a.createElement=function(c){
	return!e.shivMethods?b.createElem(c):p(c,a,b)}
;
	a.createDocumentFragment=Function("h,f","return function(){
	var n=f.cloneNode(),c=n.createElement;
	h.shivMethods&&("+m().join().replace(/[\w\-]+/g,function(a){
	b.createElem(a);
	b.frag.createElement(a);
	return'c("'+a+'")'}
)+");
	return n}
")(e,b.frag)}
function q(a){
	a||(a=f);
	var b=i(a);
	if(e.shivCSS&&!j&&!b.hasCSS){
	var c,d=a;
	c=d.createElement("p");
	d=d.getElementsByTagName("head")[0]||d.documentElement;
	c.innerHTML="x<style>article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{
	display:block}
mark{
	background:#FF0;
	color:#000}
template{
	display:none}
</style>";
	c=d.insertBefore(c.lastChild,d.firstChild);
	b.hasCSS=!!c}
g||t(a,b);
	return a}
var k=l.html5||{
}
,s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={
}
,g;
	(function(){
	try{
	var a=f.createElement("a");
	a.innerHTML="<xyz></xyz>";
	j="hidden"in a;
	var b;
	if(!(b=1==a.childNodes.length)){
	f.createElement("a");
	var c=f.createDocumentFragment();
	b="undefined"==typeof c.cloneNode||"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}
g=b}
catch(d){
	g=j=!0}
}
)();
	var e={
	elements:k.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:"3.7.0",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){
	a||(a=f);
	if(g)return a.createDocumentFragment();
	for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;
	d<h;
	d++)c.createElement(e[d]);
	return c}
}
;
	l.html5=e;
	q(f)}
)(this,document);

CSS代码(publi.css):

@charset "utf-8";/*初始化 reset*/
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
body,button,input,select,textarea{font:14px/1.5 \5FAE\8F6F\96C5\9ED1,tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif}
body,html{margin:0 auto;padding:0;font-family:"宋体",\5FAE\8F6F\96C5\9ED1,Arial,Helvetica,sans-serif;font-size:14px;min-width:320px;overflow-y:auto;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:none;max-width:640px;}
h1,h2,h3,h4,h5,h6,button,input,select,textarea{font-size:100%}
address,cite,dfn,em,var,i{font-style:normal}
code,kbd,pre,samp{font-family:courier new,courier,monospace}
small{font-size:12px}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
legend{color:#000}
ol,ul{list-style:none}
a{text-decoration:none;color:#553411;}
a:hover,a:focus{text-decoration:none;}
fieldset,img{border:0;vertical-align:top;}
textarea{resize:none;}
a,input,button,select,textarea{outline:none;}
a,button{cursor:pointer;}
a,button{cursor:pointer;}
/*清楚浮动*/
.decimal{font-family:HelveticaNeueLt,'Microsoft YaHei',SimHei;font-size:14px;}
.clearfix:before,.clearfix:after{display:table;content:"";}
.clearfix:after{clear:both;}
.clearfix{zoom:1;}
.clearfix:after{content:"";display:block;height:0;clear:both;visibility:hidden;}
/*解决盒子塌陷问题*/
.clearfix{display:inline-table;}
*html .clearfix{height:1%;}
.clearfix{display:block;}
*+html .clearfix{min-height:1%;}
/*公共样式*/
.tc{text-align:center!important;}
.tl{text-align:left!important;}
.tr{text-align:right!important;}
.fl{float:left!important;}
.fr{float:right!important;}
.rlast{margin-right:0!important;}
.ffirst{margin-left:0!important;}

附件:下载该文件资源,减少时间成本(增值服务)