如何为AngularJS应用程序定义两种模式(夜间/白天)

How to define two mode (night/day) for AngularJS Application

本文关键字：夜间 白天 模式 两种 AngularJS 应用程序 定义      更新时间：2023-09-26

我正在使用Angularjs开发一个应用程序。我对动画的一个问题感到震惊。
我想添加到我的应用程序，使这里被显示在两种模式(夜间和白天模式)的方式。我发现我可以使用主题提供程序在每次更改模式时更改主题。但还有其他解决办法吗?例如使用层叠样式表以及如何使用它。
有没有人可以帮助我，并建议最好的方法来做这个解决方案。由于

你只需要根据白天/晚上的情况来切换body元素的css class。

<body ng-class="{'night-mode': isNight()}">
    <div>
        <p>Some</p>
        <p>content</p>
        <p>Inside</p>
    </div>
</body>

在css中，你定义默认主题和夜间选项:

body div {
    background-color: gray;
}
body.night-mode div {
    background-color: blue;
}

在angularjs控制器内部定义检查夜间模式条件的函数:

function controller($scope) {
    $scope.isNight = function() {
        var hours = new Date().getHours();
        return hours > 19 || hours < 8;
    };    
}

这当然是一个例子;)

相关文章：