2017-10-26 4 views
1

こんにちは私は、05:00に開始し、00:00に終了するカウントダウンを実行するための簡単なスクリプトを作成します。私は助けてください。私は動作するスクリプトを見つけることができません。私は関数new Date()でテストしましたが、私はこのDays/Hours/Minutes/Secondsのようなフォーマットを取得しました。私は分/秒しか必要ありません。カウントダウンが終了すると、警告メッセージが表示され、カウントダウンは00:00に停止します。瞬間のためにanglejsまたはjavascriptの分数分

私はこれをしました:

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.carname = "Volvo"; 
 
    $scope.timer = timer(); 
 
    
 
    function timer() { 
 
    \t var minutes = "03"; 
 
    \t var secondes = "00"; 
 
    \t var init = minutes + ":" + secondes; 
 
     var res = document.getElementById("timer").innerHTML = init; 
 
     return res; 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 

 
<h1>{{carname}}</h1> 
 
<h4 id="timer">{{timer()}}</h4> 
 

 
</div>

+0

を回答助けをしましたか? – Sajeetharan

答えて

3

あなたは、単に使用することができます$intervalとなり、custom filter秒でそれを表示する

$interval(function(){console.log($scope.counter--)},1000);

ここDEMO

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope, $interval) { 
 
    $scope.carname = "Volvo"; 
 
    $scope.counter = 180; 
 
    $interval(function(){console.log($scope.counter--)},1000); 
 
}); 
 
app.filter('counter', [function() { 
 
    return function(seconds) { 
 
     return new Date(1970, 0, 1).setSeconds(seconds); 
 
    }; 
 
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
<h1>{{carname}}</h1> 
 
{{counter | counter | date:'mm:ss'}} 
 
</div>

+0

ありがとうございました。そして今、カウントダウンが終わったとき(0時)に停止方法を追加してください。 – salimbenfarhat

1

私は、hereから少し変形例を取り、ここにある:

<!DOCTYPE HTML> 
<html> 
<head> 
<style> 
p { 
    text-align: center; 
    font-size: 60px; 
} 
</style> 
</head> 
<body> 

<p id="demo"></p> 

<script> 
// Set the date we're counting down to 
var countDownDate = new Date().setMinutes(new Date().getMinutes()+5); 

// Update the count down every 1 second 
var x = setInterval(function() { 

    // Get todays date and time 
    var now = new Date().getTime(); 

    // Find the distance between now an the count down date 
    var distance = countDownDate - now; 

    // Time calculations for days, hours, minutes and seconds 
    var days = Math.floor(distance/(1000 * 60 * 60 * 24)); 
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24))/(1000 * 60 * 60)); 
    var minutes = Math.floor((distance % (1000 * 60 * 60))/(1000 * 60)); 
    var seconds = Math.floor((distance % (1000 * 60))/1000); 

    // Output the result in an element with id="demo" 
    document.getElementById("demo").innerHTML = days + "d " + hours + "h " 
    + minutes + "m " + seconds + "s "; 

    // If the count down is over, write some text 
    if (distance < 0) { 
     clearInterval(x); 
     document.getElementById("demo").innerHTML = "EXPIRED"; 
    } 
}, 1000); 
</script> 

</body> 
</html> 
0

は、変数 'ましょう' を使用してカウントダウン機能についての簡単な例です:

ここでは10

は「VAR」変数と使用してカウントダウン再帰関数についての簡単な例です:

function countDown2(time){ 
    for(var i = time; i >= 0; i--){ 
     setTimeout(function() { 
     console.log(time); 
     time--; 
     },(time-i)*1000); 
    } 
} 
countDown2(5); 
関連する問題