美文网首页Web前端之路首页投稿（暂停使用，暂停投稿）
web学习笔记10-自定义时间选择器指令编写

web学习笔记10-自定义时间选择器指令编写

作者: 点柈 | 来源:发表于2017-01-12 11:03 被阅读121次

        好久没有更新了，最近在做一个前端angularJs项目，内容比较复杂，幸好都不算太难。前两天自己写了个简单的时间选择器，但是水平有限，写的代码量稍微有点大，就想着封装成一个指令，暴露出小时和分钟，以便在控制器中获取到，并且发送到后台。不过，之前虽然一直在写angular，指令也接触到不少，但是一直是在使用别人写好的，自己写还是第一次，就想着，正好利用下这个机会，自己尝试些一个简单点的指令也挺好的。

        这里我还是按照往常习惯一样，先贴github地址，毕竟看那么长的东西也是太累了。angular-timepicker

        效果图如图：

    时间选择器效果.gif

        点击上下小三角可以变换时间，点击获取时间的按钮可以弹出提示框显示选择的时间，并且在控制台中打印出来。其实这些写起来并不是很难，在写指令的时候可能对大多数前端的小伙伴来说都不算难事，不过说实话，一年前左右刚接触angular的时候，其实已经在慕课网上看过大漠清秋讲的angular课程，当时初接触前端，看了他讲的指令，其实也没看懂。昨晚回去又看了一遍他讲的课，发现理解了一点了，正好昨天在写指令的时候遇到一些小问题，今天早上也是迎刃而解了。

        下面我就不废话了，直接写代码了，我把这个指令单独写成一个demo了。所以大家要是想使用的话，只需要下载之后复制粘贴就ok了。

    第一步：编写html

        先编写出html来，把基本的页面编写出来：

    html
    <div class="co-timepicker-box" style="margin-left: 15px">
    <input type="text" class="fl wi-timepicker-timeinput" ng-model="hour" maxlength="2">
    <div class="fl wi-timepicker-change-box">
        <div class="wi-timepicker-change-time arrow-up" ng-click="timeUp(1)"></div>
        <div class="wi-timepicker-change-time arrow-down" ng-click="timeDown(1)"></div>
    </div>
    <div class="fl wi-timepicker-maohao">
        :
    </div>
    <input type="text" class="fl wi-timepicker-timeinput" ng-model="minute" maxlength="2">
    <div class="fl wi-timepicker-change-box">
        <div class="wi-timepicker-change-time arrow-up" ng-click="timeUp(2)"></div>
        <div class="wi-timepicker-change-time arrow-down" ng-click="timeDown(2)"></div>
    </div>
</div>

    第二步：编写css

    css
    /* timepicker start */
.co-timepicker-box {
    float: left;
    width: 110px;
    height: 32px;
    border: 1px solid #cccccc;
}

.fl{
    float: left;
}
.wi-timepicker-timeinput{
    width: 35px;
    height: 30px;
    padding: 0;
    font-size: 20px;
    text-align: center;
    line-height: 30px;
    border:0;
    outline: none;
}

.wi-timepicker-change-box{
    width: 15px;
    height: 30px;
    border:0;
}
.wi-timepicker-change-time{
    width: 15px;
    height: 15px;
    border: 0;
}
.wi-timepicker-maohao{
    width: 7px;
    height: 30px;
    font-size: 16px;
    text-align: center;
    line-height: 30px;
}
.arrow-up{
    background: url("../img/time-up.png")no-repeat center center;
    background-size: 14px 6px;
}
.arrow-down{
    background: url("../img/time-down.png")no-repeat center center;
    background-size: 14px 6px;
}
/* timepicker end */

    第三步：编写js

        页面基本完成。之后就是js编写，js中主要需要注意的是，小时和分钟在个位数的时候前面需要加上0，在小时0往下是23，分钟往下是59，这个需要单独的一个方法。然后就是给小时分钟赋初始值。然后就是点击方法。

    js
    //转换格式的方法
