Angular.js:秒到HH:mm:ss过滤器
Angular.js: Seconds to HH:mm:ss filter
我有一个秒数计数,例如713秒。如何实现将713秒转换为HH:mm:ss格式的Angular.js过滤器?在这种情况下,应该是00:11:53
<div>
{{ 713 | secondsToHHMMSS }} <!-- Should output 00:11:53 -->
</div>
试试这样的东西:
app.filter('secondsToDateTime', [function() {
return function(seconds) {
return new Date(1970, 0, 1).setSeconds(seconds);
};
}])
html:
<b>{{seconds | secondsToDateTime | date:'HH:mm:ss'}}</b>
演示
manzapanza的答案只有在秒数小于86400(1天)时才有效。日期对象需要完全为零。此外,最好返回实际日期对象,这样angularjs就不必再次生成。
app.filter('secondsToDateTime', function() {
return function(seconds) {
var d = new Date(0,0,0,0,0,0,0);
d.setSeconds(seconds);
return d;
};
});
和
<b>{{seconds | secondsToDateTime | date:'HH:mm:ss'}}</b>
编辑:如果您希望小时数超过24而不包含天数,最好不要使用日期:
app.filter('secondsToTime', function() {
function padTime(t) {
return t < 10 ? "0"+t : t;
}
return function(_seconds) {
if (typeof _seconds !== "number" || _seconds < 0)
return "00:00:00";
var hours = Math.floor(_seconds / 3600),
minutes = Math.floor((_seconds % 3600) / 60),
seconds = Math.floor(_seconds % 60);
return padTime(hours) + ":" + padTime(minutes) + ":" + padTime(seconds);
};
});
和
<b>{{seconds | secondsToTime}}</b>
试试这个:
app.filter('secondsToHHmmss', function($filter) {
return function(seconds) {
return $filter('date')(new Date(0, 0, 0).setSeconds(seconds), 'HH:mm:ss');
};
})
html:
<b>{{seconds | secondsToHHmmss}}</b>
app.filter('formatTimer', function () {
return function (input) {
function z(n) { return (n < 10 ? '0' : '') + n; }
var seconds = input % 60;
var minutes = Math.floor(input % 3600 / 60);
var hours = Math.floor(input / 3600);
return (z(hours) + ':' + z(minutes) + ':' + z(seconds));
};
将输出:02:04:14
我认为没有必要自定义过滤器
<b>{{hours}}{{seconds | date:':mm:ss'}}</b>
function Scoper($scope) {
$scope.seconds = '79000';
$scope.hours = parseInt($scope.seconds / 3600);
}
@manzapanza解决方案持续数天:
$scope.duration_for = function(seconds){
if(!seconds) return
var duration = new Date(1970, 0, 1).setSeconds(seconds)
var mask = 'HH:mm'
if(seconds >= 86400){
mask = 'd days,' + mask
}
return $filter('date')(duration, mask);
}
视图中:
{{duration_for(100500)}}
相关文章:
- 为什么我的d3.jsselectAll+过滤器没有过滤
- Angularjs-utils高亮过滤器在搜索时破坏应用程序
- Angular-表的多列过滤器
- 如何“;过滤器”;或者以其他方式重构该数据
- Angularjs通过过滤器获取indexOf
- ui网格日期单元格过滤器,过滤日期格式导致显示错误的日期
- 使用按钮的Angular UI网格过滤器
- KendoUI网格行过滤器,带有布尔值下拉列表
- 如何在angular.js中动态应用自定义过滤器
- 角度过滤器和ng点击不起作用
- SVG过滤器可以'不能在React中呈现
- 使用javascript或angularjs特定过滤器搜索字符串中第一个img标记的json值
- 在表单中创建一个黑名单过滤器以避免某些单词
- 如何应用带过滤器的ng if来过滤记录,并在同一页面中显示两个不同的视图
- 过滤器返回true或false
- angularjs ng基于点击时的数组值重复过滤器
- DC.js带过滤器的订购
- 使用angularjs内置过滤器过滤代码中的特定属性
- 让我自己的过滤器不工作
- Angular.js:秒到HH:mm:ss过滤器