HTML5之AngularJS实现当前时间显示

最新推荐文章于 2021-10-06 20:46:43 发布

原创最新推荐文章于 2021-10-06 20:46:43 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs

本文介绍如何利用AngularJS框架动态更新页面，实现实时显示当前时间的功能。通过AngularJS的数据绑定和时间处理，创建一个简单的时间显示组件，让网页上的时间始终保持最新。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <title></title>
    <script type="text/javascript">
        var app = angular.module("myApp", []);

        //        app.factory("$interval2", function () {
        //            return function (funcName, mSecond) {
        //                setInterval(funcName, mSecond);
        //            }
        //        });
        //
        //        app.controller("myCtrl", function ($scope, $interval2) {
        //            $interval2(function () {
        //                console.log("Angular de interval Java BC");
        //            }, 1000);
        //        });

        // app.provide("")
        // app.service("")

        app.factory("nowtime", function () {
            return function (type) {
                if (type == "Date") {
                    return new Date().toLocaleDateString();
                } else {
                    return new Date().toLocaleTimeString();
                }
            }
        });

        app.controller("myCtrl", function ($scope, nowtime) {
            $scope.time = nowtime("Date");
        });
    </script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
    {{ time }}
</div>
</body>
</html>