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

演示效果：

源码可在文末免费获取

✨ 项目基本结构

目录结构如下：

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

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。