使用角度js的時間倒計時

Question

我是新的角度js。我試圖採用了棱角分明的js代碼。我做倒計時

$scope.endingdays = function(datevalue){ 
    var endingin=new Date(datevalue); 
    var date1=new Date(); 
    var date1_ms = Math.round(date1.getTime()); 
    var date2_ms = Math.round(endingin.getTime()); 
    var miliseconds = date2_ms - date1_ms; 
    var second = miliseconds/1000 ; 
    var seconds = Math.floor(second) %60; 
    var minutes = Math.floor(second/60) % 60; 
    var hours = Math.floor(second/3600);  
    result = hours<10 ? '0'+hours+':' : hours+':';  
    result += minutes<10 ? '0'+minutes+':' : minutes+':'; 
    result += seconds<10 ? '0'+seconds : seconds; 
    return result; 
}; 

這是我在這裏的新代碼的每一件事，除了我countdown.how自動進行倒計時罰款？。現在它表示將重新加載頁面的倒計時。 我打碼

{{endingdays(deal.endDate)}} 

我採用了棱角分明的js 1.2.23

Answer 1

您可以使用$interval更新時間。

還有一個例子，它展示瞭如何用AngularJS實現一個時鐘。

Answer 2

你的代碼將會像。這是提供您返回像上面提到的值。 **

在您的HTML中使用{{updatedTime}}。

**

var timeUpdater = $interval(function() { 

    var vals = $scope.endingdays(deal.endDate); 
    $scope.updatedTime = vals[0]+':'+vals[1]+':'+vals[2]; 

}, 100);// This is the time in miliseconds to update . 
}; 

// To kill the timer 

$scope.killTimeUpdater = function() { 

    if (angular.isDefined(timeUpdater)) { 
    $interval.cancel(timeUpdater); 
    timeUpdater = undefined; 
    } 

}; 

Answer 3

您將使用$過濾器和$間隔指令手段確保得到您的網頁上計時器顯示。 計時器顯示代碼 Demo

Answer 4

使用$間隔，並考慮使用自定義過濾器

var app = angular.module("timerApp", []); 
 
app.controller("timerController",['$scope','$interval','$filter', function($scope, $interval, $filter){  
 
//initalizing variables so they aren't defined for the first time in the time 
 
// (And therefore take a second to show up) 
 
    $scope.twoDaysFromNow = Math.floor(Date.now()/1000) + (60 * 60 * 24 * 2); 
 
    $scope.goal = ($scope.twoDaysFromNow); 
 
    $scope.now = Math.floor(Date.now()/1000); 
 
    $scope.time = $scope.goal - $scope.now; 
 
    
 
    
 
    $interval(function(){ 
 
     $scope.now = Math.floor(Date.now()/1000); 
 
     $scope.time = $scope.goal - $scope.now; 
 
    },1000,0,null); 
 
}]); 
 

 

 
app.filter('timeleft', function() { 
 
    function isInteger(x) { 
 
     return x % 1 === 0; 
 
    } 
 

 
    
 
    return function(value) { 
 
    if (value && isInteger(value)) 
 
     return toTimeLeft(value); 
 
    
 
    return value; 
 
    }; 
 

 
}); 
 

 

 
function toTimeLeft(t) { 
 
        var days, hours, minutes, seconds; 
 
    
 
        //display the words "days", "Hours" etc. 
 
        var daysD = ' day', hoursD = ' hour', minutesD = ' minute', secondsD = ' second'; 
 
        days = Math.floor(t/86400); 
 
        t -= days * 86400; 
 
        hours = Math.floor(t/3600) % 24; 
 
        t -= hours * 3600; 
 
        minutes = Math.floor(t/60) % 60; 
 
        t -= minutes * 60; 
 
        seconds = t % 60; 
 
    
 
        //Add an 's' on the end if it's not 1 
 
        if (seconds !== 1){secondsD += 's';} 
 
        if (minutes !== 1){minutesD += 's';} 
 
        if (hours !== 1){hoursD += 's';} 
 
        if (days !== 1){daysD += 's';} 
 
    
 
        // padding the numbers 
 
        return [ 
 
         pad(days, 2) + daysD, 
 
         pad(hours, 2) + hoursD, 
 
         pad(minutes, 2) + minutesD, 
 
         pad(seconds, 2) + secondsD 
 
        ].join(', '); 
 
       }; 
 
function pad(n, width, z) { 
 
    z = z || '0'; 
 
    n = n + ''; 
 
    return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n; 
 
}

@import url('https://fonts.googleapis.com/css?family=Ubuntu'); 
 
html { 
 
    background: #305e8e; 
 
    color: #fff; 
 
    text-align: center; 
 
    font-family: 'Ubuntu', sans-serif; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="timerApp"> 
 
    <div ng-controller="timerController"> 
 
     <h1>Hurry up! Deal ends in:</h1> 
 
     <h2>{{time | timeleft}}</h2> 
 
    </div> 
 
</div>

Answer 5

您可以使用$超時依賴於你的應用程序，並創建一個函數在你的控制器 -

var counter = 120; // 2 minutes 
    var customTimeout = $timeout($scope.onTimeout, 1000); // starting the timeout 
    // Timeout Function 
    $scope.onTimeout = function() { 
    counter--; 
    $scope.timer = parseInt(counter/60) ? parseInt(counter/60) : "00" ; 
    if((counter % 60) < 10){ 
    $scope.timer += ":"+ ((counter % 60) ? "0"+(counter % 60) : "00") ; 
    } 
    else{ 
    $scope.timer += ":"+ ((counter % 60) ? (counter % 60) : "00") ; 
    } 
    $scope.timer += " minutes" 
    if (counter === 0) { 
    $scope.stop(); 
    } 
} 
// Stop FUnction 
$scope.stop = function(customTimeout) { 
    $timeout.cancel(); 
}