Question

由于我是使用AngularJS的新手，我想知道如何在页面刷新时随机更改div background-image。

提前感谢您的帮助。

Answer 1

一个非常基本的方法应该是： - 1.）声明控制器的数组，其中包含图像文件的名称 2.）将数组的长度分配给变量 3.）在0到数组1的长度之间生成一个随机的no，因为大多数时候我们假设数组从索引0开始。 4.）然后将随机数存储在变量中，并在HTML页面中使用它。

所以index.html： -

<html ng-app='myapp'>
<body ng-controller='myctrl'>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div style="background:url('img/{{item[rand]}}.png'); padding: 100px;">{{item[rand]}}</div>

</body>
</html>

你的app.js： -

    <script type="text/javascript">
    var app = angular.module('myapp',[]);
    app.controller('myctrl',function($scope){
        $scope.item = ['dairy','discount','cleaning-spray']; //Declare a array which contains various colors
        $scope.val=$scope.item.length; //assign the length of array to a variable
        $scope.rand = Math.floor(Math.random()*$scope.val); // generate a random no . and make use of it as index of array
        //console.log($scope.rand);
    });

</script>

Answer 2

关于在 Angular 11.

刷新页面上更改背景图像的有用链接

change background image on refresh page

使用Angular js在页面刷新时随机更改div background-image

2 个答案: