演示效果:

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


在线演示地址:​​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

html5 实现端午节领卷输入手机号验证效果_人工智能_02

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

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