如何在AngularJS和HTML一个滴答作响的时钟（时间） [英] How to make a ticking clock (time) in AngularJS and HTML

问题描述

我是个初学者AngularJS / HTML谁一直试图找到一个code片段，使时钟/时间条目上的web应用程序的用户。

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>

不要忘了包括angularJS并在你的身体标记'NG-应用。

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

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