Question

我是离子1和角度JS 1的新手，我希望在达到特定时间时更改图标的颜色而不刷新页面。

我目前的代码如下：

    <button class="icon ion-ios-videocam" ng-style="iconstyle”>  </button>

    var currentTime = Date();
    var parsecurrenttime = Date.parse(currentTime);
    if (parsecurrenttime >= parseTargetTime) {
    $scope.iconstyle = {
    color: '#e42112'
    };
    }

我是否知道如何在不刷新页面的情况下实现它？

非常感谢。

Answer 1

从角度使用$timeout服务。

您的代码应如下所示：

$timeout(function() {
    $scope.iconstyle = {
       color: '#e42112'
    };
}, 3000); //time in milliseconds = 3 seconds

该功能将在3秒后执行。

Answer 2

最简单的解决方案是计算你必须等待多长时间才能执行脚本并将计时器设置为这样的间隔。我看到你正在使用AngularJS，所以你必须将下面的代码放在控制器的某个地方。

var timeout = null;

// Clean-up
$scope.$on('$destroy', function () {
    $timeout.cancel(timeout);
});

function changeColor() {
    $scope.iconstyle = {
        color: '#e42112'
    };
}

(function() {
    var interval = new Date(2016, 11, 27, 18, 0).getTime() - Date.now();
    timeout = $timeout(changeColor, interval);
})();

说明

第一个功能就是操纵$scope对象。它由超时调用，在下面的自调用函数中设置。自调用函数将计算等待调用changeColor函数所需的时间。在这种情况下，该功能将在“2016-12-27 18:00”运行。将在每个控制器实例化时重新计算超时。

Answer 3

如果您希望在30秒后按钮颜色变为绿色时加载页面。

    .goGreen{
    color:green;
    }

    <button class="icon ion-ios-videocam" ng-class='{goGreen:ifBtngreen}'>  </button>
    $scope.ifBtngreen=false;
var parseTargetTime=30000 //in milliseconds
    $scope.$on('$ionicViewEnter',function(){
     $scope.startTime()
    })
    $scope.startTime=function(){

    $timeout(function() {
        $scope.ifBtngreen =true;
    }, parseTargetTime);
    }

在特定时间更改css样式而不使用ionic 1刷新页面

3 个答案:

说明