Angular结合$interval控制时间暂停和继续 完整版
2018-01-05 14:44
633 查看
效果图:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/26/3fa2ff073353f88e116930d296b5d49a)
------------------------------------------------------------------------------------------------------------------------------
1、网上不正常的
<body ng-app="App">
<div ng-controller="DemoCtrl">
<p>当前时间为: {{now|date:'yyyy-MM-dd hh:mm:ss'}}</p>
<button ng-click="stop()">停止</button>
<button ng-click="start()">开始</button>
</div>
<script>
var App = angular.module('App', []);
App.controller('DemoCtrl', ['$scope', '$timeout', '$interval', function ($scope, $timeout, $interval) {
$scope.now = new Date();
var timer = $interval(function () {
$scope.now = new Date();
}, 1000);
$scope.stop = function () {
$interval.cancel(timer);
}
$scope.start = function () {
timer;
}
}])
</script>
2、自己研究出来的
<body ng-app="App" ng-controller="DemoCtrl" ng-init="start()">
<div>
<p>当前时间为: {{now|date:'yyyy-MM-dd HH:mm:ss'}}</p>
<button ng-click="stop()">停止</button>
<button ng-click="start()">继续</button>
</div>
<script>
var App = angular.module('App', []),
timer;
App.controller('DemoCtrl',function ($scope, $interval) {
$scope.now = new Date();
$scope.start=function(){
//stop();
timer = $interval(function () {
$scope.now = new Date();
}, 1000);
$scope.stop = function () {
$interval.cancel(timer);
}
}
})
</script>
总结:自己想想什么原因吧!
------------------------------------------------------------------------------------------------------------------------------
1、网上不正常的
<body ng-app="App">
<div ng-controller="DemoCtrl">
<p>当前时间为: {{now|date:'yyyy-MM-dd hh:mm:ss'}}</p>
<button ng-click="stop()">停止</button>
<button ng-click="start()">开始</button>
</div>
<script>
var App = angular.module('App', []);
App.controller('DemoCtrl', ['$scope', '$timeout', '$interval', function ($scope, $timeout, $interval) {
$scope.now = new Date();
var timer = $interval(function () {
$scope.now = new Date();
}, 1000);
$scope.stop = function () {
$interval.cancel(timer);
}
$scope.start = function () {
timer;
}
}])
</script>
2、自己研究出来的
<body ng-app="App" ng-controller="DemoCtrl" ng-init="start()">
<div>
<p>当前时间为: {{now|date:'yyyy-MM-dd HH:mm:ss'}}</p>
<button ng-click="stop()">停止</button>
<button ng-click="start()">继续</button>
</div>
<script>
var App = angular.module('App', []),
timer;
App.controller('DemoCtrl',function ($scope, $interval) {
$scope.now = new Date();
$scope.start=function(){
//stop();
timer = $interval(function () {
$scope.now = new Date();
}, 1000);
$scope.stop = function () {
$interval.cancel(timer);
}
}
})
</script>
总结:自己想想什么原因吧!
相关文章推荐
- Unity游戏暂停,控制时间的设计
- [并发并行]_[pthread]_[对工作线程进行简单控制-暂停-继续-停止]
- 继续优化,使用AC算法,时间控制在1秒内
- 控制多线程,开启、暂停、继续、终止(实例)
- [并发并行]_[pthread]_[对工作线程进行简单控制-暂停-继续-停止]
- [POSIX线程模型]_[使用pthread对工作线程进行简单控制-暂停-继续-停止]
- angular服务 $interval获取当前时间 $location获取本机信息
- 控制多线程,开启、暂停、继续、终止(实例)
- 【Android】Broadcast控制音乐暂停继续等
- MFC--控制多线程,开启、暂停、继续、终止
- Delphi 编写系统服务(服务控制线程:开始,暂停,继续,停止)
- 多个audio播放器播放,暂停,时间控制
- 【Android】Broadcast控制音乐暂停继续等
- C#中利用多线程控制打印的暂停和继续
- 用as控制音效的播放、暂停、停止及时间显示
- gtk多线程控制暂停和继续.(HAI)
- 多个audio播放器播放,暂停,时间控制
- C#中利用多线程控制打印的暂停和继续
- 控制多线程,开启、暂停、继续、终止(实例)
- C#按钮事件中有循环,用另一个按钮控制停止,暂停,继续程序执行