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


输入框的原理:把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
    评论
要将el-input输入框设置为透明,可以通过以下步骤实现: 1. 首先,在el-input组件上添加一个自定义的class,比如"transparent-input"。 2. 在你的CSS文件中,为这个自定义的class添加样式,使其背景色透明。可以使用`background-color: transparent;`来将背景色设置为透明。 3. 如果你需要保持输入框的边框和其他样式,可以根据需要继续修改样式。 通过以上步骤,你可以将el-input输入框设置为透明。这样,输入框的背景色将变为透明,而保留其他样式不变。这样做可以满足你的需求。参考中的解决方案中提到了使用原生input替换el-input,在样式上做修改来实现类似的效果。参考中也有关于vue element-ui实现输入框样式修改的相关内容,可供参考。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* [[element-ui] el-table el-input 输入框卡顿](https://blog.csdn.net/qq_14993591/article/details/127969197)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [vue element-ui实现input输入框金额数字添加千分位](https://download.csdn.net/download/weixin_38690017/12929858)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值