html5 实现端午节领卷输入手机号验证效果

• 💂 个人网站:【海拥】【摸鱼小游戏】【开发文档】
• 🤟 风趣幽默的人工智能学习网站：👉人工智能
• 💅 想寻找共同学习交流的小伙伴，请点击【全栈技术交流群】
• 💬 免费且实用的Java刷题（面经大全）网站：👉点击跳转到网站

我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛

演示效果： 在线演示地址：haiyong.site/demo/duanwu

源码可在文末免费获取

✨ 项目基本结构

目录结构如下：

├── css
│   ├── chuyouwuyi.css
│   └── publi.css
├── img
│	└── 160607dw 
│        ├── dw_zl02.png
│		 └── dw_zl01.png
├── js
│   ├── chuyouwuyi.css
│   ├── jquery-1.6.2.js
│   └── publi.css
└── index.html

🧡 HTML 代码

<!-- ====================================loading -->
<section id="loading"></section>
<!-- ====================================页面开始 -->
<!--登录-->
<section class="dw_zl">
	<div class="dw_logo">
		<img src="img/160607dw/dw_zl02.png">
	</div>
	<div class="dw_middle">
		<input type="text" id="iphone1" placeholder="请输入手机号" />
		<a href="javascript:;" id="submit" class="mom_btn tc">确认领取</a>
		<a href="http://m.01zhuanche.com" class="mom_load tc">下载客户端</a>
	</div>
	
</section>
<!--弹出层-->
<article id="tip">
	<div class="pack pack_yl">
		<h1 class="tc">温馨提示</h1>
		<p class="tc"></p>
		<a href="#">确定</a>
	</div>
</article>

💛 CSS 主要代码

清楚浮动

.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;
}

💙 部分JS代码

网站要用到的一些类库

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() {
		var str = $("#iphone1").val()
		if (str.length == 11 && checkPhone(str)) {
			// 判断是不是11位手机号，为真提交
		} else {
			alerths("请输入正确的手机号！")
		}
		return false;
	})
})

到这里就基本完成了，如果大家发现任何不正确的地方，可以在下方评论区告诉我，互相学习，共同进步！