核心产品
帮助中心
时间：2021-05-28
实例如下：
//更改边框颜色的代码 $("#shname").css({"border":"1px solid red"});//排序有时候下标会错乱 不建议使用 建议使用讲师排序代码<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script><script type="text/javascript" src="js/angular.min.js" ></script><style>*{margin: 0 auto;padding: 0;}.div{margin-top: 50px;width: 800px;height: 1000px;}.tian{width: 80px;height: 24px;background: #5CD6FF;}#sp{width: 150px;height: 24px;margin-left: 130px;border-radius: 10px;}#sj{height: 24px;margin-left: 20px;border-radius: 10px;}#st{height: 24px;margin-left: 30px;}#t{width: 14px;height: 14px;position: absolute;margin-left: -24px;padding-top: 6px;}#t1{width: 14px;height: 14px;position: absolute;margin-left: -24px;padding-top: 6px;}#table{margin-top: 50px;}.fh1{background: #FCFC30;}.true {background: greenyellow;border: 0px;border-radius: 3px;}.false {background: yellow;border: 0px;border-radius: 3px;}</style></head><body ng-app="myapp" ng-controller="mycr"><div class="div"><input type="button" value="新增订单" ng-click="add()" class="tian"/><input type="button" value="批量删除" ng-click="px()" class="tian"/><input type="text" placeholder="按商品名称查询" id="sp" ng-model="msname"/><img src="img/q.png" id="t" ng-click="nameselect()"/><input type="text" placeholder="按手机号查询" id="sj" ng-model="mytel"/><img src="img/q.png" id="t1" ng-click="sjselect()"/><select id="st" ng-change="myfh()" ng-model="fh" ng-init="fh=cha[0]"><option ng-repeat="c in cha">{{c}}</option></select><table border="1px" cellspacing="1" cellpadding=""0 width="800px" height="30px" id="table"><tr align="center"><td><input type="checkbox" ng-model="qx" ng-click="myqx()"/></td><td>id <input type="button" value="排序" ng-click="idp()"/></td><td>商品名</td><td>用户名</td><td>手机号</td><td>价格 <input type="button" value="排序" ng-click="jiap()"/></td><td>城市</td><td>下单时间 <input type="button" value="排序" ng-click="ship()"/></td><td>状态</td></tr><tr align="center" ng-repeat="x in user|filter:{sname:sn}|filter:{tel:sh}|filter:fahuo|orderBy:idpai"><td><input type="checkbox" ng-model="x.flog" ng-click="dx($index)"/></td><td>{{x.id}}</td><td>{{x.sname}}</td><td>{{x.name}}</td><td>{{x.tel}}</td><td>{{x.price|currency:"￥:"}}</td><td>{{x.cheng}}</td><td>{{x.time|date:"MM-dd HH:mm:ss"}}</td><td><input type="button" value="{{x.zhuang|myFilter}}" class="{{x.zhuang}}" ng-click="fahuo1($index)" /></td></tr></table><fieldset ng-show="yc"><legend>添加订单信息</legend><center>商品名<input type="text" ng-model="shname" id="shname"/><span id="s1"></span><br /><br />用户名<input type="text" ng-model="username" id="username"/><span id="s2"></span><br /><br />手机号<input type="text" ng-model="mtel" id="mtel"/><span id="s3"></span><br /><br />价格为<input type="text" ng-model="mprice" id="mprice" /><span id="s4"></span><br /><br />请选择城市<select ng-model="chengshi" ng-init="chengshi=cs[0]" ng-change="xuancs()" style="width: 140px;"><option ng-repeat="xx in cs">{{xx}}</option></select><span id="s5" ></span><br /><br /><input type="button" value="保存" ng-click="baocun()"/></center></fieldset></div></body><script>var app=angular.module("myapp",[]);app.controller("mycr",function($scope){//select列表的值$scope.cha=["按状态查询","已发货","未发货"];$scope.cs=["请选择城市","北京","天津","河北","上海"];$scope.user=[{"flog":false,"id":2001,"sname":"IphoneX","name":"张三","tel":"13525654123","price":"8699","cheng":"北京","time":"14560161945000","zhuang":false,},{"flog":false,"id":3006,"sname":"Iphone6","name":"王红","tel":"12564236541","price":"5635","cheng":"郑州","time":"1456016212945000","zhuang":false,},{"flog":false,"id":5312,"sname":"Iphone7","name":"赵小龙","tel":"13402651245","price":"6180","cheng":"北京","time":"666016215645000","zhuang":false,},{"flog":false,"id":2314,"sname":"Iphone8","name":"赵强","tel":"17695212525","price":"7190","cheng":"上海","time":"88888162545000","zhuang":false,}]; //按照商品名称查询$scope.nameselect=function(){$scope.sn=$scope.msname;//手机号过滤器为空$scope.sh="";}//按照手机号查询$scope.sjselect=function(){$scope.sh=$scope.mytel;//商品过滤器为空$scope.sn="";}//已发货和未发货的点击事件$scope.myfh=function(){if($scope.fh=="按状态查询"){$scope.fahuo="";}else if($scope.fh=="已发货"){$scope.fahuo=true;$scope.sn="";$scope.sh="";}else{$scope.fahuo=false;$scope.sn=""; $scope.sh=""; }}//全选$scope.myqx=function(){if($scope.qx){for (var i=0;i<$scope.user.length;i++) {$scope.user[i].flog=true;}}else{for (var i=0;i<$scope.user.length;i++) {$scope.user[i].flog=false;} }}//如果有一个没选全选取消$scope.dx=function($index){if($scope.user[$index].flog==false)$scope.qx=false;}//批量删除$scope.px=function(){var j=0;for (var i=0;i<$scope.user.length;i++) {if($scope.user[i].flog){j++;}}if(j==0){alert("请至少选择一个")}//判断所有选中的框 看其状态值为未发货 提示不能删除未发货的var flog1=true;for (var i=0;i<$scope.user.length;i++) {if($scope.user[i].flog){if($scope.user[i].zhuang==false)flog1=false;}} if(flog1){for (var i=$scope.user.length-1;i>=0;i--) {if($scope.user[i].flog){$scope.user.splice(i,1);//全部删除 全选为false$scope.qx=false;}}}else{alert("不能删除未发货的")}}//根据id排序的方法var c=0;$scope.idp=function(){c++; if(c%2==1){ $scope.idpai='id'; }else{ $scope.idpai='-id'; }}//根据价格排序的方法$scope.jiap=function(){c++; if(c%2==1){ $scope.idpai='price'; }else{ $scope.idpai='-price'; }}//根据时间排序$scope.ship=function(){c++; if(c%2==1){ $scope.idpai='time'; }else{ $scope.idpai='-time'; }}//点击新增的话显示添加$scope.add=function(){$scope.yc=true;}//保存的代码$scope.baocun=function(){flog= kong($("#shname").val(),"#s1")&&kong($("#username").val(),"#s2")&&kong($("#mtel").val(),"#s3")&&kong($("#mprice").val(),"#s4")&&cheng();if(flog){var tian={"flog":false,"id":"23236","sname":$scope.shname,"name":$scope.username,"tel":$scope.mtel,"price":$scope.mprice,"cheng":$scope.chengshi,"time":"14560201945000","zhuang":false,}//添加到表格中$scope.user.push(tian);//添加完毕后清空$scope.shname="";$scope.username="";$scope.mtel="";$scope.mprice="";//清空后隐藏$scope.yc=false;}}//不为空的方法function kong(k1,s){var k=/^\s*$/;if(k.test(k1)){$(s).html("不能为空");return false;}else{$(s).html("");return true;}}//城市选择function cheng(){if($scope.chengshi=="请选择城市"){$("#s5").html("必选");return false;}else{$("#s5").html("");return true;}}//发货改变值的方法 $scope.fahuo1 = function($index) {if($scope.user[$index].zhuang ){$scope.user[$index].zhuang = false;}else{$scope.user[$index].zhuang = true;}}})//自定义过滤器，根据zhuang的状态，返回不同的值app.filter("myFilter", function() {return function(input) {if (input) {return "已发货";} else {return "未发货";}return input;}})</script></html>以上这篇AngularJs点击状态值改变背景色的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。
HTML部分代码：复制代码代码如下:鼠标经过时改变背景色鼠标经过时改变背景色鼠标经过时改变背景色鼠标经过时改变背景色javascript部分代码：当鼠标经过时，
效果图：任务：1.鼠标移到不同行上时背景色改为色值为#f2f2f2，移开鼠标时则恢复为原背景色#fffvartr=document.getElementsByT
背景色的确立。背景色最常采用是的中性色,黑色、白色、灰色或者是直接使用主色作为背景色。背景色要纯净,柔和,有良好的过度效果,一般使用纯色或者渐变和画笔柔角笔头营
本文介绍了android开发修改状态栏背景色和图标颜色的示例，分享给大家，具体如下：修改状态栏背景色和图标颜色默认是黑底白字的，现在要改为白底黑字的先看下效果图
本文实例讲述了JS实现进入页面时渐变背景色的方法。分享给大家供大家参考。具体实现方法如下：JS实现的进入页面时的渐变的背景色效果functionCBgColor
