1
私はangularjsを初めて使っています。私は "生成"ボタンをクリックした後5秒後にラッキーナンバーを生成するこのラッキーナンバージェネレーターアプリをコーディングしました。私は、5秒間で完了し、結果を表示するプログレスバーを追加したいと思います。現在の進行状況バーは、ページが読み込まれるとすぐに表示されます。これを避ける方法は？AngularJS Lucky number generator：プログレスバーアニメーションを追加するには？
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.show = true;
$scope.$timeout = $timeout;
$scope.generate = function() {
var k = Math.floor(Math.random() * 10 + 1);
if (k == $scope.userinput) {
$scope.result = "Hooray! You won $10000!";
} else {
$scope.result = "Lucky number generated: " + k + "Try again!";
}
};
});<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<style>
#progressbar {
height: 5px;
width: 100%;
background-color: red;
animation-name: prgb;
animation-duration: 5s;
}
@keyframes prgb {
0% {
width: 0%;
}
25% {
width: 25%;
}
50% {
width: 50%;
}
75% {
width: 75%;
}
100% {
width: 100%;
}
}
</style>
<div ng-app="myApp" ng-controller="myCtrl">
Enter number between 0-10: <input type="text" ng-model="userinput">
<button ng-click="$timeout(generate, 5000);">Generate</button><br><br>
<div id="progressbar" ng-show="show" ng-initialize="show=false;"></div>
<div>{{result}}</div>
</div>
</body>
</html>