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

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

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

效果图如图：



点击上下小三角可以变换时间，点击获取时间的按钮可以弹出提示框显示选择的时间，并且在控制台中打印出来。其实这些写起来并不是很难，在写指令的时候可能对大多数前端的小伙伴来说都不算难事，不过说实话，一年前左右刚接触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 {

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