如何在 AngularJS 和 HTML 中制作滴答时钟(时间) [英] How to make a ticking clock (time) in AngularJS and HTML

问题描述

我是 AngularJS/html 初学者，一直在寻找代码片段来为网络应用制作时钟/时间项.

网络搜索并没有像我期望的那样容易地提供直接的结果，因为一些琐碎的事情，所以我想我会发布这个问题以获得一些答案，也让其他人更容易找到.

我已经发布了我的解决方案，但想在选择答案之前看看是否有更好的解决方案！

解决方案

这对我来说效果很好，而且我认为新手很容易理解.在这里

查看它的实际效果

JavaScript:

function TimeCtrl($scope, $timeout) {$scope.clock = "加载时钟...";//初始化时间变量$scope.tickInterval = 1000//毫秒var 滴答 = 函数(){$scope.clock = Date.now()//获取当前时间$timeout(tick, $scope.tickInterval);//重置定时器}//启动定时器$timeout(tick, $scope.tickInterval);}

HTML:

<p>{{ 时钟 |日期:'中等'}}</p>

不要忘记在 body 标签中包含 angularJS 和ng-app".

I'm a beginner AngularJS/html user who's been trying to find a code snippet to make a clock/time item for a web app.

A web search did not provide straight-forward results as easily as I would expect them for something so trivial, so I thought I would post this question to get some answers and also make this easier to find for others.

I have posted my solution but want to see if there is anything nicer out there before choosing an answer!

解决方案

This works quite nicely for me and I think is easy to follow for noobs. See it in action here

JavaScript:

function TimeCtrl($scope, $timeout) {
    $scope.clock = "loading clock..."; // initialise the time variable
    $scope.tickInterval = 1000 //ms

    var tick = function() {
        $scope.clock = Date.now() // get the current time
        $timeout(tick, $scope.tickInterval); // reset the timer
    }

    // Start the timer
    $timeout(tick, $scope.tickInterval);
}

HTML:

<div ng-controller='TimeCtrl'>
    <p>{{ clock  | date:'medium'}}</p>
</div>

Don't forget to include angularJS and the 'ng-app' in your body tag.

这篇关于如何在 AngularJS 和 HTML 中制作滴答时钟(时间)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！