angularjs使用directive实现倒计时按钮
前不久在做一个彩票的项目时,有一个手动开奖的需求。所以有了这个倒计时按钮。下面分享下具体的代码:
效果:

代码:
App.directive('timerBtn', function() { // 倒计时按钮
return {
restrict: 'A',
replace: true,
scope: {
startTime: '=startTime',
getData: '&getData'
},
template: '<button class="btn btn-danger" style="border-radius: 30px;padding: 3px 16px;" ng-disabled="startTime> 0" ng-bind="startTime > 0 ? showTime + \' 后开奖\' : \'手动开奖\'" ng-click="getData()"></button>',
controller: function($scope, $interval) {
var formatTime = function(second) {
return [parseInt(second / 60 / 60), parseInt(second / 60 % 60), second % 60].join(":")
.replace(/\b(\d)\b/g, "0$1");
}
var timer = $interval(function() {
$scope.startTime -= 1;
$scope.showTime = formatTime($scope.startTime);
if($scope.startTime < 1) {
$interval.cancel(timer);
};
}, 1000);
}
};
});
这个组件接受两个参数:
startTime:用于接收倒计时开始时间的时间戳
getData:用于接收倒计时结束之后触发的函数 用法:
<div timer-btn start-time="time" get-data="getData()"></div>
angularjs使用directive实现倒计时按钮的更多相关文章
- 前端angularJS利用directive实现移动端自定义软键盘的方法
最近公司项目的需求上要求我们iPad项目上一些需要输入数字的地方用我们自定义的软键盘而不是移动端设备自带的键盘,刚接到需求有点懵,因为之前没有做过,后来理了一下思路发现这东西也就那样.先看一下实现之后 ...
- AngularJS之directive
AngularJS之directive AngularJS是什么就不多舌了,这里简单介绍下directive.内容基本上是读书笔记,所以如果你看过<AngularJS up and runnin ...
- Angularjs之directive指令学习笔记(二)
1.Directive的五个实例知道driective作用.其中字段restrict.template. replace.transclude.link用法 参考文章链接地址:http://damoq ...
- iOS 短信验证码倒计时按钮的实现
验证码倒计时按钮的应用是非常普遍的,本文介绍了IOS实现验证码倒计时功能,点击获取验证码,进入时间倒计时,感兴趣的小伙伴们可以参考一下: 实现思路: 创建按钮,添加点击方法: 用NSTimer定时器, ...
- delphi倒计时按钮写法
procedure TForm1.FormActivate(Sender: TObject); var i: Integer; begin btn8.Enabled:=False; do begin ...
- jquery倒计时按钮常用于验证码倒计时
<!doctype html><html><head> <meta charset="utf-8"> <title>jq ...
- Angularjs的directive封装ztree
一般我们做web开发都会用到树,恰好ztree为我们提供了多种风格的树插件. 接下来就看看怎么用Angularjs的directive封装ztree <!DOCTYPE html> < ...
- angularJS中directive父子组件的数据交互
angularJS中directive父子组件的数据交互 1. 使用共享 scope 的时候,可以直接从父 scope 中共享属性.使用隔离 scope 的时候,无法从父 scope 中共享属性.在 ...
- React实战之60s倒计时按钮(发送短信验证按钮)
React实战之60s倒计时按钮——短信验证按钮 导入:(antd组件——Form表单) import { Button, Form, Input } from 'antd'; const FormI ...
随机推荐
- net Random 随机数重复的问题
在实际项目中不仅需要随机产生密码字符串,还要一次生成多个.我把生成随机字符串的方法放到for循环中,问题出现了. 生成的字符串,会重复. 经过多方查证,原因在代码. //使用与系统时间相关的种子 Ra ...
- 实验三:gdb跟踪调试内核从start_kernel到init进程启动
原创作品转载请注明出处<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 如果我写的不好或者有误的地方请留言 ...
- CentOS 7 安装tomcat
1.下载Linux版的tomcat 2.上传下载tomcat文件到/usr/local中执行以下操作 [root@admin local]# cd /usr/local [root@admin loc ...
- 简单又强大的联发科手机PhilZ Touch Recovery安装器,详细教程 - 本文出自高州吧
原文地址:http://bbs.gaozhouba.com/thread-19355-1-1.html * * * * * * * * * * * * * * * * * * * * * * * * ...
- Xamarin.Forms Hello word
创建项目 XMD1右键->添加->新建项目 MDPage:MasterDetailPage 主窗体,导航与明细的布局窗体. 指定MenuPage.xaml 作为Master <?xm ...
- 转:Yii实战中8个必备常用的扩展,模块和widget
转载自:http://www.yiiframework.com/wiki/180/yii8/ 在经过畅K网的实战后,总结一下在Yii的项目中会经常用到的组件和一些基本的使用方法,分享给大家,同时也给自 ...
- Documentation/sched-bwc.txt 的中文翻译
Chinese translated version of Documentation/sched-bwc.txt If you have any comment or update to the c ...
- 【HDOJ】1726 God’s cutter
简单DP. /* 1726 */ #include <cstdio> #include <cstring> #include <cstdlib> #define M ...
- 【转】Contrary to the answers here, you DON'T need to worry about encoding!
For those goals, I honestly do not understand why people keep telling you that you need the encoding ...
- Java 8 Lambda 揭秘
再了解了Java 8 Lambda的一些基本概念和应用后, 我们会有这样的一个问题: Lambda表达式被编译成了什么?. 这是一个有趣的问题,涉及到JDK的具体的实现. 本文将介绍OpenJDK对L ...