$scope.PrefixInteger = function (num, n) {
    return (Array(n).join(0) + num).slice(-n);
};
//时间选择器的处理
if(!$scope.hour){
    $scope.hour = 12;
}
if(!$scope.minute){
    $scope.minute = '00';
}
var reg=/^\d+$/;
$scope.timeUp = function (type) {
    if(type == 1){
        if(reg.test($scope.hour)){
            if(parseInt($scope.hour) >=0 && parseInt($scope.hour) <= 23){
                if($scope.hour == 23){
                    $scope.hour = -1;
                }
                $scope.hour = parseInt($scope.hour) + 1;
            }else {
                $scope.hour = 12;
            }
        }else {
            $scope.hour = 12;
        }
        $scope.hour = $scope.PrefixInteger($scope.hour,2);
    }else if(type == 2){
        if(angular.isNumber($scope.minute) || reg.test($scope.minute)){
            if(parseInt($scope.minute) >=0 && parseInt($scope.minute) <=59){
                if($scope.minute == 59){
                    $scope.minute = -1;
                }
                $scope.minute = parseInt($scope.minute) + 1;
             }else {
                $scope.minute = 0;
             }
         }else {
            $scope.minute = 0;
         }
         $scope.minute = $scope.PrefixInteger($scope.minute,2);
        }
    };
    $scope.timeDown = function (type) {
        if(type == 1){
            if(angular.isNumber($scope.hour) || reg.test($scope.hour)){
                if(parseInt($scope.hour) >=0 && parseInt($scope.hour) <=24){
                    if($scope.hour == 0){
                        $scope.hour = 24;
                    }
                    $scope.hour = parseInt($scope.hour) - 1;
            }else {
                 $scope.hour = 12;
            }
        }else {
            $scope.hour = 12;
        }
         $scope.hour = $scope.PrefixInteger($scope.hour,2)
        }else  if(type == 2){
            if(angular.isNumber($scope.minute) || reg.test($scope.minute)){
                if(parseInt($scope.minute) >=0 && parseInt($scope.minute) <=60){
                    if($scope.minute == 0){
                        $scope.minute = 60;
                    }
                    $scope.minute = parseInt($scope.minute) - 1;
                }else {
                    $scope.minute = 0;
                }
            }else {
                $scope.minute = 0;
            }
                $scope.minute = $scope.PrefixInteger($scope.minute,2);
           }
        };

        以上就是完成了基本的编写，下面就是要写指令了，需要把上面的东西都添加到指令中。

    第四步：编写指令

    directive
    var app = angular.module('myApp', []);
