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

• 个人网站:【海拥】【摸鱼小游戏】【开发文档导航】
• 风趣幽默的人工智能学习网站：人工智能
• 想寻找共同学习交流的小伙伴，请点击【全栈技术交流群】
• 免费且实用的计算机相关知识题库：进来逛逛

给大家安利一个免费且实用的前端刷题（面经大全）网站，点击跳转到网站。

演示效果：

在线演示地址：https://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 代码

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

完整源码可通过下方卡片私信我发给你们，备注端午节即可