个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我有一个计时器的 AngularJS 代码，在启动计数器时，计时器从 300 开始倒计时到 0。它工作正常。但现在我想用 MM:SEC 格式(时钟)替换 300，即 5:00 并继续并在 0:00 结束，但我无法做到。我的代码
angular.module('TimerApp', [])
.controller('TimerCtrl', function($scope, $timeout) {
$scope.counter = 300;
var mytimeout = null; // the current timeoutID
// actual timer method, counts down every second, stops on zero
$scope.onTimeout = function() {
if ($scope.counter === 0) {
$scope.$broadcast('timer-stopped', 0);
$timeout.cancel(mytimeout);
return;
}
$scope.counter--;
mytimeout = $timeout($scope.onTimeout, 1000);
};
$scope.startTimer = function() {
mytimeout = $timeout($scope.onTimeout, 1000);
};
// stops and resets the current timer
$scope.stopTimer = function() {
$scope.$broadcast('timer-stopped', $scope.counter);
$scope.counter = 30;
$timeout.cancel(mytimeout);
};
// triggered, when the timer stops, you can do something here, maybe show a visual indicator or vibrate the device
$scope.$on('timer-stopped', function(event, remaining) {
if (remaining === 0) {
console.log('your time ran out!');
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
<div ng-app='TimerApp'>
<div ng-controller="TimerCtrl">
{{counter}}
<button ng-click='startTimer()'>Start</button>
</div>
</div>上面的 JSFiddle 工作:http://jsfiddle.net/fq4vg/1796/
最佳答案
您可以进行一些小的更改，如下所示。
angular.module('TimerApp', [])
.controller('TimerCtrl', function($scope, $timeout) {
$scope.counter = 300;
$scope.time = Math.floor($scope.counter/60)+':' +$scope.counter % 60;//time representation..
var mytimeout = null; // the current timeoutID
// actual timer method, counts down every second, stops on zero
$scope.onTimeout = function() {
if ($scope.counter === 0) {
$scope.$broadcast('timer-stopped', 0);
$timeout.cancel(mytimeout);
return;
}
// var secs = 300;
$scope.counter--;
//decrement the clock representation...
$scope.time = Math.floor($scope.counter/60)+':' +$scope.counter % 60;
mytimeout = $timeout($scope.onTimeout, 1000);
};
$scope.startTimer = function() {
mytimeout = $timeout($scope.onTimeout, 1000);
};
// stops and resets the current timer
$scope.stopTimer = function() {
$scope.$broadcast('timer-stopped', $scope.counter);
$scope.counter = 30;
$timeout.cancel(mytimeout);
};
// triggered, when the timer stops, you can do something here, maybe show a visual indicator or vibrate the device
$scope.$on('timer-stopped', function(event, remaining) {
if (remaining === 0) {
console.log('your time ran out!');
}
});
});
您的 HTML 将包含以下代码。
<body>
<div ng-app='TimerApp'>
<div ng-controller="TimerCtrl">
{{time}}
<button ng-click='startTimer()'>Start</button>
</div>
</div>
关于javascript - 如何将计时器值格式更改为 MM :Sec from fixed counter in angular js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39455850/
25
4
0
我已经包含了在我的 html 页面中显示我的页面中的用户名。 我还找到了显示相同的内容。 我需要知道的是，这些方法之间从 LDAP/DB 中选取用户名的方式是否有区别？哪种方法可以保持最佳响应时间？
情况:我使用(php)cronjob 来保持我的数据库最新。受影响的表包含大约 40,000 条记录。基本上，cronjob 会删除所有条目并随后插入它们(具有不同的 ofc 值)。我必须这样做，因为
每个与 sec:authentication="..."无论是否登录都会显示。甚至是明确的false导致div出现。 另一边与sec:authorize="..."即使有明确的 true 也是隐藏的.
我正在关注 rfc6455 : Concretely, if as in the example above, the |Sec-WebSocket-Key| header field had the
Timespan(0,0,secs) 和 Timespan.FromSeconds(secs) 的返回值有区别吗？ 在我看来，不同之处在于 FromSeconds 接受 double。 最佳答案 最终
美好的一天，就我而言，一切都很好，并且在 localhost ide 上运行良好，但在 linux thymeleaf 下的站点上 sec:authorize 和 sec:authentication
我有一个 UIView 子类，在某些情况下我需要改变它的颜色一段时间，比如 5 秒，然后再改变颜色，我使用的方法是 performSelector:afterDelay: 和我传入的选择器是将颜色改回
测试之间的唯一变化是更改 TLS 版本。 Chrome 和 FireFox 之间的行为是相同的。 TLSv1 和 TLSv1.1 均达到 90 兆字节/秒。他们在 Java 6 (TLSv1) 和 J
我在数据框中有一个时间详细信息作为文本。 dict1={'time' : ['2 min 19 sec','2 min 43 sec','1 min 33 sec','32 sec','40 sec'
这里我们先学习 SECS-II 协议，给我的感受是先学完 SECS-II 协议，再去学习 SECS-I 和 HSMS 协议更加容易理解，所以这里我先介绍 SECS-II 协议。 文章的
03、SECS-I 协议介绍 上一篇我们学习了 SECS-II 协议，对 SECS-II 协议有了初略的了解，现在我们再来一起学习 SECS-I 协议。 文章的内容基本上来自参考
这里的 super 新手有一个 friend 帮助我制作了这个用于查看对冲基金 13fs 的网络爬虫。之前它运行良好，但最近我遇到了这个错误: response_two = get_request(s
我想创建一个条形图，其中 y 轴使用“min:sec”作为标签。但是，我要显示的数据以秒为单位。现在最好的方法是什么？ zone time_in_zone 1 305
文件名first.java package p1; public class first { int a; public void display() { System.out.pri
我正在尝试读取和存储名为xx.sec.gz.的文件。正在下载该文件很好，但是其中存在的数据完全不同（无法读取）。我使用了retrbinary .....除了retrbinary之外，python中存在
class Win32_PerfRawData_Tcpip_NetworkInterface : Win32_PerfRawData { uint32 BytesReceivedPerSec;
我试图在 Matlab 中绘制一些关于分钟而不是秒的数据作为格式化时间，即 min.sec。 我有实时数据流，在收到每个样本的地方，它的时间以秒为单位也被发送。然后我根据时间绘制它们。现在，由于我的
我在这里面临一个棘手的情况。我有一个基于 java 的应用程序，它试图通过 scp 远程机器复制某些文件。在执行这些任务时，我从应用程序端发现以下错误消息。 scp protocol error mt
我创建了一个弗兰肯斯坦式的音频播放器，并且在轨道计时方面需要一些帮助。我现在有了它，所以它从 0 开始计数 -> 无论轨道时间是多少，以秒为单位。我似乎不知道如何将这些秒转换为分钟:秒。 我是使用 J
我有一个带有以下 View 代码的Spring + Thymeleaf项目。 Contacts Welcome to the site! Wrong us
我是一名优秀的程序员,十分优秀！