bianli chaxun 旧密码新密码

最新推荐文章于 2022-05-09 15:22:55 发布
颓默
最新推荐文章于 2022-05-09 15:22:55 发布
阅读量871
点赞数
<!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>
颓默
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bianli chaxun 旧密码新密码

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> script src="jquery-3.2.1.min.js">script> style> .tab{ width: 400px; height: 300px;
复制链接

扫一扫