app.directive("coTimepicker", function() {
return {
    restrict:'AE',
    scope:{
        hour:'=',
        minute:'='
    },
    template:'<div class="co-timepicker-box" style="margin-left: 15px">'+
    '<input type="text" class="fl wi-timepicker-timeinput" ng-model="hour" maxlength="2">' +
    '<div class="fl wi-timepicker-change-box">' +
    '<div class="wi-timepicker-change-time arrow-up" ng-click="timeUp(1)"></div>' +
    '<div class="wi-timepicker-change-time arrow-down" ng-click="timeDown(1)"></div>' +
    '</div>' +
    '<div class="fl wi-timepicker-maohao">' +
    ':' +
    '</div>' +
    '<input type="text" class="fl wi-timepicker-timeinput" ng-model="minute" maxlength="2">' +
    '<div class="fl wi-timepicker-change-box">' +
    '<div class="wi-timepicker-change-time arrow-up" ng-click="timeUp(2)"></div>' +
    '<div class="wi-timepicker-change-time arrow-down" ng-click="timeDown(2)"></div>' +
    '</div>'+
    '</div>',
    link: function ($scope,element,attrs) {
        $scope.PrefixInteger = function (num, n) {
            return (Array(n).join(0) + num).slice(-n);
        };
        //--------------------------------------
        if(!$scope.hour){
            $scope.hour = 12;
        }
        if(!$scope.minute){
            $scope.minute = '00';
        }
        var reg=/^\d+$/;
        $scope.timeUp = function (type) {
            if(type == 1){
                if(reg.test($scope.hour)){
                    if(parseInt($scope.hour) >=0 && parseInt($scope.hour) <= 23){
                        if($scope.hour == 23){
                            $scope.hour = -1;
                        }
                        $scope.hour = parseInt($scope.hour) + 1;
                    }else {
                        $scope.hour = 12;
                    }
                }else {
                    $scope.hour = 12;
                }
                $scope.hour = $scope.PrefixInteger($scope.hour,2);
            }else if(type == 2){
                if(angular.isNumber($scope.minute) || reg.test($scope.minute)){
                    if(parseInt($scope.minute) >=0 && parseInt($scope.minute) <=59){
                        if($scope.minute == 59){
                            $scope.minute = -1;
                        }
                        $scope.minute = parseInt($scope.minute) + 1;
                    }else {
                        $scope.minute = 0;
                    }
                }else {
                    $scope.minute = 0;
                }
                $scope.minute = $scope.PrefixInteger($scope.minute,2);
            }
        };
        $scope.timeDown = function (type) {
            if(type == 1){
                if(angular.isNumber($scope.hour) || reg.test($scope.hour)){
                    if(parseInt($scope.hour) >=0 && parseInt($scope.hour) <=24){
                        if($scope.hour == 0){
                            $scope.hour = 24;
                        }
                        $scope.hour = parseInt($scope.hour) - 1;
                    }else {
                        $scope.hour = 12;
                    }
                }else {
                    $scope.hour = 12;
                }
                $scope.hour = $scope.PrefixInteger($scope.hour,2)
            }else  if(type == 2){
                if(angular.isNumber($scope.minute) || reg.test($scope.minute)){
                    if(parseInt($scope.minute) >=0 && parseInt($scope.minute) <=60){
                        if($scope.minute == 0){
                            $scope.minute = 60;
                        }
                        $scope.minute = parseInt($scope.minute) - 1;
                    }else {
                        $scope.minute = 0;
                    }
                }else {
                    $scope.minute = 0;
                }
                $scope.minute = $scope.PrefixInteger($scope.minute,2);
            }
        };
    }
}});

    第五步：使用指令

        指令写完之后，需要使用的，所以在html上写上指令

    <co-timepicker hour="hour" minute="minute"></co-timepicker>

    在控制器中可以获取到小时和分钟。同时也是可以在html上写死。在控制器中可以只用使用$scope.hour和$scope.minute来获取小时和分钟。

        其实这样就算是已经编写完成，可以直接使用了，昨天我没有搞清楚指令内作用域scope里面的一些用法，导致没法提取出小时和分钟，晚上研究了之后发现其实不算难，这里我也就不讲一些指令的基础了，毕竟我自己也没有搞太明白。很多时候，基础稍微看下之后，应该直接跟着实例去实践，实践之后才能知道一些光看基础不知道的东西。

        感觉自己写东西还是有点乱，没有说的很清楚。不过大家在github上下载下来一看就能明白了，其实这个指令我个人觉得还有待改进，而且难度也不算高，算是比较简单的额指令了。当初也是没找到合适的第三方才自己写了一个。之后还是会继续学习封装控件做成指令。分享出来给大家看看，指导指导。希望大家看到有问题的直接评论或者私信我给我指正。谢谢

    相关文章

      网友评论

        本文标题：web学习笔记10-自定义时间选择器指令编写

        本文链接：https://www.haomeiwen.com/subject/stydbttx.html

        延伸阅读

        深度阅读

        • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

        栏目导航

        热点阅读

        Web前端之路

        首页投稿（暂停使用，暂停投稿）

        关于我们|服务条款|联系我们|web学习笔记10-自定义时间选择器指令编写|投稿指南|网站地图|RSS订阅|排版工具|手机版

        提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

        Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

        备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

        本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

        所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！