AngularJS效果-包括输入框的设置和Tab栏切换（ng-class控制）

最新推荐文章于 2019-09-10 14:55:48 发布

吃瓜群众欢乐多

最新推荐文章于 2019-09-10 14:55:48 发布

阅读量619

点赞数

文章标签： angularjs

本文链接：https://blog.csdn.net/sinat_36146776/article/details/73847261

版权

输入框的原理：把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>

吃瓜群众欢乐多

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS效果-包括输入框的设置和Tab栏切换（ng-class控制）

新商盟 html{ font-family: "Noto Sans CJK SC", "Source Han Sans CN"; font-size: 12px; background: #efeff4; } ul,li{ text-decoration:
复制链接

扫一扫