堆棧內存溢出
  簡體   English   中英

angularjs 做一個簡單的倒計時

[英]angularjs make a simple countdown

 原文  2012-08-21 07:39:02  5   10    javascript/ html/ templates/ countdown/ angularjs

問題描述

我想用 Angular js 進行倒計時。 這是我的代碼：

html文件

<div ng-app ng-controller = "countController"> {{countDown}} <div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

js文件

function countController($scope){
    $scope.countDown = 10;    
    var timer = setInterval(function(){$scope.countDown--; console.log($scope.countDown)},1000);  
}​​

在 console.log 中它工作我有一個倒計時但在 {{countdown}} 刷新它不能你能幫我嗎？ 謝謝！

10 個解決方案

解決方案1
 60  2012-08-21 07:55:40

請在此處查看此示例。 這是一個簡單的計數示例！ 我認為您可以輕松修改以創建倒計時。

http://jsfiddle.net/ganarajpr/LQGE2/

JavaScript 代碼：

function AlbumCtrl($scope,$timeout) {
    $scope.counter = 0;
    $scope.onTimeout = function(){
        $scope.counter++;
        mytimeout = $timeout($scope.onTimeout,1000);
    }
    var mytimeout = $timeout($scope.onTimeout,1000);

    $scope.stop = function(){
        $timeout.cancel(mytimeout);
    }
}

HTML 標記：

<!doctype html>
<html ng-app>
<head>
    <script src="http://code.angularjs.org/angular-1.0.0rc11.min.js"></script>
    <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
</head>
<body>
<div ng-controller="AlbumCtrl">
    {{counter}}
    <button ng-click="stop()">Stop</button>    
</div>
</body>
</html>

解決方案2
 24  2014-03-10 01:12:32

從 1.3 版開始，ng 模塊中有一個服務： $interval

function countController($scope, $interval){
    $scope.countDown = 10;    
    $interval(function(){console.log($scope.countDown--)},1000,0);
}​​

謹慎使用：

注意：此服務創建的時間間隔必須在您完成后顯式銷毀。 特別是當控制器的作用域或指令的元素被銷毀時，它們不會自動銷毀。 您應該考慮到這一點，並確保始終在適當的時候取消間隔。 有關如何以及何時執行此操作的更多詳細信息，請參見下面的示例。

來自： Angular 的官方文檔。

解決方案3
 9  2012-08-21 07:53:44

當您從 angular 框架之外執行 angular 表達式時，您應該使用$scope.$apply() 。

function countController($scope){
    $scope.countDown = 10;    
    var timer = setInterval(function(){
        $scope.countDown--;
        $scope.$apply();
        console.log($scope.countDown);
    }, 1000);  
}

http://jsfiddle.net/andreev_artem/48Fm2/

解決方案4
 7  2014-01-09 20:23:25

我更新了 ganaraj 先生的回答以顯示停止和恢復功能，並添加了 angular js 過濾器來格式化倒數計時器

它在 jsFiddle 上

控制器代碼

'use strict';
var myApp = angular.module('myApp', []);
myApp.controller('AlbumCtrl', function($scope,$timeout) {
    $scope.counter = 0;
    $scope.stopped = false;
    $scope.buttonText='Stop';
    $scope.onTimeout = function(){
        $scope.counter++;
        mytimeout = $timeout($scope.onTimeout,1000);
    }
    var mytimeout = $timeout($scope.onTimeout,1000);
    $scope.takeAction = function(){
        if(!$scope.stopped){
            $timeout.cancel(mytimeout);
            $scope.buttonText='Resume';
        }
        else
        {
            mytimeout = $timeout($scope.onTimeout,1000);
            $scope.buttonText='Stop';
        }
            $scope.stopped=!$scope.stopped;
    }   
});

過濾器代碼改編自來自stackoverflow 的RobG

myApp.filter('formatTimer', function() {
  return function(input)
    {
        function z(n) {return (n<10? '0' : '') + n;}
        var seconds = input % 60;
        var minutes = Math.floor(input / 60);
        var hours = Math.floor(minutes / 60);
        return (z(hours) +':'+z(minutes)+':'+z(seconds));
    };
});

解決方案5
 2  2012-08-30 02:00:27

https://groups.google.com/forum/?fromgroups=#!topic/angular/2MOB5U6Io0A

Igor Minar的一些很棒的jsfiddle展示了$ defer的用法，並將$ apply包裝在setInterval調用中。

解決方案6
 1  2014-12-20 05:59:41

這可能有助於“如何在 AngularJS 中編寫倒計時手表的代碼”

第 1 步：HTML 代碼示例

<div ng-app ng-controller="ExampleCtrl">
    <div ng-show="countDown_text > 0">Your password is expired in 180 Seconds.</div>
    <div ng-show="countDown_text > 0">Seconds left {{countDown_text}}</div>
    <div ng-show="countDown_text == 0">Your password is expired!.</div>
</div>

第 2 步：AngulaJs 代碼示例

