AngularJS效果-包括输入框的设置和Tab栏切换（ng-class控制）
来源：互联网 发布：网络侵权 编辑：程序博客网 时间：2024/06/09 21:27
输入框的原理：把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
- AngularJS效果-包括输入框的设置和Tab栏切换（ng-class控制）
- AngularJS ng-class样式切换
- angularjs -- 密码输入框的内容可见与隐藏（ng-class）
- 回车键的tab效果 切换输入焦点
- AngularJS中ng-class和class的区别
- tab栏的切换效果
- 关于AngularJS的ng-class
- 关于AngularJS的ng-class
- angularjs的作用域（ng-repeat 和 ng-controller）
- AngularJS ng-class
- AngularJS ng-class用法
- AngularJs----ng-class
- AngularJS ng-class用法
- angularjs ng-class
- AngularJS之ng-class
- AngularJS ng-class
- angularJS之ng-class
- angularjs-ng-class指令
- crond和crontab的学习
- monkeyrunner学习（一）
- Apache Spark数据分析教程（二）：Spark SQL
- Xcode 设置全局宏
- web前端学习路线
- AngularJS效果-包括输入框的设置和Tab栏切换（ng-class控制）
- C++11开发中的Atomic原子操作
- 防止表单多次提交
- React-Native SectionList使用
- AxonFramework,事件序列化器调优
- eigen入门
- svn切换用户
- sensor---应用APP
- 生产者与消费者模式
