<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.2.1.min.js"></script> <style> .tab{ width: 400px; height: 300px; background: blue; } .ho{ width: 400px; height: 300px; background: green; margin-top: 30px; } .ac{ background: palevioletred; } </style> <script> $(function(){ console.log($("ul").children().length); $(".first").next("li").click(function(){ //alert("XIAYIGE"); }); $(".sec").prev().click(function(){ //alert("SHANGYIGE"); }); //$("ul li:eq(1)").css("background","red").siblings().css("background","blue"); $("ul li:eq(1)").click(function(){ //$(this).closest("li").css("background","red"); $(this).closest("div").css("background","red"); console.log($(this).parent()) console.log($(this).parents()) }); // 切换事件 $(".pas").click(function(){ if($(this).next().is(":visible")){ $(this).next().hide(); }else{ $(this).next().show(); } }); // hover() $(".ho").hover(function(){ $(this).addClass("ac"); },function(){ $(this).removeClass("ac"); }); // toggle() // $("body").click(function(){ // $(".ho").toggle(1500,function(){ // $(".tab").css("background","yellow") // }) // }) $("body").bind({"click":function(){ $(".ho").toggle(1500,function(){ $(".tab").css("background","yellow") }) },"mouseover":function(){ console.log(0); }}) }) </script> </head> <body> <div> <ul> <li class="first">aiovbaiunvtdd</li> <li class="sec">aiovbaiunvtdd</li> <li>aiovbaiunvtdd</li> <li>aiovbaiunvtdd</li> </ul> </div> <p class="pas">jvnasv</p> <p class="tab">jvnasv</p> <p class="ho"></p> </body></html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } table{ margin: 100px auto; border-collapse: collapse; } th,td{ padding: 10px; border: 1px solid #000; } </style> <script src="angular.min.js"></script> <script> var myapp=angular.module("myapp",[]); myapp.controller("myCtrl",function($scope){ $scope.books=[{ name:"JavaScript",public:false,update:"1504707661308",has:true },{ name:"Angular权威教程",public:false,update:"1204707661308",has:false },{ name:"Vue实战",public:false,update:"1804707661308",has:false },{ name:"JavaScript",public:true,update:"1504707561308",has:true }]; $scope.price="99.9"; /*$scope.filt=""*/ }) </script> </head> <body ng-app="myapp" ng-controller="myCtrl"> <input type="text" ng-model="filt"> <table> <thead><tr> <th>名字</th> <th>出版情况</th> <th>更新时间</th> <th>是否有库存</th> </tr></thead> <tbody> <tr ng-repeat="item in books | filter:filt | orderBy:'name':false"> <td>{{item.name | lowercase}}</td> <td>{{item.public }}</td> <td>{{item.update |date:'yyyy年MM月dd日 hh:mm:ss EEE'}}</td> <td>{{item.has}}</td> </tr> </tbody> </table> <div>{{price | currency:"¥"}}</div> </body> </html>
旧密码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="angular.min.js"></script> <style> * { margin: 0; padding: 0; } table { margin-top: 20px; border-collapse: collapse; } td, th { border: 1px solid #000; padding: 20px; text-align: center; } button { border-radius: 5px; border: 1px solid gainsboro; background-color: orange; color: white; padding: 5px; } span { width: 100px; display: inline-block; } .age { width: 20px; height: 20px; } </style> <script> var myapp = angular.module("myapp", []); myapp.controller("myCtrl", function ($scope) { var data = [{"name": "a", "pass": 111, "age": 20, "sex": "男", "check": false}, {"name": "b", "pass": 222, "age": 21, "sex": "女", "check": false}, {"name": "c", "pass": 333, "age": 22, "sex": "男", "check": false}]; $scope.data = data; //判断修改的界面是否出现 $scope.show = false; //旧密码 $scope.usedPass; //新密码 $scope.newPass; //确认密码 $scope.renewPass; //用来记录要删除的信息 var index = 0; //修改密码的方法 $scope.updata = function (index) { $scope.show = true; index = index; } //提交修改的方法 $scope.submitUpdate = function () { if ($scope.usedPass != null && $scope.newPass != null && $scope.renewPass != null) { if ($scope.data[index].pass == $scope.usedPass && $scope.newPass == $scope.renewPass) { alert("提交成功"); $scope.data[index].pass = $scope.newPass; //成功后让修改界面消失 $scope.show = false; $scope.usedPass = ""; $scope.newPass = ""; $scope.renewPass = ""; } else if ($scope.newPass != $scope.renewPass) { alert("两次密码不一致,请重新检查"); } else { alert("旧密码有误,请您确定后再输入"); } } } //用来查询的字段 $scope.cxSearch; $scope.cx = function (ziduan) { console.log(ziduan); console.log($scope.select); $scope.cxSearch = ziduan; } // $scope.startAge=20; // $scope.endAge=21; //查询的方法 $scope.searchFifter = function (search) { if ($scope.name != null || $scope.select != null || ($scope.startAge != null || $scope.endAge != null)) { if ($scope.cxSearch == "name") { if (search.name.indexOf($scope.name) != -1) { return true; } else { return false; } } else if ($scope.cxSearch == "select") { if (search.sex.indexOf($scope.select) != -1) { return true; } else { return false; } } else if ($scope.cxSearch == "age") { if ($scope.startAge < parseInt(search.age) && parseInt(search.age) < $scope.endAge || $scope.startAge == search.age || $scope.endAge == search.age) { return true; } else { return false; } } } return true; } //删除全部的方法 $scope.delAll = function () { if (confirm("确认删除")) { $scope.data = []; } } $scope.addshow = false; //添加用户的方法 $scope.add = function () { $scope.addshow = true; } $scope.submitAdd = function () { if ($scope.addname == null || $scope.addpass == null || $scope.addage == null || $scope.addsex == null) { alert("用户信息不可为空"); } else { $scope.data.push({ "name": $scope.addname, "pass": $scope.addpass, "age": $scope.addage, "sex": $scope.addsex, "check": false }); alert("提交成功"); $scope.addshow = false; } } }); </script> </head> <body ng-app="myapp" ng-controller="myCtrl"> <input type="text" placeholder="用户名查询" ng-model="name" ng-click="cx('name')"> 年龄范围查询:<input type="text" class="age" ng-model="startAge" ng-click="cx('age')">-<input type="text" class="age" ng-model="endAge" ng-click="cx('age')"> 性别选项:<select ng-model="select" ng-click="cx('select')"> <option>男</option> <option>女</option> </select> <button ng-click="delAll()">全部删除</button> <table> <thead> <th>id</th> <th>用户名</th> <th>密码</th> <th>年龄</th> <th>性别</th> <th>操作</th> </thead> <tbody> <tr ng-repeat="item in data | filter:searchFifter:search"> <td>{{$index+1}}</td> <td>{{item.name}}</td> <td>{{item.pass}}</td> <td>{{item.age}}</td> <td>{{item.sex}}</td> <td> <button ng-click="updata($index)">修改密码</button> </td> </tr> </tbody> </table> <button style="margin-top: 20px" ng-click="add()">添加用户</button> <br> <div ng-if="show"> <!--<span>用户名:</span><input type="text"> <br>--> <span>旧密码:</span><input type="password" ng-model="usedPass"> <br> <span>新密码:</span><input type="password" ng-model="newPass"> <br> <span>确认密码</span><input type="password" ng-model="renewPass"> <br> <button style="margin-top: 20px" ng-click="submitUpdate()">提交</button> </div> <div ng-show="addshow"> <span>用户名:</span> <input type="text" ng-model="addname"><br> <span>密码:</span><input type="password" ng-model="addpass"><br> <span>年龄:</span><input type="text" ng-model="addage"><br> <span>性别:</span><input type="text" ng-model="addsex"><br> <button style="margin-top: 20px" ng-click="submitAdd()">提交</button> </div> </body> </html>
bianli chaxun 旧密码新密码
最新推荐文章于 2022-05-09 15:22:55 发布