function ExampleCtrl($scope, $timeout) {
  var countDowner, countDown = 10;
  countDowner = function() {
    if (countDown < 0) {
      $("#warning").fadeOut(2000);
      countDown = 0;
      return; // quit
    } else {
      $scope.countDown_text = countDown; // update scope
      countDown--; // -1
      $timeout(countDowner, 1000); // loop it again
    }
  };

  $scope.countDown_text = countDown;
  countDowner()
}

下面給出了 AngularJs 中倒計時手表的完整示例。

<!DOCTYPE html>
<html>

<head>
  <title>AngularJS Example - Single Timer Example</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
  <script>
    function ExampleCtrl($scope, $timeout) {
      var countDowner, countDown = 10;
      countDowner = function() {
        if (countDown < 0) {
          $("#warning").fadeOut(2000);
          countDown = 0;
          return; // quit
        } else {
          $scope.countDown_text = countDown; // update scope
          countDown--; // -1
          $timeout(countDowner, 1000); // loop it again
        }
      };

      $scope.countDown_text = countDown;
      countDowner()
    }
  </script>
</head>

<body>
  <div ng-app ng-controller="ExampleCtrl">
    <div ng-show="countDown_text > 0">Your password is expired in 180 Seconds.</div>
    <div ng-show="countDown_text > 0">Seconds left {{countDown_text}}</div>
    <div ng-show="countDown_text == 0">Your password is expired!.</div>
  </div>
</body>

</html>

解決方案7
 1  2018-06-14 16:54:43

您可能沒有正確聲明您的模塊，或者您將函數放在聲明模塊之前（安全規則是在加載所有頁面后將 angular 模塊放在正文之后）。 由於您使用的是 angularjs，那么您應該使用$interval （angularjs 等效於 setInterval，這是一個 Windows 服務）。

這是一個有效的解決方案： 

 angular.module('count', []) .controller('countController', function($scope, $interval) { $scope.countDown = 10; $interval(function() { console.log($scope.countDown--); }, 1000, $scope.countDown); });
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.1/angular.min.js"></script> <body> <div ng-app="count" ng-controller="countController"> {{countDown}} </div> </body>

注意：它在 html 視圖中停在 0 處，但在 console.log 中停在 1 處，你能找出原因嗎？ ;)

解決方案8
 0  2014-08-10 14:39:53

function timerCtrl ($scope,$interval) {
    $scope.seconds = 0;
    var timer = $interval(function(){
        $scope.seconds++;
        $scope.$apply();
        console.log($scope.countDown);
    }, 1000);
}

解決方案9
 0  2016-09-22 08:25:50

按照我的方法，有效！

  • *angular 1.5.8 及以上版本。

角碼

 var app = angular.module('counter', []); app.controller('MainCtrl', function($scope, $interval) { var decreamentCountdown = function() { $scope.countdown -= 1; if ($scope.countdown < 1) { $scope.message = "timed out"; } }; var startCountDown = function() { $interval(decreamentCountdown, 1000, $scope.countdown) }; $scope.countdown = 100; startCountDown(); });
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.10/angular.min.js"></script> <body ng-app="counter" ng-controller="MainCtrl"> {{countdown}} {{message}} </body>

解決方案10
 0  2017-04-17 07:15:44

var timer_seconds_counter = 120;
$scope.countDown = function() {
      timer_seconds_counter--;
      timer_object = $timeout($scope.countDown, 1000);
      $scope.timer = parseInt(timer_seconds_counter / 60) ? parseInt(timer_seconds_counter / 60) : '00';
      if ((timer_seconds_counter % 60) < 10) {
        $scope.timer += ':' + ((timer_seconds_counter % 60) ? '0' + (timer_seconds_counter % 60) : '00');
      } else {
        $scope.timer += ':' + ((timer_seconds_counter % 60) ? (timer_seconds_counter % 60) : '00');
      }
      $scope.timer += ' minutes'
      if (timer_seconds_counter === 0) {
        timer_seconds_counter = 30;
        $timeout.cancel(timer_object);
        $scope.timer = '2:00 minutes';
      }
    }

解決方案11
 0  2020-10-19 22:25:02

$scope.countDown = 30;
var timer;
$scope.countTimer = function () {
    var time = $timeout(function () {
         timer = setInterval(function () {
             if ($scope.countDown > 0) {
                 $scope.countDown--;
            } else {
                clearInterval(timer);
                $window.location.href = '/Logoff';
            }
            $scope.$apply();
        }, 1000);
    }, 0);
}

$scope.stop= function () {
    clearInterval(timer);
    
}

在 HTML 中：

<button type="submit" ng-click="countTimer()">Start</button>
<button type="submit" ng-click="stop()">Clear</button>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何使用timer指令在angularjs中進行倒計時 如何在Javascript中制作一個非常簡單的倒數計時器？ AngularJS通過以下方式進行簡單分組 簡單倒數2 AngularJS 倒數計時器 倒計時按鈕angularjs 簡單的jquery倒計時問題 簡單的jQuery倒計時 如何制作簡單倒數的動畫 創建一個簡單的 2 分鍾倒計時
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM