实例介绍
【实例简介】HTML5砸金蛋手机抽奖活动代码
【实例截图】
【核心代码】
<!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>
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论