输入框的原理:把input不可见放在六个div上面;用js获取里面的内容截取分别展示在div里面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>新商盟</title>
<link rel="stylesheet" type="text/css" href="../assets/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../assets/global/css/base.css">
</head>
<style type="text/css">
html{
font-family: "Noto Sans CJK SC", "Source Han Sans CN";
font-size: 12px;
background: #efeff4;
}
ul,li{
text-decoration: none;
list-style: none;
}
li{
float:left;
width:4rem;
height:4rem;
margin:5px;
border:1px solid #e6e6e6;
cursor: auto;
text-align: center;
line-height: 4rem;
font-size: 2rem;
}
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after{clear:both;}
.clearfix{
*zoom:1;/*IE/7/6*/
}
.logo-css>div{
float:left;
width:8.8rem;
height:8.8rem;
border-radius: 4.4rem;
text-align: center;
margin:8px;
border:1px solid #efeff4;
position: relative;
}
.logo-css>div>img{
width:4rem;
height: 5rem;
position: absolute;
top: 50%;
margin-top: -2.5rem; /* 高度的一半 */
margin-left: -2.0rem;
}
.logo-css>div>span:nth-child(2){
display:block;
margin-top: 120px;
}
.submit-css{
margin:60px auto 20px auto;
}
.submit-css>a{
display:block;
width:30rem;
height:4rem;
margin:0 auto;
line-height:4rem;
background-color: #d91f2f;
border:2px solid #d91f2f;
color:#fff;
font-size:1.5rem;
text-align: center;
}
.footer-css{
font-size: 1.2rem;
}
.footer-css>div:nth-child(1){
float:left;
}
.footer-css>div:nth-child(2){
float:right;
}
.footer-css>div:nth-child(1) span{
color:#4fabf6;
}
.question-css{
text-align:center;
margin:20px auto;
font-size:1.5rem;
}
.tel-input-css input{
border:none;
width:222px;
height:30px;
padding-left:20px;
outline:none;
}
.tel-input-css>span:nth-child(3){
color:#cacaca;
}
/* 点击的时候的颜色 */
.picked{
background-image: url('../assets/global/img/selected.png');
width:30px;
height:30px;
display:block;
position:absolute;
left:70px;
top:0px;
background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
}
#small-cicrle .change-color{
border:2px solid #d91f2f;
}
.input-verticode{
margin:10px auto;
padding-top:10px;
padding-bottom: 10px;
border-top:1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.input-verticode input{
width:30rem;
height:4rem;
border:1px solid red;
font-size: 2rem;
letter-spacing:4rem;
opacity: 0.001;
margin-top:5px;
position:absolute;
}
</style>
<body ng-app="myApp">
<div ng-controller="myController" class="container">
<div class="form-group">
<div class="attention">
<div>*</div>
<div> 为了您的账号安全,请进行手机短信验证</div>
</div>
</div>
<div class="tel-input-css">
<span>手机号</span>
<input type="text" placeholder="请输入手机号码" ng-model="vm.telphone">
<span ng-click="getVertify()" ng-if="visible">获取验证码</span>
<span ng-if="invisible">{{leftTime}}秒后失效</span>
</div>
<div class="input-verticode clearfix">
<input type="text" name="number" maxlength="6" ng-model="vm.number" id="mynum"/>
<li>{{vm.number | cutnumber:0:1}}</li>
<li>{{vm.number | cutnumber:1:2}}</li>
<li>{{vm.number | cutnumber:2:3}}</li>
<li>{{vm.number | cutnumber:3:4}}</li>
<li>{{vm.number | cutnumber:4:5}}</li>
<li>{{vm.number | cutnumber:5:6}}</li>
</div>
<div class="question-css">我是?</div>
<div class="logo-css clearfix" id="small-cicrle">
<div ng-repeat="picItem in categorys" ng-class="{true:'#small-cicrle change-color',false:'unselected'}[picItem.selected]" ng-click="addClass(picItem)"
>
<img ng-src="{{picItem.url}}" alt="">
<span>{{picItem.name}}</span>
<span ng-class="{true:'#small-cicrle picked',false:'unselected'}[picItem.selected]"></span>
</div>
</div>
<div class="submit-css">
<a href="javascript:void(0);" ng-click="doLogin(vm)">登 录
</a>
</div>
<div class="footer-css">
<div>收不到短信,使用<span>语音验证码</span></div>
<div>联系客服</div>
</div>
</div>
</body>
<script type="text/javascript" src="../assets/global/scripts/angular.js"></script>
<script type="text/javascript">
var app=angular.module('myApp',[]);
app.controller('myController',['$scope','$timeout',function ($scope,$timeout){
$scope.categorys=[
{'name':'烟酒店','id':1,'url':'../assets/global/img/zhuce_bianlidian_icon.png'},
{'name':'便利店','id':2,'url':'../assets/global/img/zhuce_canyingdian_icon.png'},
{'name':'餐饮店','id':3,'url':'../assets/global/img/zhuce_yanjiudian_icon.png'}
];
$scope.vm={};
angular.forEach($scope.categorys,function(item){
item.selected=false;
})
$scope.addClass=function(picItem){
angular.forEach($scope.categorys,function(item){
if(item.name==picItem.name){
picItem.selected=false;
item.selected=true;
$scope.vm.category=item;
}else{
picItem.selected=true;
item.selected=false;
}
})
}
//点击提交
$scope.doLogin=function(){
console.log($scope.vm);
console.log($scope.vm.number)
console.log(typeof $scope.vm.number)
}
/*获取验证码*/
$scope.getVertify=function(){
$scope.visible=false;
$scope.invisible=true;
updateClock();
}
$scope.visible=true;
$scope.leftTime=60;
var updateClock=function(){
$scope.leftTime--;
$scope.leftTime=$scope.leftTime>9?$scope.leftTime:'0'+$scope.leftTime;
if ($scope.leftTime > 0) {
$timeout(function() {
updateClock();
}, 1000);
} else {
$scope.visible=true;
$scope.invisible=false;
$timeout.cancel(updateClock);
}
}
}]);
app.filter('cutnumber', function() { //可以注入依赖
return function(text,a,b) {
var reg=/^\+?(0|[1-9][0-9]*)$/;//控制输入数字的
if(text){
return text.substring(a,b);
/*if(reg.test(text)){
return text.substring(a,b);
}*//*else{
text=text.substring(0,text.length-1);
if(text){
return text.substring(a,b);
}
}*/
}
}
});
</script>
</html>