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 代码

<!-- ====================================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|2d|[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;
	})
})

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

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>